react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
485 lines (480 loc) • 17.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawAstronaut = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="bbeb3519-5b2d-4eea-9f05-f63d19a98f79"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 699.11 746.96"
>
<defs>
<linearGradient
id="40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
x1={194.05}
y1={571.56}
x2={194.05}
y2={303.76}
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="334d7689-feb6-4828-a16a-aae33509cdc0"
x1={444.49}
y1={795.67}
x2={444.49}
y2={411.6}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
<linearGradient
id="42c41f71-1324-44aa-b638-87ac9c77365c"
x1={445.28}
y1={427.26}
x2={445.28}
y2={294.14}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
<linearGradient
id="fc68035b-552c-46db-869c-adf77d303541"
x1={402.69}
y1={811.38}
x2={402.69}
y2={762.4}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
<linearGradient
id="882c4105-b1fe-4335-bfda-81eaa2d36885"
x1={487.26}
y1={811.38}
x2={487.26}
y2={762.4}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
<linearGradient
id="24512528-de39-498b-9787-2bb12c67a493"
x1={597}
y1={823.48}
x2={597}
y2={248.26}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
<linearGradient
id="2b66ee55-f43d-4225-94d8-2c9e028a5d69"
x1={776.57}
y1={435.03}
x2={776.57}
y2={230}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
<linearGradient
id="67a6486c-3860-4d22-ba30-eb050e5a8761"
x1={195.62}
y1={504.22}
x2={195.62}
y2={394.59}
xlinkHref="#40e3bca5-42ed-44aa-b7b7-a3abe2be8083"
/>
</defs>
<title>Astronaut</title>
<g id="cce41613-5798-418e-bd1c-d8ab89d50e24" data-name="<Rectangle>">
<rect
x={114.96}
y={303.76}
width={158.17}
height={267.8}
rx={13}
ry={13}
fill="url(#40e3bca5-42ed-44aa-b7b7-a3abe2be8083)"
/>
</g>
<rect
id="3cc1ef72-f286-4cd9-bc37-3a4bc0282736"
data-name="<Rectangle>"
x={119.49}
y={309.4}
width={150.17}
height={255.21}
rx={13}
ry={13}
fill={props.primaryColor}
/>
<polyline
id="3aab063b-c154-4fae-90f4-bd3dbd8a15cc"
data-name="<Path>"
points="119.49 655.02 185.81 655.02 169.51 721.63"
fill="none"
/>
<g id="1a4f509f-11ed-42f2-baf8-98baf11ce138" data-name="<Group>">
<polygon
points="240.04 370.72 154.27 372.49 130.52 345.2 258.39 342.9 240.04 370.72"
fill="#e0e0e0"
/>
</g>
<g id="29eb97ed-3d6d-42b6-a356-b039b63b46ac" data-name="<Group>">
<polygon
points="258.39 345.02 130.52 345.02 156.04 331.38 231.18 328.89 258.39 345.02"
fill="#e0e0e0"
/>
</g>
<path
d="M603.24,457.81c-12.09-5.36-28.3,2-31.74,14.38-9.09-25.89-31.1-47-57.54-56.55-4.37-1.58-16.5-6.39-19.86-2.64-1.57,1.74-4.57,8.61-4.38,14.34H399.79c0-1.12,0-2.24,0-3.36-.05-13.07-10.51-13.52-23.22-10.47a70.34,70.34,0,0,0-29.63,15.91c-13.51,11.92-22.9,27.45-32.07,42.73l-16-15.89c-1.77-1.75-3.86-3.64-6.39-3.52-2.68.13-4.61,2.44-6.18,4.54-7.06,9.52-14.34,19.53-16,31.12-1.67,11.41,2.31,22.8,6.22,33.69,3.83,10.63,8.91,25.68,19.9,29.47,11.82,4.08,24.3,4.56,34.55-2.44,16-11,32.49-22.38,44.17-37.42V626h1.35l-11,169.7,73.54-.38L444.27,626h2.15L450,795.29l74.82.38L513.59,626h2.32V510.57l2,1.66,36.28,30.35c7.55,6.32,16.19,13,26.17,12.51,7.17-.36,13.67-12.38,18.25-17.71s7.55-11.75,10.46-18.08c4.82-10.5,9.73-21.33,10.06-32.81S614.06,462.6,603.24,457.81Z"
transform="translate(-250.44 -76.52)"
fill="url(#334d7689-feb6-4828-a16a-aae33509cdc0)"
/>
<path
d="M596.36,460.45c-11.57-5.31-27.07,2-30.36,14.27-8.7-25.69-29.75-46.61-55-56.1-4.18-1.57-14.29-6.34-17.5-2.62-1.5,1.73-1.38,8.55-1.2,14.23h-95c0-1.11,0-2.23,0-3.33-.05-13-5.56-13.41-17.72-10.38-10.59,2.64-20.33,8.46-28.34,15.79-12.92,11.82-21.9,27.23-30.68,42.39l-15.32-15.77c-1.69-1.74-3.7-3.61-6.12-3.49s-4.41,2.42-5.91,4.51c-6.76,9.44-13.72,19.38-15.33,30.88-1.59,11.32,2.21,22.63,6,33.43,3.66,10.55,8.52,22.37,19,26.13,11.31,4.05,23.25-3.24,33.05-10.19,15.35-10.88,31.08-22.2,42.25-37.13V627.3h1.29l-10.5,168.37h67.35l8-168.37h2.06l6.21,168.37h68.76L510.6,627.3h2.22V505l1.89,1.65,34.71,30.11c7.22,6.27,15.49,12.91,25,12.41,6.86-.36,13.08-4.52,17.46-9.81s7.22-11.66,10-17.94c4.61-10.41,9.3-21.16,9.62-32.55S606.71,465.21,596.36,460.45Z"
transform="translate(-250.44 -76.52)"
fill="#fff"
/>
<path
id="0c32cf8a-9850-40d7-b2dc-353b7a6759c6"
data-name="<Path>"
d="M303.78,411.31c-4.5-1.49-9.63.92-12.41,4.75s-3.61,8.77-3.63,13.51c0,2.8.16,5.85-1.51,8.09a8.28,8.28,0,0,1-6.27,2.9,46.37,46.37,0,0,1-7.1-.57c-4.27-.42-9,.12-12.07,3.09s-3.37,8.93.32,11.11c-4.32,3.7-4.2,11.37.22,14.94a7.66,7.66,0,0,0,4.34,13.07c-3.78,1.36-5.17,6.92-2.48,9.9,1.6,1.77,4,2.45,6.36,3q7.54,1.89,15.15,3.54c4.5,1,9.26,1.87,13.62.43,11.53-3.81,7.07-18.35,6.34-27Q303,452.6,303.12,433C303.13,431,304.42,411.53,303.78,411.31Z"
transform="translate(-250.44 -76.52)"
fill={props.primaryColor}
/>
<path
d="M520.45,344H507c-7.93-29.27-32.62-49.81-61.87-49.81S391.17,314.68,383.24,344H370.11v30.36h11.24c4.84,31.84,31.54,52.94,63.77,52.94s58.93-21.1,63.77-52.94h11.58Z"
transform="translate(-250.44 -76.52)"
fill="url(#42c41f71-1324-44aa-b638-87ac9c77365c)"
/>
<path
d="M516.68,345.87h-12.8c-7.54-26.65-31-48.21-58.77-48.21s-51.23,21.55-58.77,48.21H373.87v27.65h10.67c4.6,29,30,48.21,60.57,48.21s56-19.22,60.57-48.21h11Z"
transform="translate(-250.44 -76.52)"
fill="#fff"
/>
<circle
id="7a3910d7-67a0-4ff3-88ee-27dedf2e16a4"
data-name="<Path>"
cx={194.32}
cy={287.78}
r={49.62}
fill={props.primaryColor}
/>
<g id="34c43434-1451-4ab0-8354-03d0c452d8e6" data-name="<Group>">
<path
d="M440.58,797.45c0,16.57-17,13.74-37.89,13.74S364.8,814,364.8,797.45s17-35.05,37.89-35.05S440.58,780.88,440.58,797.45Z"
transform="translate(-250.44 -76.52)"
fill="url(#fc68035b-552c-46db-869c-adf77d303541)"
/>
</g>
<g id="ad2d4070-7865-476e-a143-7337cc82fa1a" data-name="<Group>">
<path
d="M525.15,797.45c0,16.57-17,13.74-37.89,13.74s-37.89,2.83-37.89-13.74,17-35.05,37.89-35.05S525.15,780.88,525.15,797.45Z"
transform="translate(-250.44 -76.52)"
fill="url(#882c4105-b1fe-4335-bfda-81eaa2d36885)"
/>
</g>
<g id="7c5e0dbc-1e9f-4751-9c9a-ae23d0c67b0d" data-name="<Group>">
<path
d="M437.78,796.56c0,15.17-15.71,12.58-35.09,12.58s-35.09,2.59-35.09-12.58,15.71-32.08,35.09-32.08S437.78,781.39,437.78,796.56Z"
transform="translate(-250.44 -76.52)"
fill="#e0e0e0"
/>
</g>
<g id="296e55fe-bb0b-4dd7-ab7e-7a6e065d6a5f" data-name="<Group>">
<path
d="M522.84,798.69c0,15.17-15.71,12.58-35.09,12.58s-35.09,2.59-35.09-12.58,15.71-32.08,35.09-32.08S522.84,783.52,522.84,798.69Z"
transform="translate(-250.44 -76.52)"
fill="#e0e0e0"
/>
</g>
<path
d="M609.72,261a12.72,12.72,0,1,0-21.93,8.75V818.93a4.56,4.56,0,0,0,4.55,4.55h8.13a4.56,4.56,0,0,0,4.55-4.55V270.84A12.69,12.69,0,0,0,609.72,261Z"
transform="translate(-250.44 -76.52)"
fill="url(#24512528-de39-498b-9787-2bb12c67a493)"
/>
<path
d="M608.17,261a11.17,11.17,0,1,0-17,9.5V816.29a4.56,4.56,0,0,0,4.55,4.55H599a4.56,4.56,0,0,0,4.55-4.55V270A11.14,11.14,0,0,0,608.17,261Z"
transform="translate(-250.44 -76.52)"
fill="#e0e0e0"
/>
<path
id="75078eba-178e-4938-aaf4-b7f041ea2d55"
data-name="<Path>"
d="M589.95,468.05c-2,3.09-6,5.66-9.33,4-2.68-1.33-3.54-4.69-3.88-7.67a61.37,61.37,0,0,1,1-19.94c.86-4,2.69-8.47,6.62-9.52,2.45-.65,5.07.28,7.22,1.63s4,3.11,6.23,4.37c4.24,2.44,9.4,2.88,14.24,2.17,2.4-.35,4.76-1,7.17-1.17a11.93,11.93,0,0,1,7,1.24,6.37,6.37,0,0,1,3.33,6c-.31,2.4-2.84,4.44-5.17,3.77a14.75,14.75,0,0,1,5.17,4.7,6.72,6.72,0,0,1,.38,6.72c-1.19,2-4.15,3-6.06,1.61,1.95,1.6,4,3.3,4.88,5.65s.17,5.53-2.18,6.45a21.33,21.33,0,0,1-3,.56c-1,.23-2.05.92-2.13,1.95-.09,1.19,1.1,2,1.8,3,1.56,2.12.7,5.31-1.19,7.14s-4.52,2.65-7,3.41c-3.76,1.13-7.52,2.26-11.3,3.32-4.13,1.16-8.48,2.24-12.67,1.34a13.86,13.86,0,0,1-5.16-24.83c2.06-1.48,2.45-4,4.11-5.89a12.71,12.71,0,0,0,3-8.77c0-4.72,1.8-9.28.7-13.87-.26,0-.45,0-.71.1C592.81,453.4,594.67,460.9,589.95,468.05Z"
transform="translate(-250.44 -76.52)"
fill={props.primaryColor}
/>
<g id="59ef6675-eba5-4924-a41d-ef258633805a" data-name="<Rectangle>">
<path
d="M949.56,397.51c-115.32-130-230.64,130-346,0v-130c115.32,130,230.64-130,346,0Q949.56,332.51,949.56,397.51Z"
transform="translate(-250.44 -76.52)"
fill="url(#2b66ee55-f43d-4225-94d8-2c9e028a5d69)"
/>
</g>
<g id="aee1670e-e8ab-4e69-9ed6-c33b4299fb78" data-name="<Rectangle>">
<path
d="M945.84,392.65c-114.08-118.39-228.17,118.39-342.25,0V274.27c114.08,118.39,228.17-118.39,342.25,0Z"
transform="translate(-250.44 -76.52)"
fill={props.primaryColor}
/>
</g>
<g id="d941d43a-1bd7-497d-a2ef-a3e2e2659e0c" data-name="<Rectangle>">
<rect
x={144.72}
y={394.59}
width={101.8}
height={109.63}
rx={6.38}
ry={6.38}
fill="url(#67a6486c-3860-4d22-ba30-eb050e5a8761)"
/>
</g>
<rect
id="304248a4-1768-4f23-b9cb-e161915f6967"
data-name="<Rectangle>"
x={146.81}
y={397.98}
width={97.13}
height={102.82}
rx={6.38}
ry={6.38}
fill={props.primaryColor}
/>
<rect
id="076458b3-f8b8-42f1-ba43-cb3b5508f8a9"
data-name="<Rectangle>"
x={159.41}
y={417.54}
width={17.8}
height={47.46}
opacity={0.2}
/>
<rect
id="45128737-2df6-4b8c-aef6-04e2ae683cff"
data-name="<Rectangle>"
x={198.05}
y={434.86}
width={23.41}
height={16.02}
opacity={0.2}
/>
<rect
id="211ca6c0-c299-4849-b228-cb0ba183ce3b"
data-name="<Rectangle>"
x={215.05}
y={409.54}
width={12.94}
height={11.51}
opacity={0.2}
/>
<circle
id="4ad46ce1-f00a-4f7a-9fe8-8c270b89c73d"
data-name="<Path>"
cx={222.41}
cy={472.89}
r={14.09}
opacity={0.2}
/>
<path
id="ff63785f-5c7f-4def-be10-0bb3de2ca90f"
data-name="<Path>"
d="M451,325.64a49.54,49.54,0,0,1,39.62,19.74,49.62,49.62,0,1,0-85.5,48.8A49.63,49.63,0,0,1,451,325.64Z"
transform="translate(-250.44 -76.52)"
opacity={0.2}
/>
<path
id="ee614fe0-a70d-49e2-ad0f-cfa0665daf52"
data-name="<Path>"
d="M542.06,119.52h-1.94c-.4,0-1.37-1.55-1.37-2v-1.8c0-1.41-1.59-5.27-3-5.27s-3,3.86-3,5.27v1.8c0,.63-.49,2-1.09,2h-1.94c-1.41,0-5.27,1.09-5.27,2.5s3.86,2.5,5.27,2.5H532c.73,0,.72.75.72,1.14v2.41c0,1.41,1.59,5.27,3,5.27s3-3.86,3-5.27v-2.41c0-.32.64-1.14,1-1.14h2.32c1.41,0,5.27-1.09,5.27-2.5S543.47,119.52,542.06,119.52Z"
transform="translate(-250.44 -76.52)"
fill="#2196f3"
/>
<path
id="acc1d592-062e-4dcd-a91f-f2c750c33fa0"
data-name="<Path>"
d="M268.06,223.52h-1.94c-.4,0-1.37-1.55-1.37-2v-1.8c0-1.41-1.59-5.27-3-5.27s-3,3.86-3,5.27v1.8c0,.63-.49,2-1.09,2h-1.94c-1.41,0-5.27,1.09-5.27,2.5s3.86,2.5,5.27,2.5H258c.73,0,.72.75.72,1.14v2.41c0,1.41,1.59,5.27,3,5.27s3-3.86,3-5.27v-2.41c0-.32.64-1.14,1-1.14h2.32c1.41,0,5.27-1.09,5.27-2.5S269.47,223.52,268.06,223.52Z"
transform="translate(-250.44 -76.52)"
fill="#2196f3"
/>
<path
id="e9c2f9d0-6216-43dd-aafe-1aef442d8198"
data-name="<Path>"
d="M711,149.52h-1.24c-.25,0-1-1-1-1.26v-1.15c0-.9-1.1-3.36-2-3.36s-2,2.46-2,3.36v1.15c0,.4,0,1.26-.4,1.26H703.1c-.9,0-3.36.6-3.36,1.5s2.46,1.5,3.36,1.5h1.48c.47,0,.17.68.17.92V155c0,.9,1.1,3.36,2,3.36s2-2.46,2-3.36v-1.53c0-.2.52-.92.75-.92H711c.9,0,3.36-.6,3.36-1.5S711.87,149.52,711,149.52Z"
transform="translate(-250.44 -76.52)"
fill="#1976d2"
/>
<path
id="13867d9c-cfe7-4b60-a8c5-3f71e99c3e02"
data-name="<Path>"
d="M361,206.52h-1.24c-.25,0-1-1-1-1.26v-1.15c0-.9-1.1-3.36-2-3.36s-2,2.46-2,3.36v1.15c0,.4,0,1.26-.4,1.26H353.1c-.9,0-3.36.6-3.36,1.5s2.46,1.5,3.36,1.5h1.48c.47,0,.17.68.17.92V212c0,.9,1.1,3.36,2,3.36s2-2.46,2-3.36v-1.53c0-.2.52-.92.75-.92H361c.9,0,3.36-.6,3.36-1.5S361.87,206.52,361,206.52Z"
transform="translate(-250.44 -76.52)"
fill="#1976d2"
/>
<circle
id="cb349740-a417-4f38-a613-4379a7fe1f38"
data-name="<Path>"
cx={394.8}
cy={49.5}
r={7.5}
fill="#64b5f6"
/>
<circle
id="be23bb10-1d2e-418b-af6d-2d6967ae971b"
data-name="<Path>"
cx={100.8}
cy={216.83}
r={3.5}
fill="#0d47a1"
/>
<circle
id="9efc09db-f667-434b-9915-b8177f90eb0b"
data-name="<Path>"
cx={379.8}
cy={120.83}
r={2.5}
fill="#0071bc"
/>
<circle
id="e31fdc7b-a5f8-44bf-aafe-55a25c9ddf7f"
data-name="<Path>"
cx={97.26}
cy={63.96}
r={6.96}
fill="#64b5f6"
/>
<circle
id="1b095ea7-cb8e-44fa-8db9-d77434a32042"
data-name="<Path>"
cx={480.26}
cy={148.96}
r={6.96}
fill="#64b5f6"
/>
<circle
id="0045b9d1-e494-49ec-9bae-4feb39b517d1"
data-name="<Path>"
cx={35.78}
cy={90.29}
r={3.48}
fill="#64b5f6"
/>
<circle
id="de43a1f8-3987-4c14-8b8b-500a4e27f972"
data-name="<Path>"
cx={322.78}
cy={161.29}
r={3.48}
fill="#82a9ff"
/>
<circle
id="b38b0c10-cbab-47c9-839f-7ab983c113e8"
data-name="<Path>"
cx={64.09}
cy={223.42}
r={6.5}
fill="#82a9ff"
/>
<circle
id="e67cfae9-b598-4bd2-a0f9-80d7ff6e0a16"
data-name="<Path>"
cx={193.01}
cy={48.71}
r={3.71}
fill="#0d47a1"
/>
<circle
id="991e40b0-3269-43b4-8db7-0a4a8d214268"
data-name="<Path>"
cx={285.8}
cy={103.5}
r={7.5}
fill="#64b5f6"
/>
<circle
id="1d77e6b8-da9e-4299-ade6-ad650e1207bd"
data-name="<Path>"
cx={214.8}
cy={199.83}
r={2.5}
fill="#0071bc"
/>
<circle
id="1e33811a-9f5a-4f3e-be99-0f7e1dde7905"
data-name="<Path>"
cx={194.01}
cy={124.71}
r={3.71}
fill="#0d47a1"
/>
<path
id="c488d0a9-6894-4c9c-aef4-d1faab1984cf"
data-name="<Path>"
d="M819.06,166.52h-1.94c-.4,0-1.37-1.55-1.37-2v-1.8c0-1.41-1.59-5.27-3-5.27s-3,3.86-3,5.27v1.8c0,.63-.49,2-1.09,2h-1.94c-1.41,0-5.27,1.09-5.27,2.5s3.86,2.5,5.27,2.5H809c.73,0,.72.75.72,1.14v2.41c0,1.41,1.59,5.27,3,5.27s3-3.86,3-5.27v-2.41c0-.32.64-1.14,1-1.14h2.32c1.41,0,5.27-1.09,5.27-2.5S820.47,166.52,819.06,166.52Z"
transform="translate(-250.44 -76.52)"
fill="#2196f3"
/>
<path
id="406551cf-aa86-4f47-a144-357aa82de0d2"
data-name="<Path>"
d="M912,149.52h-1.24c-.25,0-1-1-1-1.26v-1.15c0-.9-1.1-3.36-2-3.36s-2,2.46-2,3.36v1.15c0,.4,0,1.26-.4,1.26H904.1c-.9,0-3.36.6-3.36,1.5s2.46,1.5,3.36,1.5h1.48c.47,0,.17.68.17.92V155c0,.9,1.1,3.36,2,3.36s2-2.46,2-3.36v-1.53c0-.2.52-.92.75-.92H912c.9,0,3.36-.6,3.36-1.5S912.87,149.52,912,149.52Z"
transform="translate(-250.44 -76.52)"
fill="#1976d2"
/>
<circle
id="7be5003c-4472-46d4-8fd5-cb0f750e9b8b"
data-name="<Path>"
cx={651.8}
cy={139.83}
r={3.5}
fill="#0d47a1"
/>
<circle
id="7efbb3a7-f30e-4781-a185-7b9acf369ac6"
data-name="<Path>"
cx={512.8}
cy={32.83}
r={3.5}
fill="#0d47a1"
/>
<circle
id="e77aff23-9dcb-4e42-8690-c4669d7d47b5"
data-name="<Path>"
cx={648.26}
cy={6.96}
r={6.96}
fill="#64b5f6"
/>
<circle
id="9b535ee8-dcf2-4b65-b03e-5a5766db33df"
data-name="<Path>"
cx={586.78}
cy={33.29}
r={3.48}
fill="#82a9ff"
/>
<circle
id="f898004f-292d-4a15-988f-9ba9c1bfd06e"
data-name="<Path>"
cx={615.09}
cy={132.42}
r={6.5}
fill="#64b5f6"
/>
</svg>
);
UndrawAstronaut.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawAstronaut.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawAstronaut;