react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
302 lines (297 loc) • 13.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawBackInTheDay = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="1dafe9df-d67d-4e87-ac14-a8d8c30fce82"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1113.61 785.89"
>
<defs>
<linearGradient
id="37206aa7-3636-469a-8e88-b3eadea340b4"
x1={636.53}
y1={415}
x2={989.86}
y2={415}
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>
</defs>
<title>back_in_the_day</title>
<path
d="M1107.42,533.28c-39.15,53.72-26.23,130.4-3.6,191.49,7.58,20.45,16.19,42.08,12.26,64.33-4.8,27.2-27.36,47.58-50.81,58.68-42.75,20.23-93.25,17-131.49-8.49-33-22-56.23-58.56-89.87-79.51-56.3-35.05-129.39-19.39-192.05,7.37C607.53,786.08,559,810.46,515.78,793c-30.4-12.3-50.87-43.61-61.64-77.08-5.2-16.16-8.84-33.7-19.2-46.35-6.16-7.52-14.3-12.76-22.67-17.14-76.39-40-174.65-15-248.71-59.63-50-30.14-81.12-88.63-94.05-150.12s-9.73-126.4-4.58-190.2c3.66-45.34,9.45-93.79,36.71-129.42C130.47,85.37,178.78,70.39,222,76.3s81.94,29.94,115.84,58.54c42.37,35.75,81.38,80.62,134.11,94.18,35.91,9.24,74.06,2.7,111.39-.19,62.4-4.82,124.58.73,186.38,7,59.16,6,118.73,12.7,174.76,32.37,39.65,13.92,71.08,40.23,108.41,58.21,24.33,11.72,51.1,14.44,74,29.58,28.26,18.65,53.8,51.69,45.51,91.34C1164.56,485,1128.2,504.77,1107.42,533.28Z"
transform="translate(-60.42 -75.05)"
fill={props.primaryColor}
opacity={0.1}
/>
<ellipse cx={554.08} cy={505.95} rx={467.5} ry={172} fill={props.primaryColor} />
<path
d="M328.67,514.33s-41.09,38.52,5.56,76.18l6.42-3.85s-37.24-15-2.14-70.62Z"
transform="translate(-60.42 -75.05)"
fill="#4a4559"
/>
<path
d="M580.33,523.32a44.56,44.56,0,0,1,17.12,28.25c3.42,19.26,1.71,30.82,8.13,33.38s-5.68,7.28-5.68,7.28-12.72-17.55-11-28.25-5.56-27.39-12.84-30.82Z"
transform="translate(-60.42 -75.05)"
fill="#4a4559"
/>
<path
d="M585.68,599.24c.21,9.15,6.21,20.17,29.32,27.66,0,0,27.39,6,27.39-10.7s-8.56-33.81-19.69-39.38c-6.55-3.28-16.36-.62-23.33,2.12A21.43,21.43,0,0,0,585.68,599.24Z"
transform="translate(-60.42 -75.05)"
fill="#d7d9e1"
/>
<polygon
points="266.53 530.44 266.53 507.76 277.23 514.18 312 579.09 266.53 530.44"
fill="#d7d9e1"
/>
<polygon
points="266.53 530.44 266.53 507.76 277.23 514.18 312 579.09 266.53 530.44"
opacity={0.1}
/>
<polygon
points="203.19 347.69 222.02 333.99 222.02 406.32 203.19 390.91 203.19 347.69"
fill="#d7d9e1"
/>
<polygon
points="440.94 260.16 331.59 303.6 335.87 450.41 440.94 479.72 440.94 260.16"
fill="#d7d9e1"
/>
<polygon
points="293.5 439.28 293.5 456.83 300.35 464.53 362.41 461.11 350.42 439.28 293.5 439.28"
fill="#e6e8ec"
/>
<polygon
points="215.6 322.86 250.06 299.11 250.06 445.48 215.6 412.31 215.6 322.86"
fill="#d7d9e1"
/>
<polygon
points="249.84 298.89 416.33 293.76 411.63 443.56 249.84 445.27 249.84 298.89"
fill="#e6e8ec"
/>
<rect x={266.53} y={315.59} width={130.54} height={108.28} fill="#fff" />
<polygon
points="440.73 259.95 526.76 263.37 524.19 471.38 440.73 479.51 440.73 259.95"
fill="#e6e8ec"
/>
<polygon
points="453.57 282.63 514.77 282.63 514.77 371.65 453.57 376.36 453.57 282.63"
fill="#fff"
/>
<polygon
points="461.7 293.76 506.64 291.62 506.64 303.17 461.7 304.89 461.7 293.76"
fill="#d7d9e1"
/>
<polygon
points="456.57 388.35 506.64 384.49 506.64 405.89 456.57 412.31 456.57 388.35"
fill="#fff"
/>
<polygon
points="266.53 507.76 473.26 494.92 513.92 559.55 313.19 580.95 266.53 507.76"
fill="#d7d9e1"
/>
<polygon
points="283.23 513.32 409.49 507.76 433.45 554.41 315.33 566.82 283.23 513.32"
fill="#f1f1f4"
/>
<polygon
points="448.86 505.62 471.97 505.62 495.51 545.85 471.97 547.99 448.86 505.62"
fill="#f1f1f4"
/>
<polygon
points="416.33 507.76 440.73 507.76 448.86 524.45 424.47 526.59 416.33 507.76"
fill="#f1f1f4"
/>
<polygon
points="441.37 538.36 440.94 533.22 447.79 533.22 451.43 537.72 458.71 537.72 463.41 547.99 436.88 549.7 433.45 540.71 441.37 538.36"
fill="#f1f1f4"
/>
<path
d="M604.73,580.67s23.09-6.73,30.68,17.82c4.32,14-11.4,25.78-23.59,17.73l-.67-.45C593.17,603.36,595.31,581.53,604.73,580.67Z"
transform="translate(-60.42 -75.05)"
fill="#e6e8ec"
/>
<rect
x={599.16}
y={582.81}
width={8.99}
height={23.11}
transform="translate(-303.04 480.59) rotate(-41.94)"
fill="#f1f1f4"
/>
<rect
x={607.72}
y={575.54}
width={8.99}
height={23.11}
transform="translate(-295.98 484.45) rotate(-41.94)"
fill="#f1f1f4"
/>
<path
d="M952.21,343.16c-25.08-42.48-46-57.1-60.45-61.31a69.68,69.68,0,0,1-3-15.22,6.8,6.8,0,0,0,1.39.48c3.68.81,7.49-1,10-3.82a13.55,13.55,0,0,0,1.88-2c2.49-3.34,3.58-7.47,4.61-11.49l12.6-49.13a97.46,97.46,0,0,0,3.28-16.86c1.35-18.08-8.35-36.53-24.13-45.92-6.82-4.06-15.45-6.42-22.82-3.76a95.2,95.2,0,0,0-17.1-1.54c-3.13,0-6.33.15-9.31-.89-2.28-.8-4.32-2.25-6.48-3.38-9.63-5-20.32-3.14-30.5-1.85-7.52,1-19.74-1.38-25.5,5.15a10.78,10.78,0,0,0-2.56,3.26c-1.32,2.56-1.14,6.29,1.1,7.91.93.67,2.13.94,2.83,1.89.87,1.18.61,2.88.31,4.35l-6.83,33.61.7.32a62.87,62.87,0,0,0-7.07,29c0,28.24,18.6,52.19,44.42,60.73a105.14,105.14,0,0,1,.32,22.51c-1.65-.81-8.07,5.25-10.42,9.06l-.15.26c-4.14,7.12-2.07,5.09-8.28,21.36-3.59,9.4-2.34,52.71-2.44,90.37L746.49,467.5c-27-4.26-99.17-12.19-101.69,24.15-1.51,21.77,13.64,54.14,29.6,81.64-6.56,3.95-11.46,8.57-14.07,14-20.7,42.72,29,69.16,29,69.16s6.59-2,16.15-4.75a47.18,47.18,0,0,1,1.58,6c-11.3.49-22,0-30.41-2.23a31.8,31.8,0,0,0-22.05,2.24c-8.83,4.31-18.48,11.26-18,20.91-.27,6.54,4.53,14.44,18.59,23.72,0,0,93.16,9.73,123.17-7.78,10.36-6,13.57-13.37,13.33-20.36.41-14-12.64-27.23-13.3-27.89-.6-2.47-1.23-5.21-1.78-7.83,8.07.76,22.48-.84,36-2.85,0,4.9-.06,7.61-.06,7.61h0c0,.66,0,1,0,1s141.8-7.12,140.77-40.68,35.19-35.6,35.19-35.6,1.47-16.76,1.42-42.11C989.83,477.67,984.33,397.56,952.21,343.16ZM784.13,491.32l0,0v0Z"
transform="translate(-60.42 -75.05)"
fill="url(#37206aa7-3636-469a-8e88-b3eadea340b4)"
/>
<rect x={663.08} y={420.45} width={141} height={101} fill="#5f5d7e" />
<path
d="M758.5,473.5s-105-22-108,22,62,132,62,132l59-12-17-68s67-15,71-16S758.5,473.5,758.5,473.5Z"
transform="translate(-60.42 -75.05)"
fill="#5f5d7e"
/>
<path
d="M758.5,473.5s-105-22-108,22,62,132,62,132l59-12-17-68s67-15,71-16S758.5,473.5,758.5,473.5Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M703.5,639.5s10,19,7,27,71-11,71-11-6-23-5-26S703.5,639.5,703.5,639.5Z"
transform="translate(-60.42 -75.05)"
fill="#5f5d7e"
/>
<path
d="M768.5,509.5l-7.31,6.7-4.69,4.3s-24,39-55,15,24-42,35-43c4.89-.44,8.2-3.86,10.37-7.51a33,33,0,0,0,3.63-9.49Z"
transform="translate(-60.42 -75.05)"
fill="#fdc2cc"
/>
<path
d="M768.5,509.5l-7.31,6.7-4.69,4.3s-24,39-55,15,24-42,35-43c4.89-.44,8.2-3.86,10.37-7.51a33,33,0,0,0,3.63-9.49Z"
transform="translate(-60.42 -75.05)"
opacity={0.05}
/>
<path
d="M703.5,639.5s10,19,7,27,71-11,71-11-6-23-5-26S703.5,639.5,703.5,639.5Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M768.5,509.5l-7.31,6.7c0-12.82-8.51-24.61-14.32-31.21a33,33,0,0,0,3.63-9.49Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M812.5,408.5l-69,69s24,21,19,43l50-56Z"
transform="translate(-60.42 -75.05)"
fill="#c4c8e2"
/>
<path
d="M812,408.5v56l-8,9L780.22,500.1,762,520.5c5-22-19-43-19-43Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M812.5,309.5s0,21,18,15,4,237,4,237-52-39-42-67,12-49,11-77S812.5,309.5,812.5,309.5Z"
transform="translate(-60.42 -75.05)"
fill="#d39999"
/>
<path
d="M813.5,253.5s15,41,0,72,89-17,89-17-23-11-15-64Z"
transform="translate(-60.42 -75.05)"
fill="#fdc2cc"
/>
<path
d="M804.5,440.5s1.13,20.88,0,33L780.72,500.1a200.43,200.43,0,0,1,11.78-21.6c3.69-5.73,4.52-28.56,4.63-54.63l8.73-8.73C805,429.24,804.5,440.5,804.5,440.5Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M820,304c1.11-5.25-7.57,2.66-10.35,7.25l-.15.25c-4,7-2,5-8,21s2,132-7,146-16,31-16,31l16-6s6-18,10-22,2-41,2-41,3-64,6-78C814.88,351.42,817.65,315.14,820,304Z"
transform="translate(-60.42 -75.05)"
fill="#c4c8e2"
/>
<path
d="M820,304c1.11-5.25-7.57,2.66-10.35,7.25l-.15.25c-4,7-2,5-8,21s2,132-7,146-16,31-16,31l16-6s6-18,10-22,2-41,2-41,3-64,6-78C814.88,351.42,817.65,315.14,820,304Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M843.5,553.5s-158-6-178,36,28,68,28,68,67-21,82-18,68-8,68-8Z"
transform="translate(-60.42 -75.05)"
fill="#5f5d7e"
/>
<path
d="M755.5,527.5s-36-20-56-7-18,48,10,49,43-16,43-16Z"
transform="translate(-60.42 -75.05)"
fill="#fdc2cc"
/>
<path
d="M868.5,290.5s32-22,79,59,35,220,35,220-35,2-34,35-136,40-136,40,2-328,16-337S868.5,290.5,868.5,290.5Z"
transform="translate(-60.42 -75.05)"
fill="#c4c8e2"
/>
<path
d="M868.64,350.16a43.8,43.8,0,0,0-18.2,35.64c-.17,30-.9,94.5-3.95,106.7-4,16-64,37-95,36,0,0-15,28,3,34s128,0,128,0,43-49,44-92,7-91,0-100C920.73,363.08,896.57,330.47,868.64,350.16Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M866.64,346.16a43.8,43.8,0,0,0-18.2,35.64c-.17,30-.9,94.5-3.95,106.7-4,16-64,37-95,36,0,0-15,28,3,34s128,0,128,0,43-49,44-92,7-91,0-100C918.73,359.08,894.57,326.47,866.64,346.16Z"
transform="translate(-60.42 -75.05)"
fill="#c4c8e2"
/>
<path
d="M660,658.74c-14.36,7.14-31,21.63.55,43.76,0,0,90,10,119-8s0-47,0-47-66.38,17.65-98.24,9A30.24,30.24,0,0,0,660,658.74Z"
transform="translate(-60.42 -75.05)"
fill="#4c4c56"
/>
<path
d="M660,660.75c-14.36,6.83-31,20.69.55,41.87,0,0,90,9.57,119-7.65s0-45,0-45-66.38,16.88-98.24,8.64A31.48,31.48,0,0,0,660,660.75Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M864,421s-5,63-38,77"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M814.5,260.5a128.32,128.32,0,0,1,5.91,26.71C826.72,289.33,836,284,843,284c18.33,0,23.49-20.51,35-33,.11-5.56,9.46,7.42,10.5.5Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M902.5,220.5a63.28,63.28,0,0,1-1.92,15.5l-.21.79a63.31,63.31,0,1,1,2.13-16.29Z"
transform="translate(-60.42 -75.05)"
fill="#fdc2cc"
/>
<path
d="M947.5,350.5a237.92,237.92,0,0,0-22.36-32.72A254.43,254.43,0,0,1,943.5,345.5c47,81,35,220,35,220s-35,2-34,35c.9,29.62-109.36,38.29-132,39.76,0,3.4,0,5.24,0,5.24s137-7,136-40,34-35,34-35S994.5,431.5,947.5,350.5Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M894.54,148.65c-6.59-4-14.93-6.31-22-3.7A90.43,90.43,0,0,0,856,143.44c-3,0-6.11.15-9-.87a48.37,48.37,0,0,1-6.26-3.33c-9.31-5-19.63-3.09-29.46-1.82-8,1-21.49-1.85-26.11,7.28-1.27,2.52-1.1,6.19,1.06,7.78.9.66,2.06.93,2.73,1.86.84,1.16.59,2.83.3,4.28l-6.6,33a24.78,24.78,0,0,0,19.64.9,55.24,55.24,0,0,0,5.17-2.41c4.93,3.21,10,.78,16,2.06,3.56.76,6.5,3.24,9,5.89a52.42,52.42,0,0,1,13.36,26.6c.67,3.75,1.53,8.37,5.17,9.51a23.68,23.68,0,0,0,4.16.42c6.56.84,9.25,8.61,13.45,13.71,5.14,6.23,14.35,10.27,14.91,18.33.14,2.08-.31,4.37.85,6.09a5.13,5.13,0,0,0,3.19,2c4,.89,8.11-1.47,10.52-4.76s3.46-7.34,4.45-11.3l12.17-48.31a97.34,97.34,0,0,0,3.17-16.57A49.71,49.71,0,0,0,894.54,148.65Z"
transform="translate(-60.42 -75.05)"
opacity={0.1}
/>
<path
d="M895.54,147.65c-6.59-4-14.93-6.31-22-3.7A90.43,90.43,0,0,0,857,142.44c-3,0-6.11.15-9-.87a48.37,48.37,0,0,1-6.26-3.33c-9.31-5-19.63-3.09-29.46-1.82-8,1-21.49-1.85-26.11,7.28-1.27,2.52-1.1,6.19,1.06,7.78.9.66,2.06.93,2.73,1.86.84,1.16.59,2.83.3,4.28l-6.6,33a24.78,24.78,0,0,0,19.64.9,55.24,55.24,0,0,0,5.17-2.41c4.93,3.21,10,.78,16,2.06,3.56.76,6.5,3.24,9,5.89a52.42,52.42,0,0,1,13.36,26.6c.67,3.75,1.53,8.37,5.17,9.51a23.68,23.68,0,0,0,4.16.42c6.56.84,9.25,8.61,13.45,13.71,5.14,6.23,14.35,10.27,14.91,18.33.14,2.08-.31,4.37.85,6.09a5.13,5.13,0,0,0,3.19,2c4,.89,8.11-1.47,10.52-4.76s3.46-7.34,4.45-11.3l12.17-48.31a97.34,97.34,0,0,0,3.17-16.57A49.71,49.71,0,0,0,895.54,147.65Z"
transform="translate(-60.42 -75.05)"
fill="#865a61"
/>
</svg>
);
UndrawBackInTheDay.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawBackInTheDay.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawBackInTheDay;