react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
364 lines (359 loc) • 15.9 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawDevelopment = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="95d739ec-b70d-49d7-99fc-b8ece31a16dc"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 923 585.89"
>
<defs>
<linearGradient
id="c4984e62-c3a2-4d63-a7f1-72d003cbf332"
x1={337.02}
y1={284.7}
x2={337.02}
y2={157.05}
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="ae1c94bd-8073-45d7-9d65-5e742daca578"
x1={277.82}
y1={250.69}
x2={277.82}
y2={249.92}
xlinkHref="#c4984e62-c3a2-4d63-a7f1-72d003cbf332"
/>
<linearGradient
id="d81b2846-b84e-4cfc-aa5a-6d397f959497"
x1={445.5}
y1={447}
x2={445.5}
y2={83.79}
xlinkHref="#c4984e62-c3a2-4d63-a7f1-72d003cbf332"
/>
<linearGradient
id="aa3e344a-b185-47a1-8d72-ce117b4596cd"
x1={1022.23}
y1={742.95}
x2={1022.23}
y2={530.74}
xlinkHref="#c4984e62-c3a2-4d63-a7f1-72d003cbf332"
/>
<linearGradient
id="019be7ee-c174-4831-83df-34be516e09e3"
x1={477.63}
y1={628.29}
x2={583.5}
y2={628.29}
xlinkHref="#c4984e62-c3a2-4d63-a7f1-72d003cbf332"
/>
</defs>
<title>development</title>
<g opacity={0.5}>
<path
d="M353.32,212.24c1-4.57,1.57-8.3,1.16-10.18l-.41.06.63-.28,1.7-1.57.05,0,1.4-1.29a19.31,19.31,0,0,0,27.94-8.82c1.69,1,3,1.43,3.22.55a42.78,42.78,0,0,0,2.08-12.39,20.46,20.46,0,0,0-.47-4.45c-2.13-9.49-11.86-15.85-21.54-16.75-7.43-.69-15.55,1.62-20.05,7.57-3.9,5.16-11.57,8.62-15,14.1-2.77,4.42-1.91,10.35-3.22,15.44a45.57,45.57,0,0,0-4.1,3,29.19,29.19,0,0,0-7.93,7.86,112.53,112.53,0,0,0-9.26,12.42c-14.86,22.83-23.86,30.25-28.93,32.35l42.62.27a107.59,107.59,0,0,0,29,34.48l.26-.14.18.15,7.06-3.91a156.05,156.05,0,0,1-16.56-35.25c1-2.8,2.29-6.6,3.67-10.82,9.82,13.22,24.07,27.66,43.48,36.48l3.15-5.6S368.36,243.66,353.32,212.24Z"
transform="translate(-137.5 -157.05)"
fill="url(#c4984e62-c3a2-4d63-a7f1-72d003cbf332)"
/>
<path
d="M280.61,250l-5.57,0S276.57,251.62,280.61,250Z"
transform="translate(-137.5 -157.05)"
fill="url(#ae1c94bd-8073-45d7-9d65-5e742daca578)"
/>
</g>
<path
d="M343.34,230.23c9,12.88,22.71,27.77,42,36.56l2.87-5.11s-34-29.72-43.95-68.58l-1,.87C334.78,201.35,334.78,217.95,343.34,230.23Z"
transform="translate(-137.5 -157.05)"
fill="#4d8af0"
/>
<path
d="M343.34,230.23c9,12.88,22.71,27.77,42,36.56l2.87-5.11s-34-29.72-43.95-68.58l-1,.87C334.78,201.35,334.78,217.95,343.34,230.23Z"
transform="translate(-137.5 -157.05)"
opacity={0.05}
/>
<polygon
points="210.07 31.31 203.45 35.15 196.16 46.33 206.56 50.41 215.41 46.46 221.46 40.88 210.07 31.31"
fill="#fda57d"
/>
<path
d="M341.14,192.81s-12.48-1-29.44,25.08c-24.35,37.41-31.47,29.48-31.47,29.48l60.56.38s13.47-36.82,11.91-44C352.71,203.71,341.06,206,341.14,192.81Z"
transform="translate(-137.5 -157.05)"
fill="#4d8af0"
/>
<path
d="M347.39,188.23c.73,5.29,2.77,11.17,7.12,13.88l3.24-3-10.36-10.9Z"
transform="translate(-137.5 -157.05)"
opacity={0.1}
/>
<circle
cx={365.05}
cy={185.94}
r={17.65}
transform="translate(39.3 392.75) rotate(-89.64)"
fill="#fda57d"
/>
<path
d="M384.22,193.39c1.38-4.87,2.58-10,1.47-15-1.95-8.66-10.82-14.46-19.65-15.28-6.78-.63-14.19,1.48-18.29,6.91-3.56,4.7-4.14,11.06-7.27,16.06-2.9,4.63-7.85,7.88-10,12.89a3.13,3.13,0,0,0-.3,2.19c.39,1.15,1.76,1.55,2.92,1.9a21.89,21.89,0,0,1,13.22,11.18c-.33-9.36,6.43-17.29,12.81-24.14,3-3.2,8-7.9,12.5-4.91C372.24,185.67,383.46,196.07,384.22,193.39Z"
transform="translate(-137.5 -157.05)"
opacity={0.1}
/>
<path
d="M350.44,213.92s3.55,9.65-4.09,12.81"
transform="translate(-137.5 -157.05)"
fill={props.primaryColor}
/>
<rect
y={83.79}
width={891}
height={363.21}
fill="url(#d81b2846-b84e-4cfc-aa5a-6d397f959497)"
/>
<rect x={7} y={89} width={878} height={352} fill="#fff" />
<path
d="M352.5,281.05v93h38v25c11-19,27-25,27-25h152v-93Z"
transform="translate(-137.5 -157.05)"
fill={props.primaryColor}
/>
<path
d="M203.5,434.05v72h38v25c11-19,27-25,27-25h169v-72Z"
transform="translate(-137.5 -157.05)"
fill={props.primaryColor}
/>
<path
d="M977.5,329.05v72h-38v25c-11-19-27-25-27-25h-169v-72Z"
transform="translate(-137.5 -157.05)"
fill="#e0e0e0"
/>
<path
d="M977.5,524.05v41h-14v25c-11-19-27-25-27-25h-393v-41Z"
transform="translate(-137.5 -157.05)"
fill="#e0e0e0"
/>
<circle cx={821} cy={387} r={7} fill="#fff" />
<circle cx={801} cy={387} r={7} fill="#fff" />
<circle cx={781} cy={387} r={7} fill="#fff" />
<circle cx={761} cy={387} r={7} fill="#fff" />
<path
d="M316.6,229a98.19,98.19,0,0,0,34,50.14l6.44-3.57s-27.42-40.68-19.14-80.34l-1.76.41A26.59,26.59,0,0,0,316.6,229Z"
transform="translate(-137.5 -157.05)"
opacity={0.1}
/>
<path
d="M317,229a98.19,98.19,0,0,0,34,50.14l6.44-3.57S330,234.85,338.32,195.19l-1.76.41A26.59,26.59,0,0,0,317,229Z"
transform="translate(-137.5 -157.05)"
fill="#4d8af0"
/>
<path
d="M384.22,193c1.38-4.87,2.58-10,1.47-15-1.95-8.66-10.82-14.46-19.65-15.28-6.78-.63-14.19,1.48-18.29,6.91-3.56,4.7-10.55,7.86-13.68,12.86-2.9,4.63-1.44,11.07-3.62,16.09a3.13,3.13,0,0,0-.3,2.19c.39,1.15,1.76,1.55,2.92,1.9a21.89,21.89,0,0,1,13.22,11.18c-.33-9.36,6.43-17.29,12.81-24.14,3-3.2,8-7.9,12.5-4.91C372.24,185.27,383.46,195.67,384.22,193Z"
transform="translate(-137.5 -157.05)"
fill="#333"
/>
<path
d="M351.17,279.31s9.34,14,11.35,8-4.67-12-4.67-12Z"
transform="translate(-137.5 -157.05)"
fill="#fda57d"
/>
<ellipse
cx={359.37}
cy={190.7}
rx={4.67}
ry={2}
transform="translate(-109.45 269.74) rotate(-63.43)"
fill="#fda57d"
/>
<g opacity={0.5}>
<path
d="M1032.94,539.2c10.78,17.8,13.5,31.58,13.5,31.58,3.2-57-14.15-36.7-15.83-35.74l0-.07-5.8,3.35a13.34,13.34,0,0,0-9.33-3.93,13,13,0,0,0-7,2.07c-4.13.1-7.43,2.2-7.43,4.8a3.13,3.13,0,0,0,.26,1.22,15,15,0,0,0,8.95,24.95l1.53,10.88-2.42,1.9a13.37,13.37,0,0,0-5.16,9.69c-.23,4,1.43,8.64,9,11,0,0-.13,1.39-.38,3.59l-12.8,25.6s-5.12,11.73.37,12.08c7.89-1.37,6.52-4.46,7.55-7.21l.6-2h3c-2.45,13.4-10.45,59.48-9.65,86.62v7.85l-.51,3.89-14.74,4.42a3.71,3.71,0,0,0,1.19,7.26l20.83-.69a3.71,3.71,0,0,0,3.58-3.7V728H1016v-8.47l3.77-45.19.49-1.16.45,5.87,16.95,37.66,3.77,6.59,1.64-.88-.52,6.19-6.86,6a3.71,3.71,0,0,0-.95,4.32h0a3.71,3.71,0,0,0,5,1.8l18.7-9.2a3.71,3.71,0,0,0,1.74-4.85l-1.65-3.65a3.69,3.69,0,0,0-2.58-2.08l-3.54-3.54,1.22-.66-2.82-6.59-16.95-39.54-.7-22.26a15.07,15.07,0,0,0,7.14-15.41h1.09s-2.4-14-3.65-29.19l-.12-1.48V600s-.13-.72-.35-1.88c-1.33-15-3.39-27-14.63-28.33l-.08.07v-4.63a17,17,0,0,0,7.29-14.31,18.14,18.14,0,0,0-2.18-8.68l5.25-3Z"
transform="translate(-137.5 -157.05)"
fill="url(#aa3e344a-b185-47a1-8d72-ce117b4596cd)"
/>
</g>
<ellipse cx={878.33} cy={396.43} rx={13.98} ry={15.97} fill="#795548" />
<polygon
points="875.2 566.37 875.2 574.59 864.24 574.59 865.15 567.59 875.2 566.37"
fill="#fda57d"
/>
<path
d="M1042.83,717l-.91,11h.61a17.6,17.6,0,0,0,11.7-4.45l3.21-2.86-8.22-8.22Z"
transform="translate(-137.5 -157.05)"
fill="#fda57d"
/>
<polygon
points="882.5 508.85 883.41 520.72 899.85 557.24 912.63 550.85 896.2 512.5 895.28 483.29 880.67 483.29 882.5 508.85"
fill="#4d8af0"
/>
<polygon
points="882.5 508.85 883.41 520.72 899.85 557.24 912.63 550.85 896.2 512.5 895.28 483.29 880.67 483.29 882.5 508.85"
opacity={0.05}
/>
<path
d="M1016.35,599.26l-15.52,31s-5,11.38.36,11.71c7.65-1.33,6.32-4.33,7.32-7l9.66-33Z"
transform="translate(-137.5 -157.05)"
fill="#fda57d"
/>
<circle cx={875.45} cy={398.06} r={14.61} fill="#fda57d" />
<polygon
points="885.24 419.38 875 424.72 872.46 406.6 885.24 406.6 885.24 419.38"
fill="#fda57d"
/>
<path
d="M1012.7,629.39s-11,56.6-10,87.65h13.69l3.65-43.82,10-23.74s13.69-4.56,9.13-20.09Z"
transform="translate(-137.5 -157.05)"
fill="#4d8af0"
/>
<rect x={865.15} y={558.7} width={13.69} height={9.49} fill="#4d8af0" />
<rect
x={865.15}
y={558.7}
width={13.69}
height={9.49}
fill="#fff"
opacity={0.05}
/>
<polygon
points="899.48 556.39 903.28 563.69 915.37 557.32 912.14 549.82 899.48 556.39"
fill="#4d8af0"
/>
<path
d="M1005.06,729.14l-17.19,3.56a3.59,3.59,0,0,0-2.56,3.44h0a3.59,3.59,0,0,0,3.71,3.59l20.2-.67a3.59,3.59,0,0,0,3.47-3.59v-3.88c0-2,.39-2.59-1.59-2.59h-5A3.59,3.59,0,0,0,1005.06,729.14Z"
transform="translate(-137.5 -157.05)"
fill="#333"
/>
<path
d="M1022.82,571.79l-12.9,10.15a13,13,0,0,0-5,9.4c-.22,3.9,1.39,8.38,8.69,10.66,0,0-2.74,29.22-7.3,31H1041s-2.33-13.53-3.53-28.3C1036.07,587.66,1035.06,573.26,1022.82,571.79Z"
transform="translate(-137.5 -157.05)"
fill="#eee"
/>
<path
d="M1022.74,590.13l8.22,14.61L1030,637.6s-4.56,7.3-.91,8.22,9.13-1.83,8.22-7.3V601.08s-2.74-15.52-5.48-19.17Z"
transform="translate(-137.5 -157.05)"
fill="#fda57d"
/>
<path
d="M1049,722l-13.56,9.61a3.59,3.59,0,0,0-.92,4.19h0a3.59,3.59,0,0,0,4.86,1.75l18.14-8.92a3.59,3.59,0,0,0,1.69-4.7l-1.6-3.54c-.82-1.81-1.8-2.2-3.61-1.38l-5,3C1048.68,722.14,1049.26,721.77,1049,722Z"
transform="translate(-137.5 -157.05)"
fill="#333"
/>
<polygon
points="892.59 386.91 889.28 388.55 886.95 384.51 890.22 382.76 892.59 386.91"
fill="#795548"
/>
<path
d="M1027.72,539.82s21.92-23.1,17.37,33a129.42,129.42,0,0,0-15-28.82Z"
transform="translate(-137.5 -157.05)"
fill="#795548"
/>
<ellipse cx={879.66} cy={396.43} rx={12.65} ry={13.98} fill="#795548" />
<ellipse cx={871.84} cy={387.11} rx={7.49} ry={4.66} fill="#795548" />
<g opacity={0.5}>
<path
d="M583.33,560.38c-1.51-4.53-10.49,1.59-10.49,1.59l-.74,1-16,21.57L517.06,562.7v-9.78a13.58,13.58,0,0,0,11.88-15.8,14.73,14.73,0,0,0,5-4c1.36-1.45,2.82-3.2,2.68-5.13a3.56,3.56,0,0,0-.05-.92,4.92,4.92,0,0,0-3.34-3.38,31.8,31.8,0,0,0-4.86-1c-3.87-.76-7.37-2.78-11.15-3.93a25.37,25.37,0,0,0-5.27-1,7.68,7.68,0,0,0-3.79.42,13,13,0,0,0-3.25,2.67,14.78,14.78,0,0,1-4.26,2.77c-2.34,1-5,1.4-7.08,2.81a4.17,4.17,0,0,0-1.43,1.43,3.89,3.89,0,0,0-.38,2,10.19,10.19,0,0,0,.14,1.84,20.57,20.57,0,0,0,2.11,7.52,21.26,21.26,0,0,0,4.26,4.78l3.55,3.25a8,8,0,0,0,2.44,1.81,1.87,1.87,0,0,1,.55-1.34l-1.15,8a23.26,23.26,0,0,0-6.6-1c-3,0-6.07.51-7.4,2.57a2.85,2.85,0,0,0-.2.39c-4.16,4.94-13.7,20.94-8.09,59.79-.48,4.75-.77,7.76-.77,7.76l0,.48,0,.36.06.05,3.12,42.9-6,42.28h1.34v4.7h-1.51v7.55s21-1.34,24.16-6c2.65-3.9-10.54-2.37-15.1-1.73V713h.08v-1.59h1.59l6-28.69c6.21-10.74,3-37.58,3-37.58l7.55,4.53,6,31.54L506.49,728h1.34v3.27h-1.76v7.55s21-1.34,24.16-6c2.64-3.9-10.53-2.37-15.1-1.73l-.51-3h.92l6-42.28c3-11.45-1.08-45.07-1.62-49.37l7.49-49.45-.11-.14.11-.7,30.2,10.57s3,3,6.12-6c2.9-8.39,10.86-19.64,11.89-21.07l.11-.15S584.84,564.91,583.33,560.38Z"
transform="translate(-137.5 -157.05)"
fill="url(#019be7ee-c174-4831-83df-34be516e09e3)"
/>
</g>
<polygon
points="342.99 550.68 342.99 558.03 350.34 558.03 350.34 547.74 342.99 550.68"
fill="#fda57d"
/>
<polygon
points="370.93 565.39 370.93 574.21 378.28 572.74 376.81 563.92 370.93 565.39"
fill="#fda57d"
/>
<path
d="M492.33,557.83s-17.56,13.15-8.9,64.62Z"
transform="translate(-137.5 -157.05)"
fill="#4d8af0"
/>
<path
d="M492.33,557.83s-17.56,13.15-8.9,64.62Z"
transform="translate(-137.5 -157.05)"
opacity={0.05}
/>
<polygon
points="377.63 569.88 376.89 565.47 371.01 566.94 371.01 569.88 377.63 569.88"
opacity={0.05}
/>
<polygon
points="343.07 553.71 350.42 553.71 350.42 549.29 343.07 552.23 343.07 553.71"
opacity={0.05}
/>
<polygon
points="368.15 392.04 366.68 402.33 379.91 409.69 379.91 394.98 368.15 392.04"
fill="#fda57d"
/>
<path
d="M479.18,709.21,485.06,668,482,625.39l38.23,10.29s4.74,36.6,1.63,48.52l-5.88,41.17h-8.82l4.41-45.58-5.88-30.72-7.35-4.41s3.1,26.14-2.94,36.6l-5.88,27.94Z"
transform="translate(-137.5 -157.05)"
fill="#eee"
/>
<path
d="M581.95,562.16c-1.47-4.41-10.21,1.55-10.21,1.55l-.72,1,3.47,6.45.11-.15S583.42,566.57,581.95,562.16Z"
transform="translate(-137.5 -157.05)"
fill="#fda57d"
/>
<path
d="M505.49,558.57s-11.76-3.1-14.7,1.47S482,626.21,482,626.21s17.48,14.7,38.23,10.29L527.54,588Z"
transform="translate(-137.5 -157.05)"
opacity={0.05}
/>
<path
d="M555.48,585.69l-46.48-26a23.2,23.2,0,0,0-11-3c-2.94,0-5.92.5-7.2,2.5-2.94,4.57-8.82,66.17-8.82,66.17s17.48,14.7,38.23,10.29l7.35-48.52L557,597.45s2.94,2.94,6-5.8c2.82-8.17,10.57-19.12,11.57-20.52L571,564.69Z"
transform="translate(-137.5 -157.05)"
fill="#4d8af0"
/>
<path
d="M505.45,551.38a13.21,13.21,0,0,0,10.41,5.07,13.36,13.36,0,0,0,1.47-.08V553.5l-11.76-2.94Z"
transform="translate(-137.5 -157.05)"
opacity={0.05}
/>
<circle cx={378.44} cy={384.69} r={13.23} fill="#fda57d" />
<path
d="M479,713.78v7.35s20.42-1.31,23.53-5.88-16.17-1.47-16.17-1.47Z"
transform="translate(-137.5 -157.05)"
fill="#333"
/>
<path
d="M506.71,728.57v7.35s20.42-1.31,23.53-5.88-16.17-1.47-16.17-1.47Z"
transform="translate(-137.5 -157.05)"
fill="#333"
/>
<path
d="M507.55,547.81l5.17-7.4a12.64,12.64,0,0,1,2.62-3,4.28,4.28,0,0,1,3.77-.84,7.67,7.67,0,0,1,2.06,1.25c1.93,1.41,4.31,2.45,6.66,2s4.35-2.36,6.06-4.19c1.42-1.51,2.95-3.36,2.56-5.4A4.79,4.79,0,0,0,533.2,527a31,31,0,0,0-4.73-1c-3.77-.74-7.18-2.71-10.86-3.82a24.7,24.7,0,0,0-5.13-1,7.48,7.48,0,0,0-3.69.41,12.65,12.65,0,0,0-3.16,2.6,14.39,14.39,0,0,1-4.15,2.7c-2.28,1-4.82,1.37-6.89,2.73A4.06,4.06,0,0,0,493.2,531a5.32,5.32,0,0,0-.24,3.28,20,20,0,0,0,2.06,7.32,20.7,20.7,0,0,0,4.14,4.65l3.45,3.17a7.76,7.76,0,0,0,2.38,1.76C504.84,550.08,506.9,548.74,507.55,547.81Z"
transform="translate(-137.5 -157.05)"
opacity={0.05}
/>
<path
d="M507.55,547.32l5.17-7.4a12.64,12.64,0,0,1,2.62-3,4.28,4.28,0,0,1,3.77-.84,7.67,7.67,0,0,1,2.06,1.25c1.93,1.41,4.31,2.45,6.66,2s4.35-2.36,6.06-4.19c1.42-1.51,2.95-3.36,2.56-5.4a4.79,4.79,0,0,0-3.25-3.29,31,31,0,0,0-4.73-1c-3.77-.74-7.18-2.71-10.86-3.82a24.7,24.7,0,0,0-5.13-1,7.48,7.48,0,0,0-3.69.41,12.65,12.65,0,0,0-3.16,2.6,14.39,14.39,0,0,1-4.15,2.7c-2.28,1-4.82,1.37-6.89,2.73a4.06,4.06,0,0,0-1.39,1.39,5.32,5.32,0,0,0-.24,3.28,20,20,0,0,0,2.06,7.32,20.7,20.7,0,0,0,4.14,4.65l3.45,3.17a7.76,7.76,0,0,0,2.38,1.76C504.84,549.59,506.9,548.25,507.55,547.32Z"
transform="translate(-137.5 -157.05)"
fill="#333"
/>
</svg>
);
UndrawDevelopment.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawDevelopment.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawDevelopment;