react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
357 lines (352 loc) • 12 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawHomeRun = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="a8118589-bfd3-4ed9-a485-58740795bbbd"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 856 775"
>
<defs>
<linearGradient
id="b041aca9-d3e5-471f-a45f-1719f37693f2"
x1={719.25}
y1={837.5}
x2={719.25}
y2={62.5}
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="0b6d47c4-b656-4227-9455-99964de86042"
x1={778.25}
y1={304.36}
x2={778.25}
y2={86.44}
xlinkHref="#b041aca9-d3e5-471f-a45f-1719f37693f2"
/>
<linearGradient
id="319cbdbc-8682-41ed-9c48-c1a9db6d6eba"
x1={33.46}
y1={167.6}
x2={33.46}
y2={100.67}
xlinkHref="#b041aca9-d3e5-471f-a45f-1719f37693f2"
/>
</defs>
<title>home run</title>
<path
d="M979.06,746.34l-.34.36L836,611.39l-19-85.7c0-.52.06-1,.07-1.55l-.89-4a67.67,67.67,0,0,0-6.53-29.2L825.3,342.09c0-.5,0-1,0-1.5l0-.36c0-2.55-.13-5.06-.37-7.54a37.22,37.22,0,0,0-.65-5,78.24,78.24,0,0,0-71.54-65.45l0,0V248.74q3.2-1,6.26-2.22a43.41,43.41,0,0,0,19,4.16c10.16.26,22.66-3.55,32-19.85,18.61-32.57,64.2-58.62,36.29-84.67s-24.66-22.8-29.31-47-4.19-34-47-35.82c-11.37-.49-21.55-.85-30.42-.84-25.64-.11-40.76,2.66-42.16,13.87-1.86,14.89-58.48,1.69-23.19,61.79,0,0,.31.47.9,1.3a70.71,70.71,0,0,0,36.71,109.28v16.18a42.48,42.48,0,0,0-26.95,38.18l-98.75-46.82a13.74,13.74,0,0,0,1-2.66c-20.47-5.58-25.64,9.76-25.64,9.76,7.53,2.41,12.91,2,16.74.41l-4,11.73c-9.53-8.21-29.07-21.6-37.28-2-11.06,26.44,29.67,35.9,29.67,35.9l.08-.18,117.82,62.59-.2,1.76.47.25v114.7h-.47l.47.82v1.25l-178.54,157-34,174.07H461.95a15.82,15.82,0,0,0-15.82,15.82h61.41l-2.79-15.82H489l15.47-.28,93.34-158.82,146.86-66.41,1.24,2.19.3-.14,56.28,99.71,157.25,67.92,5.44-5.18L949.3,777.1a15.82,15.82,0,0,0,.37,22.37l42.69-44.14Z"
transform="translate(-172 -62.5)"
fill="url(#b041aca9-d3e5-471f-a45f-1719f37693f2)"
/>
<path
d="M763.66,317.62l-58.34,61.85L575.06,286.7l9.5-28.2,111.26,52.75,47.66-52.75S765.69,285.79,763.66,317.62Z"
transform="translate(-172 -62.5)"
fill="#535461"
/>
<path
d="M704.41,379.47l58.34-61.85c1.38-21.55-8.35-41-14.78-51.33-.81,0-1.62-.06-2.44-.06h-9.94l-40.68,45-10.21-4.84c0,.45,0,.89,0,1.34v57.65Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<polygon
points="513.12 425.2 628.63 629.85 782.34 696.24 801.44 678.05 661.37 545.26 634.99 426.11 513.12 425.2"
fill="#4d8af0"
/>
<path
d="M686.94,491.6,745.32,595l30.5-13.79a66.48,66.48,0,0,0,39.07-58.75l-7-31.59-119.46-.61Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<path
d="M687.54,488,511,643.16,477.71,813.61l31.61-.58,91.24-155.24L774.91,579A66.51,66.51,0,0,0,807,488.61h0Z"
transform="translate(-172 -62.5)"
fill="#4d8af0"
/>
<path
d="M807.45,491.8,685.57,490V309.58a41.52,41.52,0,0,1,41.52-41.52h19.34a76.47,76.47,0,0,1,76.47,76.47Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<path
d="M807.45,490l-121.88-1.82V307.76a41.52,41.52,0,0,1,41.52-41.52h19.34a76.47,76.47,0,0,1,76.47,76.47Z"
transform="translate(-172 -62.5)"
fill="#535461"
/>
<path
d="M512.31,828.77h-60a15.46,15.46,0,0,1,15.46-15.46h41.84Z"
transform="translate(-172 -62.5)"
fill="#535461"
/>
<path
d="M986.22,748.45,944.48,791.6h0a15.46,15.46,0,0,1-.37-21.86l29.09-30.07Z"
transform="translate(-172 -62.5)"
fill="#535461"
/>
<path
d="M822.46,344.91l-78.22,61.85-59.12-31.41,5.72-51.19,40.67,14.38,30.44-25.13c24.61-20.31,62.23-2.08,60.63,29.79Q822.53,344.05,822.46,344.91Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<path
d="M539.95,158.26h40a0,0,0,0,1,0,0v54.93a16,16,0,0,1-16,16h-8a16,16,0,0,1-16-16V158.26A0,0,0,0,1,539.95,158.26Z"
fill="#fda57d"
/>
<path
d="M711.95,255.1a69.28,69.28,0,0,0,40,0V222.58h-40Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<circle cx={559.96} cy={124.6} r={69.12} fill="#fda57d" />
<path
d="M675.18,145.18s24.49,36.92,47.23,29.64l34.87,75.87s30.62,16.9,48.81-14.93,62.76-57.3,35.47-82.77-45.48-22.74-50-46.39S808.81,73.87,767,72.05s-67.3-1.82-69.12,12.73S640.69,86.43,675.18,145.18Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<path
d="M677,145.18s24.49,36.92,47.23,29.64L759.1,250.7s30.62,16.9,48.81-14.93,62.76-57.3,35.47-82.77-24.1-22.28-28.65-45.93-4.09-33.2-45.93-35-67.3-1.82-69.12,12.73S642.51,86.43,677,145.18Z"
transform="translate(-172 -62.5)"
fill="#72351c"
/>
<polygon
points="541.49 229.2 579.97 203.93 591.79 216.47 566.32 241.93 541.49 229.2"
fill="#535461"
/>
<ellipse cx={559.96} cy={132.79} rx={6.37} ry={13.64} fill="#fda57d" />
<path
d="M1026.39,100.76h0a22.68,22.68,0,0,1-13,29.57l-475.82,174-9-21.88L996.62,88.18A22.68,22.68,0,0,1,1026.39,100.76Z"
transform="translate(-172 -62.5)"
fill="url(#0b6d47c4-b656-4227-9455-99964de86042)"
/>
<path
d="M1023.21,102h0a22.38,22.38,0,0,1-12.88,29.19L540.66,303l-8.92-21.6L993.83,89.61A22.38,22.38,0,0,1,1023.21,102Z"
transform="translate(-172 -62.5)"
fill={props.primaryColor}
/>
<path
d="M822.46,341.27l-78.22,61.85L569.61,310.35l12.73-28.2L731.5,334.9l30.44-25.13c24.61-20.31,62.23-2.08,60.63,29.79Q822.53,340.42,822.46,341.27Z"
transform="translate(-172 -62.5)"
opacity={0.1}
/>
<path
d="M822.46,343.09l-78.22,61.85L569.61,312.16,582.34,284,731.5,336.72l30.44-25.13c24.61-20.31,62.23-2.08,60.63,29.79Q822.53,342.24,822.46,343.09Z"
transform="translate(-172 -62.5)"
fill="#535461"
/>
<path
d="M570.06,312.62s-39.81-9.25-29-35.09,41.73,6.9,41.73,6.9Z"
transform="translate(-172 -62.5)"
fill="#fda57d"
/>
<path
d="M590.07,258s-3.75,16.36-25.07,9.54C565,267.59,570.06,252.59,590.07,258Z"
transform="translate(-172 -62.5)"
fill="#fda57d"
/>
<path
d="M288,181.33a31,31,0,0,1,33.05,11.57c3.5,5,5.51,10.95,9.64,15.39C341.14,219.5,360,216.05,373,208s24.15-19.77,38.83-24.07c8-2.34,16.45-2.27,24.77-2.19,16.78.17,34,.23,49.71-5.75"
transform="translate(-172 -62.5)"
fill="none"
stroke="#e6e6e6"
strokeMiterlimit={10}
/>
<path
d="M288,202.85a31,31,0,0,1,33.05,11.57c3.5,5,5.51,10.95,9.64,15.39C341.14,241,360,237.56,373,229.55s24.15-19.77,38.83-24.07c8-2.34,16.45-2.27,24.77-2.19,16.78.17,34,.23,49.71-5.75"
transform="translate(-172 -62.5)"
fill="none"
stroke="#e6e6e6"
strokeMiterlimit={10}
/>
<circle
cx={33.46}
cy={134.14}
r={33.46}
fill="url(#319cbdbc-8682-41ed-9c48-c1a9db6d6eba)"
/>
<circle cx={33.46} cy={134.14} r={31.65} fill="#f5f5f5" />
<path
d="M178.43,180s11.72,24.06.56,34.14"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
/>
<path
d="M178.59,183.73l1.22.91a5.2,5.2,0,0,1,2.39-2.35"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M179.12,186.4a4.46,4.46,0,0,1,2.15,1.61,4.82,4.82,0,0,1,2.28-2.9"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M180.95,190.08a3,3,0,0,1,1.56,1.66,22,22,0,0,1,2.49-2.59"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M181.58,193.36a3.4,3.4,0,0,1,1.58,2.44,7.12,7.12,0,0,1,2.86-2.36"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M182.05,197.8a1.06,1.06,0,0,1,1.06.47,3.12,3.12,0,0,1,.43,1.15,7,7,0,0,1,3.83-2.29"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M182.61,200.28a2.16,2.16,0,0,1,.69,1.79l3.94-1.34"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M182.34,204.53a4,4,0,0,1,.66,1.6,16.66,16.66,0,0,1,3.57-1.45"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M181.41,207.49a14.74,14.74,0,0,1,.11,2.62q2.18-.47,4.4-.78"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M232.49,180s-11.72,24.06-.56,34.14"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
/>
<path
d="M232.33,183.73l-1.22.91a5.2,5.2,0,0,0-2.39-2.35"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M231.81,186.4a4.46,4.46,0,0,0-2.15,1.61,4.82,4.82,0,0,0-2.28-2.9"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M230,190.08a3,3,0,0,0-1.56,1.66,22,22,0,0,0-2.49-2.59"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M229.34,193.36a3.4,3.4,0,0,0-1.58,2.44,7.12,7.12,0,0,0-2.86-2.36"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M228.87,197.8a1.06,1.06,0,0,0-1.06.47,3.12,3.12,0,0,0-.43,1.15,7,7,0,0,0-3.83-2.29"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M228.31,200.28a2.16,2.16,0,0,0-.69,1.79l-3.94-1.34"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M228.59,204.53a4,4,0,0,0-.66,1.6,16.66,16.66,0,0,0-3.57-1.45"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
<path
d="M229.52,207.49a14.74,14.74,0,0,0-.11,2.62q-2.18-.47-4.4-.78"
transform="translate(-172 -62.5)"
fill="none"
stroke="#6c63ff"
strokeLinecap="round"
strokeMiterlimit={10}
strokeWidth={0.5}
/>
</svg>
);
UndrawHomeRun.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawHomeRun.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawHomeRun;