react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
134 lines (129 loc) • 6.06 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawSnowman = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="692d8699-1238-4b33-ba17-8bcd4ac1de29"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 566.04 759.48"
>
<defs>
<linearGradient
id="1c71d675-c1b9-4d0f-bd4a-1880cc952bc1"
x1={601.75}
y1={829.74}
x2={601.75}
y2={120.23}
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="dca6d3c2-408a-4324-89e9-e21c9b320daf"
x1={602.33}
y1={155.81}
x2={602.33}
y2={70.26}
xlinkHref="#1c71d675-c1b9-4d0f-bd4a-1880cc952bc1"
/>
<linearGradient
id="7c916d8a-5b23-438f-825e-48cc083aa3fe"
x1={396.02}
y1={304.93}
x2={396.02}
y2={70.55}
xlinkHref="#1c71d675-c1b9-4d0f-bd4a-1880cc952bc1"
/>
<linearGradient
id="60e8d838-c250-4804-a89f-cb3484b6bec6"
x1={803.94}
y1={304.1}
x2={803.94}
y2={103.3}
xlinkHref="#1c71d675-c1b9-4d0f-bd4a-1880cc952bc1"
/>
</defs>
<title>snowman_1</title>
<path
d="M761.32,396.69a163.62,163.62,0,0,0,3.32-32.89c0-65-37.3-112.42-92.39-138.55,4.85-10.11,6.77-16.59,6.77-28.55,0-42.68-37.49-76.47-80.16-76.47S523.35,154,523.35,196.7c0,12,1,7.1,4.37,29.68-55.09,26.12-88.86,72.39-88.86,137.42,0,2.22.06,4.42.14,6.61a5.43,5.43,0,0,0,.18,3.55,163,163,0,0,0,3,22.73C398.92,443,372,508,372,580c0,140.72,102.85,249.79,229.73,249.79S831.47,720.67,831.47,580C831.47,508,804.57,443,761.32,396.69Z"
transform="translate(-316.98 -70.26)"
fill="url(#1c71d675-c1b9-4d0f-bd4a-1880cc952bc1)"
/>
<path
d="M752.9,400.57a154.54,154.54,0,0,0-85.13-170.64,73.19,73.19,0,1,0-132,0,154.31,154.31,0,0,0-88.27,139.49c0,2.1.05,4.18.14,6.26a5.14,5.14,0,0,0,.17,3.36,154.4,154.4,0,0,0,2.84,21.53c-41,43.89-66.45,105.43-66.45,173.59,0,133.29,97.42,241.34,217.6,241.34s217.6-108.05,217.6-241.34C819.35,506,793.86,444.46,752.9,400.57Z"
transform="translate(-316.98 -70.26)"
fill="#fff"
/>
<circle cx={252.36} cy={104.9} r={6.94} fill="#263238" />
<circle cx={307.92} cy={104.9} r={6.94} fill="#263238" />
<path
d="M535.77,229.56s50.93,57.87,57.87,96.07L618,315.21l-34.72-62.5s56.71,3.47,84.49-23.15Z"
transform="translate(-316.98 -70.26)"
fill={props.primaryColor}
/>
<path
d="M591.33,197.34v63.29a4.81,4.81,0,0,0,4.81,4.81h0a4.81,4.81,0,0,0,4.8-4.43l5-63.29a4.81,4.81,0,0,0-4.8-5.19h-5A4.81,4.81,0,0,0,591.33,197.34Z"
transform="translate(-316.98 -70.26)"
fill="#ff6e40"
/>
<path
d="M650,127.16V88.54a17.32,17.32,0,0,0-24.19-15.89c-16.28,7-30.64,4.39-41.57-.7a17.38,17.38,0,0,0-24.82,13.91l-4.43,41.31H540.3v28.65h124V127.16Z"
transform="translate(-316.98 -70.26)"
fill="url(#dca6d3c2-408a-4324-89e9-e21c9b320daf)"
/>
<rect x={225.74} y={59.76} width={119.22} height={21.99} fill={props.primaryColor} />
<path
d="M585.8,75.59a44.78,44.78,0,0,0,37.88.64,15.78,15.78,0,0,1,22,14.48v41.63H558.92l4.27-44.07A15.84,15.84,0,0,1,585.8,75.59Z"
transform="translate(-316.98 -70.26)"
fill={props.primaryColor}
/>
<circle cx={281.3} cy={292.41} r={8.1} fill="#263238" />
<circle cx={281.3} cy={319.03} r={8.1} fill="#263238" />
<circle cx={281.3} cy={345.65} r={8.1} fill="#263238" />
<circle cx={281.3} cy={372.27} r={8.1} fill="#263238" />
<path
d="M470.88,292.87a167.92,167.92,0,0,1-98.23-87.26c23.45-1,41.47-18.9,50.53-39.69C435,138.69,438.46,107,444.52,78.15c1.6-7.63-10.11-10.89-11.71-3.23-5.17,24.67-9,50.14-16.38,74.26-6.57,21.5-21.43,44.68-46.6,44.33a6.14,6.14,0,0,0-2.24.39A170.35,170.35,0,0,1,357.39,110c1-7.74-11.15-7.64-12.15,0A177.66,177.66,0,0,0,347,166.76a42.18,42.18,0,0,0-27.22,6.68c-6.53,4.26-.43,14.78,6.13,10.49a30.32,30.32,0,0,1,24-4.46A182.27,182.27,0,0,0,467.65,304.58C475.09,307.08,478.25,295.34,470.88,292.87Z"
transform="translate(-316.98 -70.26)"
fill="url(#7c916d8a-5b23-438f-825e-48cc083aa3fe)"
/>
<path
d="M471.53,289.69a159.24,159.24,0,0,1-93.15-82.75c22.23-1,39.33-17.93,47.92-37.64,11.25-25.82,14.49-55.83,20.24-83.24,1.52-7.23-9.59-10.33-11.11-3.06-4.9,23.39-8.55,47.55-15.53,70.42-6.23,20.39-20.32,42.37-44.19,42a5.83,5.83,0,0,0-2.13.37,161.54,161.54,0,0,1-9.66-79.58c1-7.34-10.57-7.25-11.52,0A168.48,168.48,0,0,0,354,170.11a40,40,0,0,0-25.82,6.34c-6.19,4-.41,14,5.81,9.95a28.75,28.75,0,0,1,22.77-4.23A172.85,172.85,0,0,0,468.46,300.8C475.52,303.17,478.52,292,471.53,289.69Z"
transform="translate(-316.98 -70.26)"
fill="#795548"
/>
<path
d="M880.22,172.57A42.2,42.2,0,0,0,853,165.88a177.74,177.74,0,0,0,1.75-56.81c-1-7.65-13.17-7.75-12.15,0,10.46,80-36.75,157.26-113.53,183-7.38,2.47-4.22,14.21,3.23,11.72A182.34,182.34,0,0,0,850.07,178.6a30.33,30.33,0,0,1,24,4.46C880.66,187.35,886.76,176.83,880.22,172.57Z"
transform="translate(-316.98 -70.26)"
fill="url(#60e8d838-c250-4804-a89f-cb3484b6bec6)"
/>
<path
d="M871.73,176.45a40,40,0,0,0-25.82-6.34,168.48,168.48,0,0,0,1.66-53.85c-.95-7.25-12.48-7.34-11.52,0,9.92,75.87-34.83,149.07-107.62,173.44-7,2.34-4,13.47,3.06,11.11A172.85,172.85,0,0,0,843.15,182.16a28.75,28.75,0,0,1,22.77,4.23C872.15,190.46,877.93,180.49,871.73,176.45Z"
transform="translate(-316.98 -70.26)"
fill="#795548"
/>
</svg>
);
UndrawSnowman.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawSnowman.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawSnowman;