react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
403 lines (398 loc) • 15.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawStarman = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="8abbfe23-26e0-4ef7-83d7-6944c41cdadc"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 829 744.16"
>
<defs>
<linearGradient
id="8d3987ee-7da6-4397-b7c6-fc969519ed63"
x1={382.9}
y1={692.59}
x2={382.9}
y2={45.25}
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="41a98616-cc8d-45ca-bf5b-bcdeacba7b4f"
x1={577.21}
y1={539.76}
x2={577.21}
y2={383.34}
xlinkHref="#8d3987ee-7da6-4397-b7c6-fc969519ed63"
/>
<linearGradient
id="cbeba5be-4290-4dae-bc1b-44a303762a01"
x1={422.99}
y1={586.26}
x2={422.99}
y2={284.95}
xlinkHref="#8d3987ee-7da6-4397-b7c6-fc969519ed63"
/>
<linearGradient
id="d7c56f50-4219-4953-bdbb-ce8107747d0c"
x1={809.48}
y1={657.06}
x2={809.48}
y2={582.42}
xlinkHref="#8d3987ee-7da6-4397-b7c6-fc969519ed63"
/>
<linearGradient
id="65800a0c-0f7d-440b-866d-d9a2d0291c31"
x1={728.61}
y1={677.75}
x2={728.61}
y2={553.95}
gradientTransform="translate(-210.42 971.61) rotate(-62.55)"
xlinkHref="#8d3987ee-7da6-4397-b7c6-fc969519ed63"
/>
</defs>
<title>startman1</title>
<circle
cx={382.9}
cy={368.92}
r={323.67}
fill="url(#8d3987ee-7da6-4397-b7c6-fc969519ed63)"
/>
<circle cx={382.9} cy={368.92} r={315.73} fill={props.primaryColor} />
<circle cx={280.81} cy={186.43} r={39.22} opacity={0.05} />
<circle cx={400.77} cy={606.43} r={39.22} opacity={0.05} />
<circle cx={439.99} cy={324.03} r={80.19} opacity={0.05} />
<path
d="M694.73,539.76c-39.72,0-82-1.9-125.22-5.72-96.07-8.48-185.62-25.41-252.14-47.66-67-22.43-102.8-47.77-100.72-71.35,1.05-11.94,11.57-22.6,31.25-31.68l1,2.25c-18.82,8.68-28.85,18.65-29.82,29.65s7.35,22.84,24.75,34.82c17.1,11.77,42.09,23.19,74.29,34,66.35,22.2,155.69,39.08,251.58,47.54s186.81,7.49,256-2.74c33.58-5,60.19-11.84,79.09-20.43,19.24-8.74,29.49-18.82,30.47-29.95,1.12-12.67-10.33-26.56-33.1-40.16l1.27-2.13c24,14.33,35.53,28.63,34.3,42.51-2.08,23.59-41.74,42.27-111.66,52.6C788,536.92,743.23,539.75,694.73,539.76Z"
transform="translate(-185 -76.87)"
fill="url(#41a98616-cc8d-45ca-bf5b-bcdeacba7b4f)"
/>
<path
d="M902.83,434.76c22.71,13.57,34.91,27.67,33.7,41.33-4.19,47.47-168.46,71.75-366.91,54.23s-355.93-70.2-351.74-117.67c1-11.73,11.85-22,30.53-30.66"
transform="translate(-185 -76.87)"
fill="none"
stroke="#bdbdbd"
strokeMiterlimit={10}
strokeWidth={3}
opacity={0.5}
/>
<path
d="M608.39,586.26c-28.62-12.34-57.83-26.11-86.81-40.94-85.87-43.92-162.52-93.21-215.83-138.81-53.72-45.94-77.36-82.85-66.58-103.94,5.46-10.68,19.21-16.61,40.85-17.64l.12,2.47c-20.7,1-33.74,6.46-38.77,16.29s-1.76,23.93,9.88,41.56c11.43,17.32,30.31,37.3,56.11,59.36C360.52,450.11,437,499.29,522.7,543.12c28.94,14.8,58.09,28.55,86.67,40.87Z"
transform="translate(-185 -76.87)"
fill="url(#cbeba5be-4290-4dae-bc1b-44a303762a01)"
/>
<path
d="M613,585.12c-28.09-12.11-57.19-25.79-86.74-40.9C348.89,453.51,222.7,345.57,244.4,303.15c5.36-10.48,19.25-16,39.81-17"
transform="translate(-185 -76.87)"
fill="none"
stroke="#bdbdbd"
strokeMiterlimit={10}
strokeWidth={3}
/>
<path
d="M840.73,657.06c-26,0-62.67-8.5-112.17-25.56l.81-2.34c94.46,32.54,141.19,33.86,156.25,4.41,5.79-11.32.39-28.49-15.61-49.65l2-1.49c16.86,22.28,22.19,39.87,15.84,52.27C880.2,649.59,865.12,657.05,840.73,657.06Z"
transform="translate(-185 -76.87)"
fill="url(#d7c56f50-4219-4953-bdbb-ce8107747d0c)"
/>
<path
d="M871,580.69c16,21.1,22,38.75,15.73,51-14.39,28.13-56.6,31-157.76-3.8"
transform="translate(-185 -76.87)"
fill="none"
stroke="#bdbdbd"
strokeMiterlimit={10}
strokeWidth={3}
/>
<g opacity={0.5}>
<rect x={94.38} y={661.7} width={3.22} height={18.23} fill="#47e6b1" />
<rect
x={279.38}
y={738.56}
width={3.22}
height={18.23}
transform="translate(843.66 389.83) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={748.57} y={3.22} width={3.22} height={18.23} fill="#47e6b1" />
<rect
x={933.57}
y={80.08}
width={3.22}
height={18.23}
transform="translate(839.37 -922.84) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={818.28} y={500.83} width={3.22} height={18.23} fill="#47e6b1" />
<rect
x={1003.28}
y={577.7}
width={3.22}
height={18.23}
transform="translate(1406.7 -494.94) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={105.1} y={47.19} width={3.22} height={18.23} fill="#47e6b1" />
<rect
x={290.1}
y={124.05}
width={3.22}
height={18.23}
transform="translate(239.88 -235.4) rotate(90)"
fill="#47e6b1"
/>
</g>
<path
d="M385.22,801.09a3.94,3.94,0,0,1-2.2-4.76,1.89,1.89,0,0,0,.09-.44h0a2,2,0,0,0-3.55-1.31h0a1.89,1.89,0,0,0-.22.39,3.94,3.94,0,0,1-4.76,2.2,1.89,1.89,0,0,0-.44-.09h0a2,2,0,0,0-1.31,3.55h0a1.89,1.89,0,0,0,.39.22,3.94,3.94,0,0,1,2.2,4.76,1.89,1.89,0,0,0-.09.44h0a2,2,0,0,0,3.55,1.31h0a1.89,1.89,0,0,0,.22-.39,3.94,3.94,0,0,1,4.76-2.2,1.89,1.89,0,0,0,.44.09h0a2,2,0,0,0,1.31-3.55h0A1.89,1.89,0,0,0,385.22,801.09Z"
transform="translate(-185 -76.87)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M581.47,814a3.94,3.94,0,0,1-2.2-4.76,1.89,1.89,0,0,0,.09-.44h0a2,2,0,0,0-3.55-1.31h0a1.89,1.89,0,0,0-.22.39,3.94,3.94,0,0,1-4.76,2.2,1.89,1.89,0,0,0-.44-.09h0a2,2,0,0,0-1.31,3.55h0a1.89,1.89,0,0,0,.39.22,3.94,3.94,0,0,1,2.2,4.76,1.89,1.89,0,0,0-.09.44h0a2,2,0,0,0,3.55,1.31h0a1.89,1.89,0,0,0,.22-.39,3.94,3.94,0,0,1,4.76-2.2,1.89,1.89,0,0,0,.44.09h0a2,2,0,0,0,1.31-3.55h0A1.89,1.89,0,0,0,581.47,814Z"
transform="translate(-185 -76.87)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M969.7,296a3.94,3.94,0,0,1-2.2-4.76,1.89,1.89,0,0,0,.09-.44h0a2,2,0,0,0-3.55-1.31h0a1.89,1.89,0,0,0-.22.39,3.94,3.94,0,0,1-4.76,2.2,1.89,1.89,0,0,0-.44-.09h0a2,2,0,0,0-1.31,3.55h0a1.89,1.89,0,0,0,.39.22,3.94,3.94,0,0,1,2.2,4.76,1.89,1.89,0,0,0-.09.44h0a2,2,0,0,0,3.55,1.31h0a1.89,1.89,0,0,0,.22-.39,3.94,3.94,0,0,1,4.76-2.2,1.89,1.89,0,0,0,.44.09h0a2,2,0,0,0,1.31-3.55h0A1.89,1.89,0,0,0,969.7,296Z"
transform="translate(-185 -76.87)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M205.26,579.8a3.94,3.94,0,0,1-2.2-4.76,1.89,1.89,0,0,0,.09-.44h0a2,2,0,0,0-3.55-1.31h0a1.89,1.89,0,0,0-.22.39,3.94,3.94,0,0,1-4.76,2.2,1.89,1.89,0,0,0-.44-.09h0a2,2,0,0,0-1.31,3.55h0a1.89,1.89,0,0,0,.39.22,3.94,3.94,0,0,1,2.2,4.76,1.89,1.89,0,0,0-.09.44h0a2,2,0,0,0,3.55,1.31h0a1.89,1.89,0,0,0,.22-.39,3.94,3.94,0,0,1,4.76-2.2,1.89,1.89,0,0,0,.44.09h0a2,2,0,0,0,1.31-3.55h0A1.89,1.89,0,0,0,205.26,579.8Z"
transform="translate(-185 -76.87)"
fill="#4d8af0"
opacity={0.5}
/>
<circle cx={6.43} cy={238.08} r={6.43} fill="#f55f44" opacity={0.5} />
<circle cx={530.86} cy={22.52} r={6.43} fill="#4d8af0" opacity={0.5} />
<circle cx={176.95} cy={6.43} r={6.43} fill="#47e6b1" opacity={0.5} />
<circle cx={653.12} cy={691.73} r={6.43} fill="#f55f44" opacity={0.5} />
<path
d="M686.59,566.15a7.62,7.62,0,0,0-10.27,3.25l-.78,1.5-1.78-.93-15.91-8.26-3.46-1.8a3,3,0,0,0-1.57-.33c-15.23-5-27.45,4.63-35.33,19.8h0A49.7,49.7,0,0,0,612,596.06l-.18-.09c-.88,6.25-.06,12.11,3,17.07l.26-.51a24.56,24.56,0,0,0,5.82,6.56,2.32,2.32,0,0,0,1.19,1.52l21.78,11.31-1.66,3.19a7.62,7.62,0,0,0,3.25,10.27h0l5.17-10,26.86,13.95,1.76-3.38,1.76-3.38,2.63-5.07.09,0-6.1,11.74L690.48,656c15.64,8.12,27.59-2.31,36.27-18.47l0-.09.53-1,0,0h0l0-.09h0l0,0,.45-.89,0,0c8.3-16.45,10-32.21-5.72-40.36L709.2,588.5l-7.07,13.62-.09,0,3.61-6.95,1.66-3.19,1.85-3.57L682.3,574.41l4.29-8.26Zm-41,58.08.08.07-.09,0Z"
transform="translate(-185 -76.87)"
fill="url(#65800a0c-0f7d-440b-866d-d9a2d0291c31)"
/>
<rect
x={650.61}
y={597.43}
width={57.32}
height={28.66}
transform="translate(-361.71 855.76) rotate(-62.55)"
fill="#4f617d"
/>
<path
d="M724,634.88l0-.09c-8.21,15.8-19.62,26.25-34.67,18.44l-12.11-6.29L707,589.71,719.1,596C734.15,603.82,732.21,619.08,724,634.88Z"
transform="translate(-185 -76.87)"
fill="#ff656a"
/>
<path
d="M724,634.79l0,0,0,0Z"
transform="translate(-185 -76.87)"
fill="#4a5c81"
/>
<path
d="M714.65,648.3A55.65,55.65,0,0,0,724,634.84a59.11,59.11,0,0,0,5.17-13.29L724,618.86l-14,27Z"
transform="translate(-185 -76.87)"
fill="#4a5c81"
/>
<path
d="M675.15,617.71h37.62a0,0,0,0,1,0,0v1.05a4.32,4.32,0,0,1-4.32,4.32h-29a4.32,4.32,0,0,1-4.32-4.32v-1.05A0,0,0,0,1,675.15,617.71Z"
transform="translate(-361.46 873.45) rotate(-62.55)"
fill="#4a5c81"
/>
<path
d="M653.93,599.31h1.4a0,0,0,0,1,0,0v60.9a0,0,0,0,1,0,0h-7.16a0,0,0,0,1,0,0V605.08A5.76,5.76,0,0,1,653.93,599.31Z"
transform="translate(-392.52 841.05) rotate(-62.55)"
fill="#ff6469"
/>
<path
d="M674.68,548.27h1.4a5.76,5.76,0,0,1,5.76,5.76v55.14a0,0,0,0,1,0,0h-7.16a0,0,0,0,1,0,0v-60.9A0,0,0,0,1,674.68,548.27Z"
transform="translate(-332.93 837.05) rotate(-62.55)"
fill="#ff6469"
/>
<path
d="M673.65,572.28l-29.72,57.23-15-7.77c-16.53-8.59-16.44-24.81-8.24-40.61h0c8.21-15.8,21.43-25.2,38-16.62Z"
transform="translate(-185 -76.87)"
fill="#ff656a"
/>
<path
d="M618.18,612.8l6-11.5-8.79-4.56C614.53,602.62,615.31,608.13,618.18,612.8Z"
transform="translate(-185 -76.87)"
fill="#fff6d5"
/>
<path
d="M644.89,561.37l-6,11.5-8.79-4.56C634.47,564.24,639.42,561.7,644.89,561.37Z"
transform="translate(-185 -76.87)"
fill="#fff6d5"
/>
<path
d="M646.69,633.22h5a0,0,0,0,1,0,0v7.16a0,0,0,0,1,0,0H640.93a0,0,0,0,1,0,0V639A5.76,5.76,0,0,1,646.69,633.22Z"
transform="translate(-401.71 840) rotate(-62.55)"
fill="#ff6469"
/>
<path
d="M674.69,568.22h10.75a0,0,0,0,1,0,0v7.16a0,0,0,0,1,0,0h-5a5.76,5.76,0,0,1-5.76-5.76v-1.4A0,0,0,0,1,674.69,568.22Z"
transform="translate(1315.95 154.96) rotate(117.45)"
fill="#ff6469"
/>
<path
d="M677.44,580.31l-24.86,47.87L631,608.88a10.15,10.15,0,0,1-2.24-12.24L638,578.86a10.15,10.15,0,0,1,11.35-5.2Z"
transform="translate(-185 -76.87)"
fill="#53678b"
/>
<path
d="M653.67,626.5c-10.54-5.47-14.09-19.51-7.93-31.37s19.69-17,30.22-11.55"
transform="translate(-185 -76.87)"
fill="#658bc8"
/>
<polygon
points="494.16 504.45 469.39 552.14 464.62 549.66 467.98 547.08 488.33 507.91 489.39 501.97 494.16 504.45"
fill="#ff656a"
/>
<polygon
points="494.16 504.45 469.39 552.14 464.62 549.66 467.98 547.08 488.33 507.91 489.39 501.97 494.16 504.45"
opacity={0.05}
/>
<rect
x={664.63}
y={606.36}
width={7.16}
height={7.16}
transform="translate(-366.06 844.97) rotate(-62.55)"
fill="#53678b"
/>
<ellipse
cx={671.4}
cy={611.6}
rx={7.16}
ry={1.79}
transform="translate(-365.81 848.68) rotate(-62.55)"
fill="#53678b"
/>
<path
d="M688.86,644.9A12.27,12.27,0,0,0,706.33,641"
transform="translate(-185 -76.87)"
opacity={0.05}
/>
<path
d="M711.16,602A12.27,12.27,0,0,1,718,618.52"
transform="translate(-185 -76.87)"
opacity={0.05}
/>
<path
d="M633.89,602.21s-1.41-12.84,11.56-22.25"
transform="translate(-185 -76.87)"
opacity={0.05}
/>
<path
d="M639.89,605.33s-1.41-12.84,11.56-22.25"
transform="translate(-185 -76.87)"
opacity={0.05}
/>
<circle
cx={652.2}
cy={609.7}
r={5.37}
transform="translate(-374.48 830.62) rotate(-62.55)"
fill="#4a77be"
/>
<circle
cx={659.69}
cy={591.39}
r={3.58}
transform="translate(-354.19 827.4) rotate(-62.55)"
fill="#4a77be"
/>
<path
d="M679.67,595.44h1.05a2.16,2.16,0,0,1,2.16,2.16v11.75a2.21,2.21,0,0,1-2.21,2.21h-3.17a0,0,0,0,1,0,0v-14A2.16,2.16,0,0,1,679.67,595.44Z"
transform="matrix(-0.2, -0.98, 0.98, -0.2, 38.73, 1313.09)"
fill="#cdefff"
/>
<path
d="M680.15,597.59h5.37a0,0,0,0,1,0,0V604a4.32,4.32,0,0,1-4.32,4.32h-1.05a0,0,0,0,1,0,0V597.59A0,0,0,0,1,680.15,597.59Z"
transform="translate(42.41 1315.03) rotate(-101.45)"
opacity={0.05}
/>
<path
d="M672,623.88h9.39a0,0,0,0,1,0,0V635a0,0,0,0,1,0,0H672a4.45,4.45,0,0,1-4.45-4.45v-2.17A4.45,4.45,0,0,1,672,623.88Z"
transform="translate(-379.98 861) rotate(-62.55)"
fill="#cdefff"
/>
<path
d="M678.53,633.27l-1.79,3.83c-1.94,3.22-6.64,4.1-10.69,2l-4.7-2.44,2.55-4.92Z"
transform="translate(-185 -76.87)"
fill="#cdefff"
/>
<path
d="M657.16,626.1h1.08a2.23,2.23,0,0,1,2.23,2.23v8.85a0,0,0,0,1,0,0h-5.54a0,0,0,0,1,0,0v-8.85A2.23,2.23,0,0,1,657.16,626.1Z"
transform="translate(-390.98 847.33) rotate(-62.55)"
fill="#cdefff"
/>
<path
d="M676.92,626a8.27,8.27,0,0,0,5.3.8l.26-.51-9.6-5A8.28,8.28,0,0,0,676.92,626Z"
transform="translate(-185 -76.87)"
opacity={0.05}
/>
<path
d="M683.62,601.49H693a0,0,0,0,1,0,0v11.08a0,0,0,0,1,0,0h-9.39a4.45,4.45,0,0,1-4.45-4.45v-2.17a4.45,4.45,0,0,1,4.45-4.45Z"
transform="translate(1356.01 201.07) rotate(117.45)"
fill="#cdefff"
/>
<path
d="M684.72,611a8.27,8.27,0,0,1,3.71,3.88l-.26.51-9.6-5A8.28,8.28,0,0,1,684.72,611Z"
transform="translate(-185 -76.87)"
opacity={0.05}
/>
<circle
cx={680.82}
cy={618.16}
r={8.31}
transform="translate(-366.56 860.59) rotate(-62.55)"
fill="#cdefff"
/>
<circle
cx={680.41}
cy={618.29}
r={8.31}
transform="translate(-366.9 860.29) rotate(-62.55)"
fill="#cdefff"
/>
<path
d="M673,614.46a8.3,8.3,0,0,0,.37,8.3A8.31,8.31,0,0,0,680,610,8.3,8.3,0,0,0,673,614.46Z"
transform="translate(-185 -76.87)"
fill="#658bc8"
/>
</svg>
);
UndrawStarman.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawStarman.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawStarman;