react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
502 lines (497 loc) • 15.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawMorningEssentials = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="4e7d2cfa-59a3-4101-80b2-50836e8616cd"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 876 420.43"
>
<defs>
<linearGradient
id="9041f83e-b33d-43e7-be82-e9e75ba4974e"
x1={550.47}
y1={647.16}
x2={553.43}
y2={564.81}
gradientTransform="matrix(1.56, 0.31, 0.31, 1.21, -644.06, -526.45)"
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="c41a5b35-64d4-4d13-a37b-70ee78b2e20e"
x1={467.14}
y1={668.24}
x2={470.1}
y2={585.89}
gradientTransform="matrix(-1.56, 0.31, -0.31, 1.21, 1470.06, -526.45)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="6bfae766-d88b-4f30-8e20-87f084e51107"
x1={474.94}
y1={369.76}
x2={474.94}
y2={26.66}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="b0a880c7-5605-43f6-82a5-d7eb4e582f3b"
x1={474.94}
y1={206.33}
x2={474.94}
y2={190.1}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="f1725bfa-b597-4493-b451-2989f831f36a"
x1={498}
y1={199.21}
x2={498}
y2={92.21}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="11ac6ee2-a90f-4aaf-a83f-f23666873244"
x1={491}
y1={254.21}
x2={491}
y2={198.21}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="05b52614-0d9e-4d10-9bc3-45588f1f2624"
x1={503.5}
y1={448.39}
x2={503.5}
y2={439.36}
gradientTransform="translate(1164.26 161.41) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="758e1dd9-0eac-4b68-8215-b4a25a3a3c5f"
x1={529.26}
y1={508.7}
x2={529.26}
y2={499.66}
gradientTransform="translate(323 -197.08) rotate(30)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="1ca113de-1891-46f3-8f1f-978cc072ab9e"
x1={524.46}
y1={476.79}
x2={524.46}
y2={467.76}
gradientTransform="translate(130.54 -469.54) rotate(30)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="940bf950-4225-43b8-b728-d839c94fbdda"
x1={473.16}
y1={436.29}
x2={473.16}
y2={427.25}
gradientTransform="translate(1184.73 135.28) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="71d49914-c04d-45b2-8052-becd8cc60b99"
x1={456.93}
y1={373.69}
x2={456.93}
y2={364.66}
gradientTransform="translate(1185.01 101.8) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="643b97ca-eb0f-462e-93be-a63b7bbabfd5"
x1={473.16}
y1={311.1}
x2={473.16}
y2={302.06}
gradientTransform="translate(1201.51 72.68) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="633f3dcb-b1b2-470e-96ba-e2b1dc789ad8"
x1={519.52}
y1={264.73}
x2={519.52}
y2={255.7}
gradientTransform="translate(1230.9 55.71) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="972eb4e6-0b3d-46ae-9a0b-941c935612c8"
x1={648.19}
y1={265.89}
x2={648.19}
y2={256.86}
gradientTransform="translate(1295.08 73.53) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="38417b6f-fbf2-433c-93c3-07973ea51da8"
x1={693.39}
y1={313.42}
x2={693.39}
y2={304.38}
gradientTransform="translate(1311.31 103.35) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="0f16da05-71c7-46c2-9978-e7fd36fbf9d4"
x1={707.3}
y1={373.69}
x2={707.3}
y2={364.66}
gradientTransform="translate(1310.19 135.35) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="a28041ae-be04-4d62-bdcf-1a4ece23e72c"
x1={693.39}
y1={433.97}
x2={693.39}
y2={424.93}
gradientTransform="translate(1295.16 163.62) rotate(120)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="83b478d9-f998-4c1e-b4e8-c4d9879faa4c"
x1={325.85}
y1={657.2}
x2={325.85}
y2={412.76}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="0956438f-8022-4d94-b1e5-af9df6e10cae"
x1={224.45}
y1={595.42}
x2={224.45}
y2={436.93}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#9041f83e-b33d-43e7-be82-e9e75ba4974e"
/>
<linearGradient
id="ba3e688b-d2b9-44ca-af7d-f28a0f05155e"
x1={780.95}
y1={420.43}
x2={780.95}
y2={74.52}
gradientUnits="userSpaceOnUse"
>
<stop offset={0.01} stopColor="gray" stopOpacity={0.25} />
<stop offset={0.54} stopColor="gray" stopOpacity={0.12} />
<stop offset={1} stopColor="gray" stopOpacity={0.1} />
</linearGradient>
</defs>
<title>morning essentials</title>
<path
d="M636.94,316.29A38.25,38.25,0,1,1,675.19,278,38.29,38.29,0,0,1,636.94,316.29Zm0-69.55a31.3,31.3,0,1,0,31.3,31.3A31.33,31.33,0,0,0,636.94,246.74Z"
transform="translate(-162 -239.79)"
fill={props.primaryColor}
/>
<polygon
points="364.02 414.19 414.06 416.93 449.4 355.71 402.22 328.46 364.02 414.19"
fill="url(#9041f83e-b33d-43e7-be82-e9e75ba4974e)"
/>
<polygon
points="366.49 412.36 411.57 412.83 445.76 353.61 403.83 329.4 366.49 412.36"
fill={props.primaryColor}
/>
<polygon
points="585.86 414.19 535.82 416.93 500.47 355.71 547.66 328.46 585.86 414.19"
fill="url(#c41a5b35-64d4-4d13-a37b-70ee78b2e20e)"
/>
<polygon
points="583.39 412.36 538.31 412.83 504.11 353.61 546.05 329.4 583.39 412.36"
fill={props.primaryColor}
/>
<circle
cx={474.94}
cy={198.21}
r={171.55}
fill="url(#6bfae766-d88b-4f30-8e20-87f084e51107)"
/>
<circle cx={474.94} cy={198.21} r={166.92} fill={props.primaryColor} />
<circle cx={474.94} cy={198.21} r={135.62} fill="#fff" />
<circle
cx={474.94}
cy={198.21}
r={8.11}
fill="url(#b0a880c7-5605-43f6-82a5-d7eb4e582f3b)"
/>
<line x1={520.15} y1={93.89} x2={476.1} y2={198.21} fill={props.primaryColor} />
<polygon
points="478 199.22 473 197.54 518 92.21 523 94.57 478 199.22"
fill="url(#f1725bfa-b597-4493-b451-2989f831f36a)"
/>
<rect
x={603.5}
y={384.1}
width={113.24}
height={3.48}
transform="translate(-114.11 604.09) rotate(-67.11)"
fill="#2196f3"
/>
<line x1={476.1} y1={199.37} x2={505.08} y2={252.69} fill={props.primaryColor} />
<polygon
points="503 254.22 474 200.22 478 198.22 508 251.22 503 254.22"
fill="url(#11ac6ee2-a90f-4aaf-a83f-f23666873244)"
/>
<rect
x={650.85}
y={435.47}
width={3.48}
height={60.69}
transform="translate(-305.23 128.38) rotate(-28.52)"
fill="#2196f3"
/>
<circle cx={601.28} cy={201.69} r={3.48} fill={props.primaryColor} />
<circle
cx={528.1}
cy={375.52}
r={4.52}
transform="translate(-223.16 405.32) rotate(-60)"
fill="url(#05b52614-0d9e-4d10-9bc3-45588f1f2624)"
/>
<circle
cx={529.26}
cy={504.18}
r={4.52}
transform="translate(-343.18 92.39) rotate(-30)"
fill="url(#758e1dd9-0eac-4b68-8215-b4a25a3a3c5f)"
/>
<circle
cx={348.59}
cy={201.69}
r={4.52}
fill="url(#1ca113de-1891-46f3-8f1f-978cc072ab9e)"
/>
<circle
cx={574.23}
cy={329.16}
r={4.52}
transform="translate(-249.65 91.43) rotate(-30)"
fill="url(#940bf950-4225-43b8-b728-d839c94fbdda)"
/>
<circle
cx={636.83}
cy={312.93}
r={4.52}
transform="translate(-233.15 120.55) rotate(-30)"
fill="url(#71d49914-c04d-45b2-8052-becd8cc60b99)"
/>
<circle
cx={699.42}
cy={329.16}
r={4.52}
transform="translate(-232.88 154.02) rotate(-30)"
fill="url(#643b97ca-eb0f-462e-93be-a63b7bbabfd5)"
/>
<circle
cx={745.78}
cy={375.52}
r={4.52}
transform="translate(-249.85 183.42) rotate(-30)"
fill="url(#633f3dcb-b1b2-470e-96ba-e2b1dc789ad8)"
/>
<circle
cx={744.62}
cy={504.19}
r={4.52}
transform="translate(-314.33 200.08) rotate(-30)"
fill="url(#972eb4e6-0b3d-46ae-9a0b-941c935612c8)"
/>
<circle
cx={697.1}
cy={549.39}
r={4.52}
transform="translate(-343.3 182.37) rotate(-30)"
fill="url(#38417b6f-fbf2-433c-93c3-07973ea51da8)"
/>
<circle
cx={636.83}
cy={563.3}
r={4.52}
transform="translate(-358.33 154.1) rotate(-30)"
fill="url(#0f16da05-71c7-46c2-9978-e7fd36fbf9d4)"
/>
<circle
cx={576.55}
cy={549.39}
r={4.52}
transform="translate(-359.45 122.09) rotate(-30)"
fill="url(#a28041ae-be04-4d62-bdcf-1a4ece23e72c)"
/>
<circle cx={474.94} cy={73.03} r={3.48} fill="#69f0ae" />
<circle
cx={699.53}
cy={329.58}
r={3.48}
transform="translate(-97.66 530.82) rotate(-60)"
fill="#69f0ae"
/>
<circle
cx={745.35}
cy={375.4}
r={3.48}
transform="translate(-249.84 183.19) rotate(-30)"
fill="#69f0ae"
/>
<circle
cx={744.62}
cy={504.18}
r={3.48}
transform="translate(-226.33 657.16) rotate(-60)"
fill="#69f0ae"
/>
<circle
cx={697.1}
cy={549.16}
r={3.48}
transform="translate(-343.18 182.34) rotate(-30)"
fill="#69f0ae"
/>
<circle
cx={574.35}
cy={329.58}
r={3.48}
transform="translate(-249.84 91.54) rotate(-30)"
fill="#69f0ae"
/>
<circle
cx={528.52}
cy={375.4}
r={3.48}
transform="matrix(0.5, -0.87, 0.87, 0.5, -222.85, 405.63)"
fill="#69f0ae"
/>
<circle
cx={763.17}
cy={441.59}
r={4.52}
transform="translate(-280.55 200.96) rotate(-30)"
fill="#69f0ae"
/>
<circle
cx={529.26}
cy={504.18}
r={3.48}
transform="translate(-343.18 92.39) rotate(-30)"
fill="#69f0ae"
/>
<circle
cx={576.78}
cy={549.16}
r={3.48}
transform="matrix(0.5, -0.87, 0.87, 0.5, -349.19, 534.3)"
fill="#69f0ae"
/>
<circle cx={348.59} cy={201.69} r={3.48} fill="#69f0ae" />
<circle cx={474.94} cy={323.4} r={3.48} fill="#69f0ae" />
<path
d="M508.27,450.75a135.64,135.64,0,0,1,253.28-67.48A135.64,135.64,0,1,0,519.28,504.32,135.16,135.16,0,0,1,508.27,450.75Z"
transform="translate(-162 -239.79)"
fill={props.primaryColor}
opacity={0.2}
/>
<circle cx={474.94} cy={198.21} r={5.8} fill="#69f0ae" />
<path
d="M396.17,657.2H255.54a34.44,34.44,0,0,1-34.44-34.44v-210H430.61v210A34.44,34.44,0,0,1,396.17,657.2Z"
transform="translate(-162 -239.79)"
fill="url(#83b478d9-f998-4c1e-b4e8-c4d9879faa4c)"
/>
<path
d="M224.45,595.42C190,595.42,162,559.87,162,516.18s28-79.24,62.45-79.24,62.45,35.55,62.45,79.24S258.89,595.42,224.45,595.42Zm0-144.07c-26.78,0-48.57,29.08-48.57,64.83S197.67,581,224.45,581,273,551.92,273,516.18,251.24,451.34,224.45,451.34Z"
transform="translate(-162 -239.79)"
fill="url(#0956438f-8022-4d94-b1e5-af9df6e10cae)"
/>
<path
d="M226.47,588.7c-33.33,0-60.44-33.14-60.44-73.87S193.14,441,226.47,441s60.44,33.14,60.44,73.87S259.79,588.7,226.47,588.7Zm0-134.31c-25.92,0-47,27.11-47,60.44s21.09,60.44,47,60.44,47-27.11,47-60.44S252.39,454.39,226.47,454.39Z"
transform="translate(-162 -239.79)"
fill={props.primaryColor}
/>
<path
d="M63.75,175.66H264a0,0,0,0,1,0,0V374.91a34.44,34.44,0,0,1-34.44,34.44H98.2a34.44,34.44,0,0,1-34.44-34.44V175.66A0,0,0,0,1,63.75,175.66Z"
fill={props.primaryColor}
/>
<path
d="M410.17,270.9c2,5.36-.37,11.66-4.59,15.54s-9.91,5.74-15.55,6.82c-10.48,2-21.58,1.71-31.32,6.07s-17.62,15.93-13.05,25.57c5.2,11,20.54,10.66,32,14.62A37.39,37.39,0,0,1,401,363.71c1.46,4.87,1.87,10.26,0,15-3.11,7.74-11.41,11.88-19.19,14.88a216.66,216.66,0,0,1-92.84,13.89c-4.72-.33-10.65-1.94-11.22-6.63A127.47,127.47,0,0,0,328.95,383c2.94-1.81,5.92-3.85,7.57-6.89,3.37-6.19-.24-14.27-6-18.39s-12.93-5.37-19.81-6.89C293.91,347.07,248,336,241.1,317.56c-6.49-17.23,26.56-39.17,39.15-48.08,15.27-10.8,31.17-14.37,49.71-15.81C347.54,252.31,402,249.32,410.17,270.9Z"
transform="translate(-162 -239.79)"
opacity={0.2}
/>
<rect
x={685.9}
y={74.52}
width={190.1}
height={345.91}
rx={24.73}
ry={24.73}
fill="url(#ba3e688b-d2b9-44ca-af7d-f28a0f05155e)"
/>
<rect
x={690.28}
y={79.33}
width={181.34}
height={333.05}
rx={24.73}
ry={24.73}
fill="#fff"
/>
<rect x={710.75} y={102.88} width={140.4} height={271.04} fill={props.primaryColor} />
<ellipse cx={780.95} cy={393.44} rx={11.19} ry={11.48} fill="#dbdbdb" />
<ellipse cx={759.68} cy={90.25} rx={2.24} ry={2.3} fill="#dbdbdb" />
<rect
x={769.76}
y={88.52}
width={34.7}
height={3.45}
rx={1.49}
ry={1.49}
fill="#dbdbdb"
/>
<path
d="M238,615.56V416.31l-11-1V614.56A34.44,34.44,0,0,0,261.44,649h2.76A34.45,34.45,0,0,1,238,615.56Z"
transform="translate(-162 -239.79)"
opacity={0.2}
/>
<polygon
points="718.75 109.88 851.15 109.88 851.15 102.88 710.75 102.88 710.75 373.92 718.75 373.92 718.75 109.88"
opacity={0.2}
/>
</svg>
);
UndrawMorningEssentials.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawMorningEssentials.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawMorningEssentials;