react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
668 lines (663 loc) • 19.5 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawControlPanel = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="9e4787ba-e528-4d3f-a0d4-d0ed05e36a23"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 853.55 784"
>
<defs>
<linearGradient
id="9104918b-1b06-4aab-a9e3-ee1f1e968603"
x1={426.78}
y1={651.11}
x2={426.78}
y2={132.89}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="gray" stopOpacity={0.25} />
<stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
<stop offset={1} stopColor="gray" stopOpacity={0.1} />
</linearGradient>
<linearGradient
id="e1516523-3b43-4cdf-a14c-9e7d8f64d469"
x1={263.53}
y1={255.6}
x2={263.53}
y2={205.12}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="172acfff-28db-4bba-8b19-28ab723f14aa"
x1={129.53}
y1={323.6}
x2={129.53}
y2={273.12}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="710a7686-1834-4650-96ef-eca9a3097048"
x1={415.53}
y1={392.6}
x2={415.53}
y2={342.12}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="467b5878-0dea-464a-bb51-3930fc34683d"
x1={212.53}
y1={460.6}
x2={212.53}
y2={410.12}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="f3a96d16-3b8a-4da5-a01c-559b0392e5cd"
x1={81.53}
y1={528.6}
x2={81.53}
y2={478.12}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="f3e8d191-6d5b-4396-bf55-b83403b8f5fa"
x1={346.53}
y1={596.6}
x2={346.53}
y2={546.12}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="69a4cfba-e384-4108-97de-a317d87fd5ab"
x1={577.21}
y1={453.04}
x2={577.21}
y2={406.71}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="7cbd4807-f193-4eb9-a64e-7dbda1a497ee"
x1={668.97}
y1={453.04}
x2={668.97}
y2={406.71}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="a49cd629-9a0f-4f51-970c-17e3b791923d"
x1={760.73}
y1={453.04}
x2={760.73}
y2={406.71}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="0df78842-62cc-4e1a-b4eb-7165b67c75da"
x1={577.21}
y1={523.46}
x2={577.21}
y2={477.13}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="f59bf9a0-9823-413e-b7a2-7f328843f480"
x1={668.97}
y1={523.46}
x2={668.97}
y2={477.13}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="c8b3a002-36c4-4228-a025-9f67aff1870b"
x1={760.73}
y1={523.46}
x2={760.73}
y2={477.13}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="28c6655a-8735-4d27-b646-32b8de137fc7"
x1={577.21}
y1={593.88}
x2={577.21}
y2={547.54}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="c3dcab84-3569-499b-8256-0d506ac4c7e6"
x1={668.97}
y1={593.88}
x2={668.97}
y2={547.54}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="703ca5f3-7ed9-4e5d-a2ac-72005f7ae931"
x1={760.73}
y1={593.88}
x2={760.73}
y2={547.54}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="ebe75104-ae08-4ff4-9003-91cc9510fb18"
x1={232.64}
y1={759.95}
x2={586.13}
y2={759.95}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="386a826f-9f90-4b2b-8140-01eb83574438"
x1={693.51}
y1={104.46}
x2={693.51}
y2={34.04}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="c1c88e78-336c-46a6-bde5-02caf2c06013"
x1={866.73}
y1={131.87}
x2={866.73}
y2={122.63}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="b26a0830-028c-4b48-af03-e7caa22430c5"
x1={622.03}
y1={104.46}
x2={622.03}
y2={34.04}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="25731e38-86a6-4815-b74c-72c61c3d16c8"
x1={795.25}
y1={131.87}
x2={795.25}
y2={122.63}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="e23ff1eb-1730-4897-8569-9a524a71230b"
x1={651.9}
y1={101.26}
x2={651.9}
y2={30.84}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="08e08e9d-34a7-409e-af66-513673e6be83"
x1={825.12}
y1={128.67}
x2={825.12}
y2={119.43}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="5d869035-dc1d-4f8e-b1f3-2666532ef759"
x1={617.47}
y1={266.04}
x2={617.47}
y2={187.77}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="82347b06-c024-4a9e-a6c3-538f6800d300"
x1={720.47}
y1={266.04}
x2={720.47}
y2={187.77}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="ad6e7ba4-d5b5-43e5-baf4-e6e575086bfd"
x1={617.47}
y1={358.04}
x2={617.47}
y2={279.77}
xlinkHref="#9104918b-1b06-4aab-a9e3-ee1f1e968603"
/>
<linearGradient
id="810b9c3d-2f35-42cb-bc28-0e7919250191"
x1={720.47}
y1={358.04}
x2={720.47}
y2={279.77}
xlinkHref="#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={props.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={props.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={props.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={props.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={props.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={props.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={props.primaryColor} />
<rect x={639.1} y={409.6} width={59.75} height={40.54} fill={props.primaryColor} />
<rect
x={730.85}
y={409.6}
width={59.75}
height={40.54}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={547.34} y={480.02} width={59.75} height={40.54} fill={props.primaryColor} />
<rect x={639.1} y={480.02} width={59.75} height={40.54} fill={props.primaryColor} />
<rect
x={730.85}
y={480.02}
width={59.75}
height={40.54}
fill={props.primaryColor}
opacity={0.5}
/>
<rect x={547.34} y={550.44} width={59.75} height={40.54} fill={props.primaryColor} />
<rect
x={639.1}
y={550.44}
width={59.75}
height={40.54}
fill={props.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={props.primaryColor}
/>
<rect
x={216.17}
y={675.67}
width={13.1}
height={52.41}
rx={5}
ry={5}
fill={props.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"
strokeMiterlimit={10}
strokeWidth={3}
strokeDasharray={12}
opacity={0.5}
/>
<circle
cx={550.01}
cy={16.44}
r={14.94}
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={3}
strokeDasharray={12}
opacity={0.5}
/>
<polyline
points="813.01 681.67 813.01 767.03 458.78 767.03"
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={3}
strokeDasharray={12}
opacity={0.5}
/>
<circle
cx={424.11}
cy={767.56}
r={14.94}
fill="none"
stroke="#3ad29f"
strokeMiterlimit={10}
strokeWidth={3}
strokeDasharray={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"
strokeMiterlimit={10}
strokeWidth={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"
strokeMiterlimit={10}
strokeWidth={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"
strokeMiterlimit={10}
strokeWidth={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"
strokeMiterlimit={10}
strokeWidth={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>
);
UndrawControlPanel.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawControlPanel.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawControlPanel;