<template>
  <!-- eslint-disable -->
  <svg :height="height" data-name="control panel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 853.55 784"><defs><linearGradient x1="426.78" y1="651.11" x2="426.78" y2="132.89" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient x1="263.53" y1="255.6" x2="263.53" y2="205.12" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="129.53" y1="323.6" x2="129.53" y2="273.12" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="415.53" y1="392.6" x2="415.53" y2="342.12" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="212.53" y1="460.6" x2="212.53" y2="410.12" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="81.53" y1="528.6" x2="81.53" y2="478.12" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="346.53" y1="596.6" x2="346.53" y2="546.12" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="577.21" y1="453.04" x2="577.21" y2="406.71" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="668.97" y1="453.04" x2="668.97" y2="406.71" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="760.73" y1="453.04" x2="760.73" y2="406.71" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="577.21" y1="523.46" x2="577.21" y2="477.13" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="668.97" y1="523.46" x2="668.97" y2="477.13" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="760.73" y1="523.46" x2="760.73" y2="477.13" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="577.21" y1="593.88" x2="577.21" y2="547.54" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="668.97" y1="593.88" x2="668.97" y2="547.54" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="760.73" y1="593.88" x2="760.73" y2="547.54" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="232.64" y1="759.95" x2="586.13" y2="759.95" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="693.51" y1="104.46" x2="693.51" y2="34.04" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="866.73" y1="131.87" x2="866.73" y2="122.63" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="622.03" y1="104.46" x2="622.03" y2="34.04" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="795.25" y1="131.87" x2="795.25" y2="122.63" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="651.9" y1="101.26" x2="651.9" y2="30.84" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="825.12" y1="128.67" x2="825.12" y2="119.43" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="617.47" y1="266.04" x2="617.47" y2="187.77" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="720.47" y1="266.04" x2="720.47" y2="187.77" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="617.47" y1="358.04" x2="617.47" y2="279.77" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/><linearGradient x1="720.47" y1="358.04" x2="720.47" y2="279.77" xlink:href="#9104918b-1b06-4aab-a9e3-ee1f1e968603"/></defs><title>control panel1</title><rect y="132.89" width="853.55" height="518.22" opacity="0.5" fill="url(#9104918b-1b06-4aab-a9e3-ee1f1e968603)"/><rect x="7.47" y="141.8" width="838.61" height="500.39" fill="#fff"/><rect x="45.88" y="222.89" width="436.38" height="14.94" fill="#f5f5f5"/><circle cx="263.53" cy="230.36" r="25.24" opacity="0.5" fill="url(#e1516523-3b43-4cdf-a14c-9e7d8f64d469)"/><circle cx="129.53" cy="298.36" r="25.24" opacity="0.5" fill="url(#172acfff-28db-4bba-8b19-28ab723f14aa)"/><circle cx="415.53" cy="367.36" r="25.24" opacity="0.5" fill="url(#710a7686-1834-4650-96ef-eca9a3097048)"/><circle cx="212.53" cy="435.36" r="25.24" opacity="0.5" fill="url(#467b5878-0dea-464a-bb51-3930fc34683d)"/><circle cx="81.53" cy="503.36" r="25.24" opacity="0.5" fill="url(#f3a96d16-3b8a-4da5-a01c-559b0392e5cd)"/><circle cx="346.53" cy="571.36" r="25.24" opacity="0.5" fill="url(#f3e8d191-6d5b-4396-bf55-b83403b8f5fa)"/><circle cx="263.53" cy="230.36" r="19.2" :fill="primaryColor" opacity="0.5"/><rect x="45.88" y="291.17" width="436.38" height="14.94" fill="#f5f5f5"/><circle cx="129.1" cy="298.64" r="19.2" :fill="primaryColor" opacity="0.5"/><rect x="45.88" y="359.46" width="436.38" height="14.94" fill="#f5f5f5"/><circle cx="415.04" cy="366.93" r="19.2" :fill="primaryColor"/><rect x="45.88" y="427.74" width="436.38" height="14.94" fill="#f5f5f5"/><circle cx="212.32" cy="435.21" r="19.2" :fill="primaryColor"/><rect x="45.88" y="496.03" width="436.38" height="14.94" fill="#f5f5f5"/><circle cx="81.09" cy="503.5" r="19.2" :fill="primaryColor" opacity="0.5"/><rect x="45.88" y="564.31" width="436.38" height="14.94" fill="#f5f5f5"/><circle cx="346.76" cy="571.78" r="19.2" :fill="primaryColor"/><rect x="543.07" y="406.71" width="68.28" height="46.34" opacity="0.5" fill="url(#69a4cfba-e384-4108-97de-a317d87fd5ab)"/><rect x="634.83" y="406.71" width="68.28" height="46.34" opacity="0.5" fill="url(#7cbd4807-f193-4eb9-a64e-7dbda1a497ee)"/><rect x="726.59" y="406.71" width="68.28" height="46.34" opacity="0.5" fill="url(#a49cd629-9a0f-4f51-970c-17e3b791923d)"/><rect x="543.07" y="477.13" width="68.28" height="46.34" opacity="0.5" fill="url(#0df78842-62cc-4e1a-b4eb-7165b67c75da)"/><rect x="634.83" y="477.13" width="68.28" height="46.34" opacity="0.5" fill="url(#f59bf9a0-9823-413e-b7a2-7f328843f480)"/><rect x="726.59" y="477.13" width="68.28" height="46.34" opacity="0.5" fill="url(#c8b3a002-36c4-4228-a025-9f67aff1870b)"/><rect x="543.07" y="547.54" width="68.28" height="46.34" opacity="0.5" fill="url(#28c6655a-8735-4d27-b646-32b8de137fc7)"/><rect x="634.83" y="547.54" width="68.28" height="46.34" opacity="0.5" fill="url(#c3dcab84-3569-499b-8256-0d506ac4c7e6)"/><rect x="726.59" y="547.54" width="68.28" height="46.34" opacity="0.5" fill="url(#703ca5f3-7ed9-4e5d-a2ac-72005f7ae931)"/><rect x="547.34" y="409.6" width="59.75" height="40.54" :fill="primaryColor"/><rect x="639.1" y="409.6" width="59.75" height="40.54" :fill="primaryColor"/><rect x="730.85" y="409.6" width="59.75" height="40.54" :fill="primaryColor" opacity="0.5"/><rect x="547.34" y="480.02" width="59.75" height="40.54" :fill="primaryColor"/><rect x="639.1" y="480.02" width="59.75" height="40.54" :fill="primaryColor"/><rect x="730.85" y="480.02" width="59.75" height="40.54" :fill="primaryColor" opacity="0.5"/><rect x="547.34" y="550.44" width="59.75" height="40.54" :fill="primaryColor"/><rect x="639.1" y="550.44" width="59.75" height="40.54" :fill="primaryColor" opacity="0.5"/><rect x="730.85" y="550.44" width="59.75" height="40.54" fill="#3ad29f" opacity="0.5"/><path d="M546.65,741.81c-6,0-10.45,1-13.61,6.5H404.4V734.45c0-3.6-4.6-2.25-7.63-2.25h-2.51c-3,0-5.5-1.35-5.5,2.25v3.09H244.28c-7.48,0-10.45,6.56-11.47,15.09,0-.22-.06-.43-.08-.65-.05.61-.08,1.23-.08,1.85v9.33c0,9.72,3.44,17.59,11.64,17.59H388.77v4.69c0,3.6,2.46,2.25,5.5,2.25h2.51c3,0,7.63,1.35,7.63-2.25V771.76H533.84a20,20,0,0,0,1.94,2.44c5.54,2.81,5.62,3.43,10.69,3.43l39.66-1.6V744Z" transform="translate(-173.22 -58)" opacity="0.5" fill="url(#ebe75104-ae08-4ff4-9003-91cc9510fb18)"/><rect x="166.44" y="692.34" width="198.45" height="19.2" fill="#e6e6e6"/><path d="M531.58,759.95h0a17,17,0,0,0,3,9.6h2.5v-19.2h-2.5A17,17,0,0,0,531.58,759.95Z" transform="translate(-173.22 -58)" opacity="0.03"/><path d="M585.06,773,549.68,777a17,17,0,0,1-17-17h0a17,17,0,0,1,17-17l35.38,3.93Z" transform="translate(-173.22 -58)" fill="#e6e6e6"/><path d="M534.55,763.15h-196v5.33h196a17,17,0,0,0,14.07,7.43L584,772v-5.33l-35.38,3.93A17,17,0,0,1,534.55,763.15Z" transform="translate(-173.22 -58)" opacity="0.05"/><path d="M75,683.53H218.79a0,0,0,0,1,0,0v35.38a0,0,0,0,1,0,0H75a13.5,13.5,0,0,1-13.5-13.5V697A13.5,13.5,0,0,1,75,683.53Z" :fill="primaryColor"/><rect x="216.17" y="675.67" width="13.1" height="52.41" rx="5" ry="5" :fill="primaryColor"/><rect x="213.55" y="683.53" width="2.62" height="35.38" opacity="0.05"/><rect x="83.82" y="690.08" width="120.55" height="2.62" opacity="0.05"/><rect x="83.82" y="699.25" width="120.55" height="2.62" opacity="0.05"/><rect x="83.82" y="708.43" width="120.55" height="2.62" opacity="0.05"/><path d="M397.16,775.41h-2.43a5.33,5.33,0,0,1-5.33-5.33v-3.84H249.17a14.4,14.4,0,0,1-14.32-12.89,14.56,14.56,0,0,0-.08,1.52v6.57a14.4,14.4,0,0,0,14.4,14.4H389.39v3.84a5.33,5.33,0,0,0,5.33,5.33h2.43a5.33,5.33,0,0,0,5.33-5.33v-9.6A5.33,5.33,0,0,1,397.16,775.41Z" transform="translate(-173.22 -58)" opacity="0.05"/><polygon points="693.51 34.04 666 49.93 666 56.8 666 81.7 666 88.58 693.51 104.46 721.02 88.58 721.02 81.7 721.02 56.8 721.02 49.93 693.51 34.04" fill="url(#386a826f-9f90-4b2b-8140-01eb83574438)"/><path d="M866.73,131.87a8.08,8.08,0,0,1-7.3-4.62,8.08,8.08,0,0,1,14.6,0A8.08,8.08,0,0,1,866.73,131.87Z" transform="translate(-173.22 -58)" opacity="0.5" fill="url(#c1c88e78-336c-46a6-bde5-02caf2c06013)"/><path d="M866.73,100.88l-25.61,14.78v29.57L866.73,160l25.61-14.78V115.67Zm0,37a7.47,7.47,0,1,1,7.47-7.47A7.47,7.47,0,0,1,866.73,137.92Z" transform="translate(-173.22 -58)" fill="#e6e6e6"/><path d="M866.73,94.48l-25.61,14.78v29.57l25.61,14.78,25.61-14.78V109.27Zm0,37A7.47,7.47,0,1,1,874.2,124,7.47,7.47,0,0,1,866.73,131.52Z" transform="translate(-173.22 -58)" fill="#fff"/><polygon points="622.03 34.04 594.51 49.93 594.51 56.8 594.51 81.7 594.51 88.58 622.03 104.46 649.54 88.58 649.54 81.7 649.54 56.8 649.54 49.93 622.03 34.04" fill="url(#b26a0830-028c-4b48-af03-e7caa22430c5)"/><path d="M795.25,131.87a8.08,8.08,0,0,1-7.3-4.62,8.08,8.08,0,0,1,14.6,0A8.08,8.08,0,0,1,795.25,131.87Z" transform="translate(-173.22 -58)" opacity="0.5" fill="url(#25731e38-86a6-4815-b74c-72c61c3d16c8)"/><path d="M795.25,100.88l-25.61,14.78v29.57L795.25,160l25.61-14.78V115.67Zm0,37a7.47,7.47,0,1,1,7.47-7.47A7.47,7.47,0,0,1,795.25,137.92Z" transform="translate(-173.22 -58)" fill="#e6e6e6"/><path d="M795.25,94.48l-25.61,14.78v29.57l25.61,14.78,25.61-14.78V109.27Zm0,37a7.47,7.47,0,1,1,7.47-7.47A7.47,7.47,0,0,1,795.25,131.52Z" transform="translate(-173.22 -58)" fill="#fff"/><polygon points="651.9 30.84 624.39 46.73 624.39 53.6 624.39 78.5 624.39 85.37 651.9 101.26 679.41 85.37 679.41 78.5 679.41 53.6 679.41 46.73 651.9 30.84" fill="url(#e23ff1eb-1730-4897-8569-9a524a71230b)"/><path d="M825.12,128.67a8.08,8.08,0,0,1-7.3-4.62,8.08,8.08,0,0,1,14.6,0A8.08,8.08,0,0,1,825.12,128.67Z" transform="translate(-173.22 -58)" opacity="0.5" fill="url(#08e08e9d-34a7-409e-af66-513673e6be83)"/><path d="M825.12,97.68l-25.61,14.78V142l25.61,14.78L850.73,142V112.47Zm0,37a7.47,7.47,0,1,1,7.47-7.47A7.47,7.47,0,0,1,825.12,134.72Z" transform="translate(-173.22 -58)" fill="#e6e6e6"/><path d="M825.12,91.28l-25.61,14.78v29.57l25.61,14.78,25.61-14.78V106.07Zm0,37a7.47,7.47,0,1,1,7.47-7.47A7.47,7.47,0,0,1,825.12,128.32Z" transform="translate(-173.22 -58)" fill="#fff"/><polyline points="161.11 102.33 161.11 16.97 515.33 16.97" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="12" opacity="0.5"/><circle cx="550.01" cy="16.44" r="14.94" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="12" opacity="0.5"/><polyline points="813.01 681.67 813.01 767.03 458.78 767.03" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="12" opacity="0.5"/><circle cx="424.11" cy="767.56" r="14.94" fill="none" stroke="#3ad29f" stroke-miterlimit="10" stroke-width="3" stroke-dasharray="12" opacity="0.5"/><circle cx="617.47" cy="226.9" r="39.14" fill="url(#5d869035-dc1d-4f8e-b1f3-2666532ef759)"/><circle cx="617.47" cy="226.9" r="36.69" fill="#fff"/><circle cx="617.47" cy="226.9" r="2.45" fill="#333"/><line x1="617.47" y1="226.9" x2="639.48" y2="204.89" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="3"/><path d="M797.05,283.92a36.65,36.65,0,0,0,16.44,30.59,36.68,36.68,0,0,0-2.05-59.71A36.62,36.62,0,0,0,797.05,283.92Z" transform="translate(-173.22 -58)" opacity="0.05"/><circle cx="720.47" cy="226.9" r="39.14" fill="url(#82347b06-c024-4a9e-a6c3-538f6800d300)"/><circle cx="720.47" cy="226.9" r="36.69" fill="#fff"/><circle cx="720.47" cy="226.9" r="2.45" fill="#333"/><line x1="720.47" y1="226.9" x2="742.48" y2="204.89" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="3"/><path d="M900.05,283.92a36.65,36.65,0,0,0,16.44,30.59,36.68,36.68,0,0,0-2.05-59.71A36.62,36.62,0,0,0,900.05,283.92Z" transform="translate(-173.22 -58)" opacity="0.05"/><circle cx="617.47" cy="318.9" r="39.14" fill="url(#ad6e7ba4-d5b5-43e5-baf4-e6e575086bfd)"/><circle cx="617.47" cy="318.9" r="36.69" fill="#fff"/><circle cx="617.47" cy="318.9" r="2.45" fill="#333"/><line x1="617.47" y1="318.9" x2="594.07" y2="342.3" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="3"/><path d="M797.05,375.92a36.65,36.65,0,0,0,16.44,30.59,36.68,36.68,0,0,0-2.05-59.71A36.62,36.62,0,0,0,797.05,375.92Z" transform="translate(-173.22 -58)" opacity="0.05"/><circle cx="720.47" cy="318.9" r="39.14" fill="url(#810b9c3d-2f35-42cb-bc28-0e7919250191)"/><circle cx="720.47" cy="318.9" r="36.69" fill="#fff"/><circle cx="720.47" cy="318.9" r="2.45" fill="#333"/><line x1="720.47" y1="318.9" x2="742.48" y2="296.89" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="3"/><path d="M900.05,375.92a36.65,36.65,0,0,0,16.44,30.59,36.68,36.68,0,0,0-2.05-59.71A36.62,36.62,0,0,0,900.05,375.92Z" transform="translate(-173.22 -58)" opacity="0.05"/></svg>
  <!-- eslint-enable -->
</template>

<script>
export default {
  name: 'UndrawControlPanel',
  props: {
    /** Sets primaryColor of the illustration */
    primaryColor: {
      type: String,
      default: '#6c63ff'  
    },
    /** Sets height of the illustration */
    height: {
      type: String,
      default: '100'  
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
