react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
700 lines (695 loc) • 20.3 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawSpecs = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="01628fc8-0ea2-41cd-8ace-9b6a212e1612"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 887.37 759.32"
>
<defs>
<linearGradient
id="61314c4a-0aef-46e1-9a94-2400fa6f2199"
x1={355.68}
y1={763.57}
x2={355.68}
y2={321.57}
gradientTransform="translate(58.7 18.7)"
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="acff99e6-01f8-4e5f-b43e-0ab955f938cc"
x1={439.36}
y1={536.58}
x2={583.65}
y2={536.58}
gradientTransform="translate(-109.95 179.21) rotate(-20.67)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="cc15bc35-75a8-4ab4-9d98-78e5cee61fe7"
x1={419}
y1={557.05}
x2={584.6}
y2={557.05}
gradientTransform="translate(-109.95 179.21) rotate(-20.67)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<clipPath
id="6fb37119-1f9f-401e-ad98-8d5560649451"
transform="translate(-132 -73)"
>
<polygon
id="62ce8f60-2bdb-4340-b4d9-528b05749716"
data-name="<Clipping Path>"
points="520.07 651.43 521.38 631.48 588.42 396.51 527.49 633.59 520.07 651.43"
fill="#e0e0e0"
/>
</clipPath>
<linearGradient
id="4903525a-904b-48c8-a855-34c8f0ef817b"
x1={659.52}
y1={600.24}
x2={659.52}
y2={457.29}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="2f2e4f14-dd07-450b-b516-30d9067b5e81"
x1={705.75}
y1={732.01}
x2={705.75}
y2={662.12}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="eaa81ddf-9575-465b-ba8a-1348ce64d69a"
x1={607.9}
y1={698.71}
x2={607.9}
y2={670.12}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="677c2432-3cb6-4c46-99f4-da3bfcbb670c"
x1={831.47}
y1={381.69}
x2={962.33}
y2={72.68}
gradientTransform="translate(1140.09 -663.14) rotate(90)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="46fc430e-3c05-42c5-8ae1-ec77a404634b"
x1={461.32}
y1={587.95}
x2={461.32}
y2={383.99}
gradientTransform="translate(1213.17 -105.57) rotate(90)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="a776ca46-5e11-4916-ae07-50b649223f46"
x1={485.56}
y1={651.77}
x2={485.56}
y2={448.57}
gradientTransform="translate(208.94 -178.72)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="6f65b498-b921-4944-99ca-3aebc1e5f587"
x1={480.16}
y1={647.25}
x2={480.16}
y2={444.04}
gradientTransform="translate(198.98 -162.75)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
<linearGradient
id="4104a1a9-035c-4f99-8d76-386a684915e2"
x1={483.09}
y1={656.46}
x2={483.09}
y2={453.26}
gradientTransform="translate(187.09 -160.3)"
xlinkHref="#61314c4a-0aef-46e1-9a94-2400fa6f2199"
/>
</defs>
<title>specs2</title>
<rect
x={232.28}
y={340.27}
width={364.19}
height={442}
transform="translate(-303.47 109.44) rotate(-20.67)"
fill="url(#61314c4a-0aef-46e1-9a94-2400fa6f2199)"
/>
<rect
x={235.3}
y={343.63}
width={357.57}
height={433.72}
transform="translate(-303.22 109.29) rotate(-20.67)"
fill="#fff"
/>
<rect
x={245.43}
y={399.15}
width={43.04}
height={433.72}
transform="matrix(0.94, -0.35, 0.35, 0.94, -332.29, 60.91)"
fill="#e0e0e0"
/>
<polygon
points="109.5 320.83 153.33 436.99 159.97 412.37 181.21 426.47 137.38 310.31 109.5 320.83"
fill="#3ad29f"
/>
<rect
x={345.08}
y={671.47}
width={160.58}
height={6.62}
transform="translate(-342.84 120.63) rotate(-20.67)"
fill={props.primaryColor}
/>
<rect
x={355.8}
y={690.53}
width={263.21}
height={6.62}
transform="translate(-345.57 143.76) rotate(-20.67)"
fill={props.primaryColor}
/>
<rect
x={530.83}
y={618.87}
width={67.87}
height={6.62}
transform="translate(-315.29 166.45) rotate(-20.67)"
fill={props.primaryColor}
/>
<rect
x={355.08}
y={706.42}
width={67.87}
height={6.62}
transform="translate(-357.52 110.04) rotate(-20.67)"
fill={props.primaryColor}
/>
<rect
x={446.46}
y={671.94}
width={67.87}
height={6.62}
transform="translate(-339.46 140.08) rotate(-20.67)"
fill={props.primaryColor}
/>
<rect
x={537.84}
y={637.46}
width={67.87}
height={6.62}
transform="translate(-321.4 170.13) rotate(-20.67)"
fill={props.primaryColor}
/>
<rect
x={324.67}
y={489.37}
width={198.65}
height={72.84}
transform="translate(-290.33 110.55) rotate(-20.67)"
fill="#e0e0e0"
/>
<polygon
points="123.44 315.57 159.97 412.37 181.21 426.47 137.38 310.31 123.44 315.57"
opacity={0.05}
/>
<g opacity={0.5}>
<path
d="M504.82,563.91,528,612.66s59.63-210.55,64.36-225.58C523.23,447.21,504.82,563.91,504.82,563.91Z"
transform="translate(-132 -73)"
fill="url(#acff99e6-01f8-4e5f-b43e-0ab955f938cc)"
/>
<path
d="M592.32,387.08l-71.7,251.3-1.41,21.35,7.94-19.08,6.43-25,38.4-39.2S633.71,464.18,592.32,387.08Z"
transform="translate(-132 -73)"
fill="url(#cc15bc35-75a8-4ab4-9d98-78e5cee61fe7)"
/>
</g>
<polygon
id="7a17be8b-cbd1-4b3f-a0bc-02c1a9dd2525"
data-name="<Clipping Path>"
points="388.06 578.43 389.38 558.48 456.42 323.51 395.49 560.59 388.06 578.43"
fill="#e0e0e0"
/>
<g clipPath="url(#6fb37119-1f9f-401e-ad98-8d5560649451)">
<path
d="M516.42,641.68a3.34,3.34,0,0,0,2.06.33c.86-.31,1.25-1.48,2.15-1.62a7.19,7.19,0,0,0,.32-2.49,1.06,1.06,0,0,1,.08-.61c.2-.32.68-.32,1-.59a1,1,0,0,0,.14-1.06,4.47,4.47,0,0,1-.32-1.07,2.43,2.43,0,0,1,.39-1.22c.4-.77,1-1.63,1.82-1.69s1.6.57,2.23.14c.15-.1.26-.25.41-.35a2.29,2.29,0,0,1,2.08.51c.35.42.19,1,.21,1.58,0,1,.72,1.82.85,2.79a4,4,0,0,1-.12,1.43,9.23,9.23,0,0,1-1,2.44c-.36.64-.8,1.23-1.11,1.9-.53,1.16-.66,2.55-1.56,3.45-.73.72-1.93,1.09-2.19,2.08a6.23,6.23,0,0,0,.14,1.86,3.36,3.36,0,0,1-1.58,2.78,9.9,9.9,0,0,1-3.09,1.23c-.43-1.42-2-2.26-2.48-3.65-.41-1.11-.09-2.35-.16-3.54a10.24,10.24,0,0,0-.62-2.61,2.1,2.1,0,0,0-.8-1.25.75.75,0,0,0-.92.16A1.5,1.5,0,0,1,516.42,641.68Z"
transform="translate(-132 -73)"
fill={props.primaryColor}
/>
</g>
<path
d="M506.61,561.85l21.63,45.58S584,410.56,588.42,396.51C523.82,452.73,506.61,561.85,506.61,561.85Z"
transform="translate(-132 -73)"
fill="#f3f3f3"
/>
<path
d="M533.46,610.24l36-36.7s57.72-104.94,19-177C586.59,403.39,533.46,610.24,533.46,610.24Z"
transform="translate(-132 -73)"
fill="#fff"
/>
<path
d="M533.46,610.24l36-36.7s57.72-104.94,19-177C586.59,403.39,533.46,610.24,533.46,610.24Z"
transform="translate(-132 -73)"
opacity={0.1}
/>
<circle
cx={659.52}
cy={528.76}
r={71.48}
fill="url(#4903525a-904b-48c8-a855-34c8f0ef817b)"
/>
<circle cx={659.52} cy={528.76} r={68.3} fill={props.primaryColor} />
<circle cx={659.52} cy={528.76} r={68.3} opacity={0.05} />
<circle cx={659.52} cy={528.76} r={38.91} fill={props.primaryColor} />
<circle cx={659.52} cy={528.76} r={38.91} fill="#f5f5f5" opacity={0.2} />
<circle cx={659.52} cy={528.76} r={27.8} fill={props.primaryColor} />
<path
d="M724.61,689.81a23.59,23.59,0,1,0-37.71,14.5,23.59,23.59,0,1,0,37.71-14.5Z"
transform="translate(-132 -73)"
fill="url(#2f2e4f14-dd07-450b-b516-30d9067b5e81)"
/>
<circle cx={577.73} cy={634.39} r={21.44} fill={props.primaryColor} />
<circle
cx={607.9}
cy={684.42}
r={14.3}
fill="url(#eaa81ddf-9575-465b-ba8a-1348ce64d69a)"
/>
<circle cx={607.9} cy={684.42} r={12.71} fill={props.primaryColor} />
<circle cx={569.78} cy={613.74} r={21.44} fill={props.primaryColor} />
<path
d="M751,656.74s47.67,16.5,94.92-13.68C847.12,641.47,809,693.89,751,656.74Z"
transform="translate(-132 -73)"
opacity={0.07}
/>
<g opacity={0.5}>
<rect x={323} y={132} width={3} height={17} fill="#47e6b1" />
<rect
x={455}
y={205}
width={3}
height={17}
transform="translate(538 -316) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={668} width={3} height={17} fill="#47e6b1" />
<rect
x={800}
y={73}
width={3}
height={17}
transform="translate(751 -793) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={174} y={135} width={3} height={17} fill="#47e6b1" />
<rect
x={306}
y={208}
width={3}
height={17}
transform="translate(392 -164) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={401} y={717} width={3} height={17} fill="#47e6b1" />
<rect
x={533}
y={790}
width={3}
height={17}
transform="translate(1201 191) rotate(90)"
fill="#47e6b1"
/>
</g>
<path
d="M921.89,662a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,916,667.8h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,921.89,662Z"
transform="translate(-132 -73)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M845.89,763a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,840,768.8h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,845.89,763Z"
transform="translate(-132 -73)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M492.89,116a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,487,121.8h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,492.89,116Z"
transform="translate(-132 -73)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M228.89,715a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,223,720.8h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,228.89,715Z"
transform="translate(-132 -73)"
fill="#4d8af0"
opacity={0.5}
/>
<circle cx={493} cy={56} r={6} fill="#f55f44" opacity={0.5} />
<circle cx={6} cy={73} r={6} fill="#4d8af0" opacity={0.5} />
<circle cx={843} cy={411} r={6} fill="#47e6b1" opacity={0.5} />
<circle cx={59} cy={301} r={6} fill="#f55f44" opacity={0.5} />
<g opacity={0.5}>
<path
d="M769.9,151h286a6.28,6.28,0,0,1,6.28,6.28V310.22a6.29,6.29,0,0,1-6.29,6.29h-286a6.28,6.28,0,0,1-6.28-6.28V157.3A6.29,6.29,0,0,1,769.9,151Z"
transform="matrix(0.17, -0.98, 0.98, 0.17, 391.89, 1019.07)"
fill="url(#677c2432-3cb6-4c46-99f4-da3bfcbb670c)"
/>
</g>
<rect
x={832.41}
y={88.37}
width={161.02}
height={290.64}
rx={13.64}
ry={13.64}
transform="matrix(0.98, 0.17, -0.17, 0.98, -77.42, -228.26)"
fill="#fff"
/>
<path
id="f9e172c5-4201-4ee5-8617-aa344e760ab8"
data-name="<Path>"
d="M976.76,104.8a13.05,13.05,0,0,1-14.6,8.7l-54.77-9.68a13.05,13.05,0,0,1-10.74-13.17l-29-5.13a6.12,6.12,0,0,0-7.09,5l-45.9,259.81a6.12,6.12,0,0,0,5,7.09l138.57,24.48a6.12,6.12,0,0,0,7.09-5l45.9-259.81a6.12,6.12,0,0,0-5-7.09Z"
transform="translate(-132 -73)"
fill="#e0e0e0"
/>
<rect
x={916.75}
y={100.93}
width={35.88}
height={2.24}
rx={1.12}
ry={1.12}
transform="translate(-103.24 -222.66) rotate(9.3)"
fill="#dbdbdb"
/>
<circle
cx={959.96}
cy={105.96}
r={1.35}
transform="translate(568.31 963.19) rotate(-80.7)"
fill="#dbdbdb"
/>
<rect
x={865.51}
y={138.87}
width={44}
height={38}
transform="translate(-97.38 -206.98) rotate(8.8)"
fill="#fff"
/>
<rect
x={857.1}
y={193.22}
width={44}
height={38}
transform="translate(-89.16 -205.05) rotate(8.8)"
fill={props.primaryColor}
opacity={0.3}
/>
<rect
x={848.68}
y={247.57}
width={44}
height={38}
transform="translate(-80.94 -203.12) rotate(8.8)"
fill="#fff"
/>
<rect
x={840.26}
y={301.93}
width={44}
height={38}
transform="translate(-72.72 -201.2) rotate(8.8)"
fill="#3ad29f"
opacity={0.3}
/>
<rect
x={921.01}
y={157.45}
width={58}
height={4}
transform="translate(-96.4 -216.53) rotate(8.8)"
fill="#fff"
/>
<rect
x={919.17}
y={169.31}
width={58}
height={4}
transform="translate(-94.61 -216.11) rotate(8.8)"
fill="#fff"
/>
<rect
x={912.74}
y={210.82}
width={58}
height={4}
transform="translate(-88.33 -214.64) rotate(8.8)"
fill="#fff"
/>
<rect
x={910.91}
y={222.68}
width={58}
height={4}
transform="matrix(0.99, 0.15, -0.15, 0.99, -86.54, -214.21)"
fill="#fff"
/>
<rect
x={904.48}
y={264.18}
width={58}
height={4}
transform="translate(-80.26 -212.74) rotate(8.8)"
fill="#fff"
/>
<rect
x={902.64}
y={276.04}
width={58}
height={4}
transform="translate(-78.47 -212.32) rotate(8.8)"
fill="#fff"
/>
<rect
x={896.21}
y={317.55}
width={58}
height={4}
transform="translate(-72.19 -210.85) rotate(8.8)"
fill="#fff"
/>
<rect
x={894.38}
y={329.4}
width={58}
height={4}
transform="translate(-70.4 -210.43) rotate(8.8)"
fill="#fff"
/>
<g opacity={0.5}>
<rect
x={625.22}
y={324.58}
width={203.96}
height={62.36}
transform="translate(232.31 1006.43) rotate(-89.44)"
fill="url(#46fc430e-3c05-42c5-8ae1-ec77a404634b)"
/>
</g>
<rect
x={698.06}
y={255.15}
width={59.29}
height={201.23}
transform="translate(-128.47 -80.13) rotate(0.56)"
fill="#e0e0e0"
/>
<rect
x={707.56}
y={258.39}
width={41.91}
height={41.91}
transform="translate(-129.22 -80.14) rotate(0.56)"
fill="#4d8af0"
/>
<rect
x={707.06}
y={308.99}
width={41.91}
height={41.91}
transform="translate(-128.72 -80.14) rotate(0.56)"
fill="#4d8af0"
opacity={0.5}
/>
<rect
x={706.56}
y={359.59}
width={41.91}
height={41.91}
transform="translate(-128.23 -80.13) rotate(0.56)"
fill="#4d8af0"
opacity={0.3}
/>
<g opacity={0.5}>
<rect
x={663.32}
y={269.86}
width={62.36}
height={203.2}
transform="translate(-212.27 156.87) rotate(-17.78)"
fill="url(#a776ca46-5e11-4916-ae07-50b649223f46)"
/>
</g>
<rect
x={665.34}
y={271.06}
width={59.29}
height={200.47}
transform="translate(-212.2 157.01) rotate(-17.78)"
fill="#f5f5f5"
/>
<rect
x={650.84}
y={277.92}
width={41.91}
height={41.91}
transform="translate(-191.18 146.47) rotate(-17.78)"
fill="#ff5252"
/>
<rect
x={666.3}
y={326.11}
width={41.91}
height={41.91}
transform="translate(-205.16 153.49) rotate(-17.78)"
fill="#ff5252"
opacity={0.5}
/>
<rect
x={681.75}
y={374.29}
width={41.91}
height={41.91}
transform="translate(-219.14 160.51) rotate(-17.78)"
fill="#ff5252"
opacity={0.3}
/>
<g opacity={0.5}>
<rect
x={647.96}
y={281.3}
width={62.36}
height={203.2}
transform="translate(-232.5 310.77) rotate(-29.48)"
fill="url(#6f65b498-b921-4944-99ca-3aebc1e5f587)"
/>
</g>
<rect
x={649.94}
y={282.41}
width={59.29}
height={200.47}
transform="translate(-232.32 310.95) rotate(-29.48)"
fill="#f5f5f5"
/>
<rect
x={621.22}
y={295.49}
width={41.91}
height={41.91}
transform="translate(-204.58 283.97) rotate(-29.48)"
fill="#69f0ae"
/>
<rect
x={646.12}
y={339.54}
width={41.91}
height={41.91}
transform="translate(-223.04 301.93) rotate(-29.48)"
fill="#69f0ae"
opacity={0.5}
/>
<rect
x={671.02}
y={383.59}
width={41.91}
height={41.91}
transform="translate(-241.49 319.89) rotate(-29.48)"
fill="#69f0ae"
opacity={0.3}
/>
<g opacity={0.5}>
<rect
x={639}
y={292.96}
width={62.36}
height={203.2}
transform="translate(-234.98 405.47) rotate(-36.68)"
fill="url(#4104a1a9-035c-4f99-8d76-386a684915e2)"
/>
</g>
<rect
x={640.94}
y={294.02}
width={59.29}
height={200.47}
transform="translate(-234.72 405.66) rotate(-36.68)"
fill="#fff"
/>
<rect
x={604.21}
y={312.32}
width={41.91}
height={41.91}
transform="matrix(0.8, -0.6, 0.6, 0.8, -207.28, 366.44)"
fill={props.primaryColor}
/>
<rect
x={634.44}
y={352.9}
width={41.91}
height={41.91}
transform="translate(-225.54 392.54) rotate(-36.68)"
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={664.66}
y={393.48}
width={41.91}
height={41.91}
transform="matrix(0.8, -0.6, 0.6, 0.8, -243.8, 418.63)"
fill={props.primaryColor}
opacity={0.3}
/>
</svg>
);
UndrawSpecs.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawSpecs.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawSpecs;