react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
459 lines (454 loc) • 15.1 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawCreationProcess = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="d26dba8d-8282-42fd-a478-7c8636ce52fe"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 888 656.53"
>
<defs>
<linearGradient
id="69fb1e3d-9807-4515-a987-9bc9d1efda7d"
x1={444}
y1={377.21}
x2={444}
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="51a21b81-a3ea-4771-abd9-862442be9990"
x1={565.58}
y1={184.63}
x2={565.58}
y2={139.97}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="5757846e-edea-4ac8-a331-71c114df4e91"
x1={296.27}
y1={331.11}
x2={296.27}
y2={286.45}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="999de772-9bc8-49ea-9b8d-0cef0fcee5cb"
x1={698.58}
y1={174.13}
x2={698.58}
y2={129.47}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="a15079b2-2390-41da-998b-02c60407236c"
x1={565.74}
y1={302.42}
x2={565.74}
y2={257.75}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="40793396-cd23-4bb9-961e-d266edc74bee"
x1={272.78}
y1={77.69}
x2={272.78}
y2={33.02}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="117013d0-8713-4a5b-b130-ca95cbe25423"
x1={721.33}
y1={67.68}
x2={721.33}
y2={23.02}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="3e4a4d12-687c-4d27-834e-2c1b28061589"
x1={830.51}
y1={228.72}
x2={830.51}
y2={184.06}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="76d58c82-a546-4f11-847d-56d56970a98d"
x1={107.19}
y1={61.31}
x2={107.19}
y2={16.65}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="c2562d94-2838-42c9-872e-afd7f3e426db"
x1={627.61}
y1={100.82}
x2={627.61}
y2={56.16}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="10abac28-a64c-49d3-bb88-742a39576c81"
x1={348.29}
y1={195.45}
x2={348.29}
y2={150.78}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="ae4c24d6-cdd7-478e-ab3c-92442ce1f2ec"
x1={503.87}
y1={244.58}
x2={503.87}
y2={199.91}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="7387d7ac-3521-46f5-8cc1-b4e33dceeca4"
x1={557.8}
y1={77.88}
x2={557.8}
y2={33.22}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="e854bf59-7922-4e82-b85b-f6b80398a298"
x1={638.78}
y1={273.5}
x2={638.78}
y2={228.83}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="74fe4cd6-b7da-43c2-b923-f31608459be5"
x1={360.37}
y1={77.88}
x2={360.37}
y2={33.22}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="489da8b3-4e02-4697-a170-557a07ec3791"
x1={421.32}
y1={321.72}
x2={421.32}
y2={277.06}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="92098637-0718-4243-93f2-2f7a5b132b51"
x1={428.7}
y1={336.02}
x2={428.7}
y2={260.98}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="553314f8-3ab3-4992-94a1-12ce51c0a7a1"
x1={329.22}
y1={778.26}
x2={329.22}
y2={215.99}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="67bfa709-3078-4c07-86cc-d67a49cf8eac"
x1={494.8}
y1={139.13}
x2={494.8}
y2={94.47}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="9919d947-e03e-44c1-969c-c87bb32bc801"
x1={261.88}
y1={153.69}
x2={261.88}
y2={109.02}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="2afe07f1-4e54-4f47-9563-9d420d361cd0"
x1={830.53}
y1={110.92}
x2={830.53}
y2={66.26}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
<linearGradient
id="914dbfde-8d09-4649-9ab7-bb9d31a88f1b"
x1={744.09}
y1={322.01}
x2={744.09}
y2={277.34}
xlinkHref="#69fb1e3d-9807-4515-a987-9bc9d1efda7d"
/>
</defs>
<title>creation process</title>
<rect
width={888}
height={377.21}
fill="url(#69fb1e3d-9807-4515-a987-9bc9d1efda7d)"
/>
<rect x={9.93} y={2.66} width={869.39} height={370.04} fill="#eee" />
<rect
x={542.51}
y={139.97}
width={46.13}
height={44.66}
fill="url(#51a21b81-a3ea-4771-abd9-862442be9990)"
/>
<rect x={543.31} y={140.74} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={273.2}
y={286.45}
width={46.13}
height={44.66}
fill="url(#5757846e-edea-4ac8-a331-71c114df4e91)"
/>
<rect x={274} y={287.22} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={675.52}
y={129.47}
width={46.13}
height={44.66}
fill="url(#999de772-9bc8-49ea-9b8d-0cef0fcee5cb)"
/>
<rect x={676.31} y={130.24} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={542.68}
y={257.75}
width={46.13}
height={44.66}
fill="url(#a15079b2-2390-41da-998b-02c60407236c)"
/>
<rect x={543.47} y={258.52} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={249.71}
y={33.02}
width={46.13}
height={44.66}
fill="url(#40793396-cd23-4bb9-961e-d266edc74bee)"
/>
<rect x={250.51} y={33.79} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={698.26}
y={23.02}
width={46.13}
height={44.66}
fill="url(#117013d0-8713-4a5b-b130-ca95cbe25423)"
/>
<rect x={699.06} y={23.78} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={807.44}
y={184.06}
width={46.13}
height={44.66}
fill="url(#3e4a4d12-687c-4d27-834e-2c1b28061589)"
/>
<rect x={808.24} y={184.83} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={84.12}
y={16.65}
width={46.13}
height={44.66}
fill="url(#76d58c82-a546-4f11-847d-56d56970a98d)"
/>
<rect x={84.92} y={17.42} width={44.54} height={43.12} fill="#f5f5f5" />
<rect
x={604.54}
y={56.16}
width={46.13}
height={44.66}
fill="url(#c2562d94-2838-42c9-872e-afd7f3e426db)"
/>
<rect x={605.34} y={56.93} width={44.54} height={43.12} fill="#7cfcff" />
<rect
x={325.22}
y={150.78}
width={46.13}
height={44.66}
fill="url(#10abac28-a64c-49d3-bb88-742a39576c81)"
/>
<rect x={326.02} y={151.55} width={44.54} height={43.12} fill="#7cfcff" />
<rect
x={480.8}
y={199.91}
width={46.13}
height={44.66}
fill="url(#ae4c24d6-cdd7-478e-ab3c-92442ce1f2ec)"
/>
<rect x={481.6} y={200.68} width={44.54} height={43.12} fill="#7cfcff" />
<rect
x={534.73}
y={33.22}
width={46.13}
height={44.66}
fill="url(#7387d7ac-3521-46f5-8cc1-b4e33dceeca4)"
/>
<rect x={535.53} y={33.99} width={44.54} height={43.12} fill="#ffffa5" />
<rect
x={615.71}
y={228.83}
width={46.13}
height={44.66}
fill="url(#e854bf59-7922-4e82-b85b-f6b80398a298)"
/>
<rect x={616.5} y={229.6} width={44.54} height={43.12} fill="#ffffa5" />
<rect
x={337.3}
y={33.22}
width={46.13}
height={44.66}
fill="url(#74fe4cd6-b7da-43c2-b923-f31608459be5)"
/>
<rect x={338.09} y={33.99} width={44.54} height={43.12} fill="#ffffa5" />
<rect
x={398.26}
y={277.06}
width={46.13}
height={44.66}
fill="url(#489da8b3-4e02-4697-a170-557a07ec3791)"
/>
<rect x={399.05} y={277.82} width={44.54} height={43.12} fill="#ffffa5" />
<path
d="M434.68,270.18v2.66l-7.71-.67v16.63l-20.24,28.66-1.28-.73-2.75,3.33,26.14,16v-6l-1.47-.83c1.83-6.6,9.32-32.92,13.6-36.41,0,0,7.71-5.32,11.91-12.64S455,247.57,434.68,270.18Z"
transform="translate(-156 -121.74)"
fill="url(#92098637-0718-4243-93f2-2f7a5b132b51)"
/>
<path
d="M393.76,332.91s-28-5.72-43.4-11.75a67.69,67.69,0,0,0-22.56-4.67L311,316l-8.38-4.86,2.62-6.54c.26-.11.52-.23.77-.36l.24-1.4a40.87,40.87,0,0,0,4-1.16c-.41,3.26,20.08-13.6,20.08-13.6l-.61.31-.08-1-.23.12a37.69,37.69,0,0,0,.68-43.72l.65-.58V227l-.69-.59v-.07c-13.86-12.48-32.92-11.48-46.7-8.33A24.76,24.76,0,0,0,264,239.28c-18.39,4.85-12.25,14.17-12.54,17.78-1.43,17.56,4.42,27.89,10.78,33.87a33.24,33.24,0,0,0,9.13,6.43l-4,7.78-1.18,0-3.28,9.32h-.16l-3.57,2.34C237,331.2,225.89,356.9,230.7,382.26h0s20,37.73,13.76,75.47c-2.08,12.68-1.21,20.44.87,25.16A45.09,45.09,0,0,1,241,497.62c-7.57,15.3-7.57,31.26,2.06,49.88l2.75,96.43s3.44,45.22,0,54.53,1.38,53.87,1.38,53.87h-.69v24.61l51.6,1.33s12-5.52,14.19-9.68l25.91,7.7s28.51-4.75,11.83-11.31c-12.45-4.9-15.54-11.88-16.31-15.12L374.5,636.61s-7.57-96.43-35.09-129.68l-2.79-19.61H337l5.85-114.49.48.06-.14,0a135.81,135.81,0,0,0,45.41-.68,72.66,72.66,0,0,0,13.15-3.56l.78-.3.09,0,.07,0a40.2,40.2,0,0,0,9-4.94l17.2-25.4L402.7,320.58Zm-108,389.49L298.81,634V588.73l23.39,47.22L297,738.27l-1.32-.36-5.81,20.15a13.2,13.2,0,0,1-4.17-5.73Z"
transform="translate(-156 -121.74)"
fill="url(#553314f8-3ab3-4992-94a1-12ce51c0a7a1)"
/>
<rect
x={471.73}
y={94.47}
width={46.13}
height={44.66}
fill="url(#67bfa709-3078-4c07-86cc-d67a49cf8eac)"
/>
<rect x={472.53} y={95.23} width={44.54} height={43.12} fill="#ff69b4" />
<rect x={244.27} y={112.66} width={46.13} height={44.66} opacity={0.1} />
<rect
x={238.82}
y={109.02}
width={46.13}
height={44.66}
fill="url(#9919d947-e03e-44c1-969c-c87bb32bc801)"
/>
<rect x={239.61} y={109.79} width={44.54} height={43.12} fill="#ff69b4" />
<rect
x={807.46}
y={66.26}
width={46.13}
height={44.66}
fill="url(#2afe07f1-4e54-4f47-9563-9d420d361cd0)"
/>
<rect x={808.26} y={67.03} width={44.54} height={43.12} fill="#ff69b4" />
<rect
x={721.03}
y={277.34}
width={46.13}
height={44.66}
fill="url(#914dbfde-8d09-4649-9ab7-bb9d31a88f1b)"
/>
<rect x={721.82} y={278.11} width={44.54} height={43.12} fill="#ff69b4" />
<line x1={72.16} y1={220.31} x2={78.23} y2={256.06} fill="#333" />
<path
d="M422.7,274.83v16.42l-19.56,28.66,19.56,12.73s8.7-33.5,13.38-37.45c0,0,7.36-5.26,11.37-12.48s2-32.19-17.39-9.85v1.72Z"
transform="translate(-156 -121.74)"
fill="#fda57d"
/>
<path
d="M266.95,314l7.74-15.49a2.87,2.87,0,0,1,2.42-1.58l29.42-1.5a2.87,2.87,0,0,1,2.82,3.9l-7.59,19.62a2.87,2.87,0,0,1-2.93,1.82l-29.57-2.63A2.87,2.87,0,0,1,266.95,314Z"
transform="translate(-156 -121.74)"
fill="#fda57d"
/>
<polygon
points="113.13 185.61 108.13 200.26 159.44 198.42 139.73 186.6 113.13 185.61"
fill="#edeef9"
/>
<polygon
points="243.53 200.39 246.16 197.11 268.49 210.25 268.49 216.16 243.53 200.39"
fill="#edeef9"
/>
<path
d="M248.61,467.46a48.81,48.81,0,0,1-3.47,30.07c-7.23,15.11-7.23,30.88,2,49.27l2.63,95.26s3.28,44.67,0,53.87,1.31,53.21,1.31,53.21h36.79V719.58l12.48-87.37V587.53l22.34,46.64L297,741.91l33.5,13.8,42-120.88s-7.23-95.26-33.5-128.1l-4.93-35.8Z"
transform="translate(-156 -121.74)"
fill={props.primaryColor}
/>
<path
d="M250.4,773.45V749.14h37.45S290.48,759,307.56,761s-7.88,13.8-7.88,13.8Z"
transform="translate(-156 -121.74)"
fill="#333"
/>
<path
d="M290.85,758.31l6.52-23.42,36.07,10s-.11,10.2,15.81,16.68S338,772.8,338,772.8Z"
transform="translate(-156 -121.74)"
fill="#333"
/>
<path
d="M334.16,472.9l-85.55-3.46a47.86,47.86,0,0,1,.65,15.51c3.91,9.21,12.31,6.69,12.31,6.69l74.85-2.3Z"
transform="translate(-156 -121.74)"
opacity={0.1}
/>
<path
d="M265.84,316.54l-3.41,2.31a64.19,64.19,0,0,0-27.14,64.72h0s19.05,37.28,13.14,74.55,13.14,31.54,13.14,31.54l75.22-2.31,5.58-113.1s45.33,6.45,65.69-9.32l16.42-25.09-25-17.2L391,334.82s-26.76-5.65-41.44-11.61A62.77,62.77,0,0,0,328,318.6Z"
transform="translate(-156 -121.74)"
fill="#333"
/>
<path
d="M266.5,498.52s-4.6,23,21.68,61.1"
transform="translate(-156 -121.74)"
opacity={0.1}
/>
<path
d="M342.7,374.35s31.53-10.51,45.33-10.51,11.5,6,11.5,6S377.52,379.61,342.7,374.35Z"
transform="translate(-156 -121.74)"
opacity={0.1}
/>
<path
d="M306.95,296.74l-12.55,1.5c-.4,0-.76.55-1,1.32,2.76,5,6.21,7.94,10,7.94a7.74,7.74,0,0,0,3.8-1.05l1-5.81C308.47,298.7,307.83,296.63,306.95,296.74Z"
transform="translate(-156 -121.74)"
opacity={0.1}
/>
<circle cx={142.19} cy={146.14} r={38.32} fill="#fda57d" />
<path
d="M330.78,230.22v16l-1.93,1.77a6.63,6.63,0,0,0,1.93,11h0s-3.19,25.54-7.18,35.12c0,0-6.2.68-4.79-4,5.19-17.16-5.19-14-7.58-10.78s.4,11.57.4,11.57,7.58,14-32.33,10.78c0,0-26.34-5.59-23.55-41.11.28-3.56-5.59-12.77,12-17.56h0a24.17,24.17,0,0,1,18.47-21C299.34,218.88,317.54,217.89,330.78,230.22Z"
transform="translate(-156 -121.74)"
opacity={0.1}
/>
<path
d="M330.12,229.56v16l-1.93,1.77a6.63,6.63,0,0,0,1.93,11h0s-3.19,25.54-7.18,35.12c0,0-6.2.68-4.79-4,5.19-17.16-5.19-14-7.58-10.78s.4,11.57.4,11.57,7.58,14-32.33,10.78c0,0-26.34-5.59-23.55-41.11.28-3.56-5.59-12.77,12-17.56h0a24.17,24.17,0,0,1,18.47-21C298.69,218.22,316.88,217.23,330.12,229.56Z"
transform="translate(-156 -121.74)"
fill="#72351c"
/>
</svg>
);
UndrawCreationProcess.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawCreationProcess.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawCreationProcess;