react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
143 lines (138 loc) • 4.56 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawAppreciation = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="fb8cf14b-f1f1-484b-948d-ccb96f004aa6"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 878 737.16"
>
<defs>
<linearGradient
id="11de5531-9568-4bfb-9c18-e1a10a1db304"
x1={547.62}
y1={818.58}
x2={547.62}
y2={81.42}
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="c10cd1d3-5fc0-4efe-baa0-ba95b5480666"
x1={808.92}
y1={716.17}
x2={808.92}
y2={344.73}
xlinkHref="#11de5531-9568-4bfb-9c18-e1a10a1db304"
/>
<linearGradient
id="2a791f43-820d-4ae5-844a-cbff8e464aa6"
x1={1145.95}
y1={619.95}
x2={1145.95}
y2={543.3}
gradientTransform="translate(285.52 -638.15) rotate(43.55)"
xlinkHref="#11de5531-9568-4bfb-9c18-e1a10a1db304"
/>
<linearGradient
id="2adc96ec-3dd3-4164-81a7-1d5da3da9776"
x1={1228.17}
y1={651.09}
x2={1080.75}
y2={495.98}
gradientTransform="translate(285.52 -638.15) rotate(43.55)"
xlinkHref="#11de5531-9568-4bfb-9c18-e1a10a1db304"
/>
<linearGradient
id="d24ec6f0-8293-4573-af7c-38f5b26c7953"
x1={1200.46}
y1={562.32}
x2={1110.51}
y2={467.69}
gradientTransform="translate(285.52 -638.15) rotate(43.55)"
xlinkHref="#11de5531-9568-4bfb-9c18-e1a10a1db304"
/>
</defs>
<title>appreciation_2</title>
<path
d="M622.12,512.34c-32-65.11-6.4-121.68,38.43-161.18,61.91-28.82,122.75-16,167.58,41.63,29.25-17.1,66.5-20.8,97.13-13.88,23.64-89,1.5-195.76-77.39-253.3C745.25,50.76,601.38,73.28,526.53,175.9,423.91,101.05,280,123.57,205.19,226.19s-52.33,246.49,50.29,321.34L627.11,818.58l98.55-136.53Z"
transform="translate(-161 -81.42)"
fill="url(#11de5531-9568-4bfb-9c18-e1a10a1db304)"
/>
<path
d="M616.72,511.71a122.83,122.83,0,1,1,212.1-124,122.39,122.39,0,0,1,89-13.76c22.6-85.11-7.55-179.13-83-234.14-98.11-71.56-235.66-50-307.22,48.08C429.52,116.38,292,137.91,220.41,236s-50,235.66,48.08,307.22L623.8,802.39l90.37-123.91Z"
transform="translate(-161 -81.42)"
fill={props.primaryColor}
/>
<path
d="M829.54,401.7a114.94,114.94,0,0,0-198.48,116l116,198.48,198.48-116a114.94,114.94,0,1,0-116-198.48Z"
transform="translate(-161 -81.42)"
fill="url(#c10cd1d3-5fc0-4efe-baa0-ba95b5480666)"
/>
<path
d="M828.58,405.35A109.6,109.6,0,1,0,639.32,516l110.6,189.26,189.26-110.6a109.6,109.6,0,1,0-110.6-189.26Z"
transform="translate(-161 -81.42)"
fill="#e53935"
/>
<polygon
points="658.5 465.91 772.38 679.9 795.87 596.47 658.5 465.91"
fill="url(#2a791f43-820d-4ae5-844a-cbff8e464aa6)"
/>
<g opacity={0.2}>
<polygon
points="658.5 465.91 772.38 679.9 795.87 596.47 658.5 465.91"
fill="url(#2adc96ec-3dd3-4164-81a7-1d5da3da9776)"
/>
</g>
<polygon
points="658.5 465.91 878 568.78 795.87 596.47 658.5 465.91"
fill="url(#d24ec6f0-8293-4573-af7c-38f5b26c7953)"
/>
<polygon
points="665.57 472.63 769.79 668.48 791.29 592.12 665.57 472.63"
fill={props.primaryColor}
/>
<g opacity={0.2}>
<polygon points="665.57 472.63 769.79 668.48 791.29 592.12 665.57 472.63" />
</g>
<polygon
points="665.57 472.63 866.46 566.78 791.29 592.12 665.57 472.63"
fill={props.primaryColor}
/>
<path
d="M528,188l-.08-.43-.28.38C429.52,116.38,292,137.91,220.41,236c-62.5,85.69-54,201.47,14.54,277.09Z"
transform="translate(-161 -81.42)"
opacity={0.2}
/>
<path
d="M937.18,595.61A109.6,109.6,0,0,0,827,406.08L936,596.29Z"
transform="translate(-161 -81.42)"
opacity={0.2}
/>
</svg>
);
UndrawAppreciation.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawAppreciation.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawAppreciation;