react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
309 lines (304 loc) • 10.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawGraduation = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="1c865d7c-0ca7-48be-81ba-aad9b606a693"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 851.55 585.04"
>
<defs>
<linearGradient
id="0aae94dc-7227-4f25-8eeb-aebef7a5d648"
x1={555.01}
y1={665.76}
x2={555.01}
y2={227.01}
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="34443484-f613-4d6b-ad83-e0484185f685"
x1={-612.66}
y1={2808.97}
x2={-612.66}
y2={2735.27}
gradientTransform="translate(3172.69 1244.56) rotate(90)"
xlinkHref="#0aae94dc-7227-4f25-8eeb-aebef7a5d648"
/>
</defs>
<title>graduation</title>
<path
d="M971.56,388.66a17,17,0,0,0-8.5-14.72V326.17h-.31V326H926.07L540.76,227,138.45,340.34v19.83L331,432.85,319.78,626.49c102.44,29.17,183.08,39.75,246.42,39.26h1.41l1.93,0c186.26-2.52,220.85-101.55,220.85-101.55-10.09-52.49-8.68-110.73-7-139.87l168.21-75.45-2.39-14.32h2.54V371.9a17,17,0,0,0-4.5,32.1l-12.5,30a10.85,10.85,0,0,0,5.07,3.57l-33.4,89.93a75.19,75.19,0,0,0,11.46,7.58l5.39,3.59.13-.89c9.12,4,20.61,6.52,31,1.6l2.82-.71-.45-.56a31.16,31.16,0,0,0,6.27-5l-2.83-96.33-2.42-31.48A17,17,0,0,0,971.56,388.66Z"
transform="translate(-138.45 -182)"
fill="url(#0aae94dc-7227-4f25-8eeb-aebef7a5d648)"
/>
<path
d="M783.94,561.08s-60.7,173.83-458,60.7L337,431.4l306.26-44.15,135.2,19.31S770.14,489.34,783.94,561.08Z"
transform="translate(-138.45 -182)"
fill={props.primaryColor}
/>
<polygon
points="198.5 249.4 198.5 265.95 427.51 345.97 628.93 260.44 631.69 243.88 427.51 318.38 198.5 249.4"
opacity={0.15}
/>
<path
d="M778.73,406.57l-135.2-19.31-4.43.64,130.73,18.68s-8.28,82.77,5.52,154.51c0,0-34,97.39-217.75,98.93,191.53,1.59,226.64-98.93,226.64-98.93C770.45,489.34,778.73,406.57,778.73,406.57Z"
transform="translate(-138.45 -182)"
opacity={0.15}
/>
<rect x={802.91} y={147.31} width={11.04} height={49.82} fill={props.primaryColor} />
<rect x={802.91} y={147.31} width={11.04} height={49.82} opacity={0.1} />
<path
d="M897.22,525.36s33.11,27.9,55.18,5.52l-2.76-93.81-16.55-8.28Z"
transform="translate(-138.45 -182)"
fill={props.primaryColor}
/>
<path
d="M897.22,525.36s33.11,27.9,55.18,5.52l-2.76-93.81-16.55-8.28Z"
transform="translate(-138.45 -182)"
opacity={0.1}
/>
<polygon
points="10.88 161.11 10.88 180.42 427.51 337.69 802.75 169.39 800 152.83 424.75 318.38 10.88 161.11"
fill={props.primaryColor}
/>
<polygon
points="10.88 161.11 10.88 180.42 427.51 337.69 802.75 169.39 800 152.83 424.75 318.38 10.88 161.11"
opacity={0.07}
/>
<polygon
points="10.88 161.11 426.75 322.38 800 152.83 402.68 50.74 10.88 161.11"
fill={props.primaryColor}
/>
<ellipse cx={410.88} cy={145.86} rx={27.51} ry={17.86} fill={props.primaryColor} />
<ellipse cx={410.88} cy={145.86} rx={27.51} ry={17.86} opacity={0.1} />
<rect x={430.12} y={147.16} width={383.52} height={8.28} fill={props.primaryColor} />
<rect x={430.12} y={147.16} width={383.52} height={8.28} opacity={0.1} />
<circle cx={805.67} cy={208.17} r={16.55} fill={props.primaryColor} />
<circle cx={805.67} cy={208.17} r={16.55} opacity={0.1} />
<path
d="M924.81,434.31s5.52,8.58,24.83,2.76l-2.76-35.87H938.6Z"
transform="translate(-138.45 -182)"
fill={props.primaryColor}
/>
<path
d="M924.81,434.31s5.52,8.58,24.83,2.76l-2.76-35.87H938.6Z"
transform="translate(-138.45 -182)"
opacity={0.1}
/>
<polygon
points="766.89 348.73 777.92 334.93 775.16 354.25 766.89 348.73"
fill="#fff"
opacity={0.2}
/>
<polygon
points="797.24 340.45 797.24 357.01 808.27 354.25 797.24 340.45"
fill="#fff"
opacity={0.2}
/>
<path
d="M381.1,530.73s82.77,27.59,132.44,11Z"
transform="translate(-138.45 -182)"
opacity={0.15}
/>
<path
d="M606.22,550s87.08,5.46,130.85-23.26Z"
transform="translate(-138.45 -182)"
opacity={0.15}
/>
<path
d="M666,615.5s50.63-19.16,76.58-38.7Z"
transform="translate(-138.45 -182)"
opacity={0.15}
/>
<path
d="M359,572.12S447.32,608,469.4,594.19Z"
transform="translate(-138.45 -182)"
opacity={0.15}
/>
<ellipse
cx={172.54}
cy={542.89}
rx={35.09}
ry={5.26}
transform="translate(-534.38 324.22) rotate(-68.68)"
fill="#e0e0e0"
/>
<ellipse
cx={628.58}
cy={721.1}
rx={35.09}
ry={3.58}
transform="translate(-410.17 862.45) rotate(-68.68)"
fill="#e0e0e0"
/>
<rect
x={351.17}
y={643.58}
width={21.06}
height={70.19}
transform="translate(309.31 -267.53) rotate(34.48)"
fill="#f55f44"
/>
<rect
x={363.08}
y={649.07}
width={23.69}
height={70.19}
transform="translate(510.43 1232.64) rotate(-171.84)"
opacity={0.05}
/>
<rect
x={365.7}
y={649.26}
width={21.06}
height={70.19}
transform="matrix(-0.99, -0.14, 0.14, -0.99, 513, 1233.19)"
fill="#f55f44"
/>
<rect
x={363.72}
y={387.11}
width={73.7}
height={489.57}
transform="translate(-472.18 593.28) rotate(-68.68)"
fill="url(#34443484-f613-4d6b-ad83-e0484185f685)"
/>
<path
d="M615.84,753.6c-8.91-3.34-462.6-180.57-456.06-178,20.86-39,25.52-65.38,25.52-65.38l456.06,178S628.41,716.5,615.84,753.6Z"
transform="translate(-138.45 -182)"
fill="#f5f5f5"
/>
<rect
x={370.58}
y={592.98}
width={40.36}
height={70.19}
transform="matrix(0.93, 0.36, -0.36, 0.93, 116.67, -281.1)"
opacity={0.05}
/>
<rect
x={372.34}
y={592.98}
width={36.85}
height={70.19}
transform="translate(116.67 -281.1) rotate(21.32)"
fill="#f55f44"
/>
<rect
x={377.66}
y={592.66}
width={24.57}
height={70.19}
transform="translate(116.5 -280.82) rotate(21.32)"
opacity={0.05}
/>
<rect
x={379.42}
y={592.66}
width={21.06}
height={70.19}
transform="translate(116.5 -280.82) rotate(21.32)"
fill="#f55f44"
/>
<circle
cx={455.91}
cy={745.92}
r={2.93}
transform="translate(-149.61 -175.06) rotate(-0.86)"
fill="#dbdbdb"
/>
<g opacity={0.5}>
<rect x={85.55} y={482} width={3} height={17} fill="#47e6b1" />
<rect
x={224}
y={664}
width={3}
height={17}
transform="translate(759.55 265) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={841.55} y={270} width={3} height={17} fill="#47e6b1" />
<rect
x={980}
y={452}
width={3}
height={17}
transform="translate(1303.55 -703) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={103.55} y={59} width={3} height={17} fill="#47e6b1" />
<rect
x={242}
y={241}
width={3}
height={17}
transform="translate(354.55 -176) rotate(90)"
fill="#47e6b1"
/>
</g>
<g opacity={0.5}>
<rect x={751.55} y={33} width={3} height={17} fill="#47e6b1" />
<rect
x={890}
y={215}
width={3}
height={17}
transform="translate(976.55 -850) rotate(90)"
fill="#47e6b1"
/>
</g>
<path
d="M206.9,435.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,201,441.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,206.9,435.46Z"
transform="translate(-138.45 -182)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M378.9,238.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,373,244.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,378.9,238.46Z"
transform="translate(-138.45 -182)"
fill="#4d8af0"
opacity={0.5}
/>
<path
d="M423.9,760.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,418,766.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,423.9,760.46Z"
transform="translate(-138.45 -182)"
fill="#4d8af0"
opacity={0.5}
/>
<circle cx={815.55} cy={444} r={6} fill="#f55f44" opacity={0.5} />
<circle cx={551.55} cy={574} r={6} fill="#4d8af0" opacity={0.5} />
<circle cx={653.55} cy={463} r={6} fill="#47e6b1" opacity={0.5} />
<circle cx={467.55} cy={6} r={6} fill="#f55f44" opacity={0.5} />
</svg>
);
UndrawGraduation.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawGraduation.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawGraduation;