react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
501 lines (496 loc) • 18.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawGrades = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="1ff1dac0-d950-477b-ae59-2036a97d16c8"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 793.42 762"
>
<defs>
<linearGradient
id="1db7d614-95ea-4735-bce0-c4452f260fa8"
x1={254.47}
y1={338.35}
x2={254.47}
y2={235.68}
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="0a1109a3-18fe-4749-b2eb-fef06eff737b"
x1={-207.21}
y1={171.67}
x2={-207.21}
y2={69}
gradientTransform="matrix(-1, 0, 0, 1, 48, 0)"
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="2478c1ed-8849-41cb-b6db-4ccd6d9f4272"
x1={254.47}
y1={831}
x2={254.47}
y2={728.33}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="32857a06-6218-4ff4-a65e-5e0cc847f238"
x1={254.47}
y1={668.46}
x2={254.47}
y2={565.8}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="abb25740-3cbb-490d-a662-d7c03337099b"
x1={254.47}
y1={502.58}
x2={254.47}
y2={399.91}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="4925ed74-65be-4ffe-8436-a4fb7d7023e5"
x1={499.41}
y1={67.18}
x2={499.41}
y2={35.49}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="dd0bfc9c-debe-4d51-9931-9ab841717e3d"
x1={499.41}
y1={238.72}
x2={499.41}
y2={207.03}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="d84c7c63-dccd-4756-aeb3-1aa79d1ac370"
x1={499.41}
y1={398.09}
x2={499.41}
y2={366.4}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="c7dbaff9-5fd8-4d37-a62f-67877106401a"
x1={499.41}
y1={563.83}
x2={499.41}
y2={532.14}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
<linearGradient
id="dda452c3-0953-49e7-b2d8-d79937657bb0"
x1={499.41}
y1={726.51}
x2={499.41}
y2={694.82}
xlinkHref="#1db7d614-95ea-4735-bce0-c4452f260fa8"
/>
</defs>
<title>grades</title>
<g opacity={0.5}>
<path
d="M305.65,286.86a51.18,51.18,0,1,0-79.73,42.48l0,.23a17.52,17.52,0,0,0,5.8,3.69l.07-.23c2.39,2.06,12.49,5.35,24.08,5.32h.25c7.34,0,15.31-1.29,22.32-5.09,0,0,.06-.13.16-.39a18.23,18.23,0,0,0,4.83-3.3l.08-.58A51.12,51.12,0,0,0,305.65,286.86Z"
transform="translate(-203.29 -69)"
fill="url(#1db7d614-95ea-4735-bce0-c4452f260fa8)"
/>
</g>
<circle cx={50.65} cy={216.04} r={49.64} fill="#f5f5f5" />
<path
d="M234.06,304.6s-11.83,1-8.7,22.52A17,17,0,0,0,231,330.7l6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#fda57d"
/>
<path
d="M272.44,304.6s11.83,1,8.7,22.52a17,17,0,0,1-5.63,3.58l-6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#fda57d"
/>
<path
d="M234.57,269.28s-5.63,16.38-8.7,14.84c0,0,29.63,25.59,55.78,0a78,78,0,0,0-11.26-14.84Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<circle cx={50.27} cy={198.75} r={22.01} fill="#333" />
<path
d="M272.21,304.6H233.83l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M272.72,304.6H234.34l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M272.44,304.6H234.06l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#fdd835"
/>
<path
d="M42.53,222.86H57.89a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73h-1.9a6.73,6.73,0,0,1-6.73-6.73V222.86A0,0,0,0,1,42.53,222.86Z"
opacity={0.1}
/>
<path
d="M42.53,222.29H57.89a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73h-1.9a6.73,6.73,0,0,1-6.73-6.73V222.29A0,0,0,0,1,42.53,222.29Z"
fill="#fda57d"
/>
<path
d="M245.85,293.5a22.1,22.1,0,0,0,15.35,0v-1.89H245.85Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<circle cx={50.27} cy={203.52} r={22.01} fill="#fda57d" />
<path
d="M232.52,264.17h42S270.9,247.22,255,248.3,232.52,264.17,232.52,264.17Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<ellipse cx={28.72} cy={202.59} rx={2.05} ry={3.84} fill="#fda57d" />
<ellipse cx={71.71} cy={202.59} rx={2.05} ry={3.84} fill="#fda57d" />
<path
d="M232.52,264.73h42S270.9,247.79,255,248.87,232.52,264.73,232.52,264.73Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<g opacity={0.5}>
<path
d="M204,120.18a51.18,51.18,0,1,1,79.73,42.48l0,.23a17.52,17.52,0,0,1-5.8,3.69l-.07-.23c-2.39,2.06-12.49,5.35-24.08,5.32h-.25c-7.34,0-15.31-1.29-22.32-5.09,0,0-.06-.13-.16-.39a18.23,18.23,0,0,1-4.83-3.3l-.08-.58A51.12,51.12,0,0,1,204,120.18Z"
transform="translate(-203.29 -69)"
fill="url(#0a1109a3-18fe-4749-b2eb-fef06eff737b)"
/>
</g>
<circle cx={51.92} cy={51.18} r={49.64} fill="#f5f5f5" />
<path
d="M235.74,139.09s-11.83,1-8.7,22.52a17,17,0,0,0,5.63,3.58l6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#be7c5e"
/>
<path
d="M274.13,139.09s11.83,1,8.7,22.52a17,17,0,0,1-5.63,3.58l-6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#be7c5e"
/>
<path
d="M236.26,103.78s-.91,2.65-2.2,5.72c-2.82,6.71.4,32.47,7.13,35.21,7.56,3.08,17.5,5.05,27.83,1.29,9-3.27,11.74-32.59,5.4-39.74-.74-.84-1.52-1.67-2.33-2.48Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<circle cx={51.96} cy={33.24} r={22.01} fill="#333" />
<path
d="M273.9,139.09H235.52l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51A20,20,0,0,0,278,152.4c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M274.41,139.09H236l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M274.13,139.09H235.74l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#3ad29f"
/>
<path
d="M44.22,57.35H59.58a0,0,0,0,1,0,0V70.59a6.73,6.73,0,0,1-6.73,6.73h-1.9a6.73,6.73,0,0,1-6.73-6.73V57.35a0,0,0,0,1,0,0Z"
opacity={0.1}
/>
<path
d="M44.22,56.78H59.58a0,0,0,0,1,0,0V70a6.73,6.73,0,0,1-6.73,6.73h-1.9A6.73,6.73,0,0,1,44.22,70V56.78A0,0,0,0,1,44.22,56.78Z"
fill="#be7c5e"
/>
<path
d="M247.54,128a22.1,22.1,0,0,0,15.35,0v-1.89H247.54Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<circle cx={51.96} cy={38.02} r={22.01} fill="#be7c5e" />
<path
d="M234.21,98.66h42s-3.58-16.95-19.45-15.87S234.21,98.66,234.21,98.66Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<ellipse cx={30.4} cy={37.08} rx={2.05} ry={3.84} fill="#be7c5e" />
<ellipse cx={73.39} cy={37.08} rx={2.05} ry={3.84} fill="#be7c5e" />
<path
d="M234.21,99.23h42s-3.58-16.95-19.45-15.87S234.21,99.23,234.21,99.23Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<g opacity={0.5}>
<path
d="M305.65,779.51A51.18,51.18,0,1,0,225.92,822l0,.23a17.52,17.52,0,0,0,5.8,3.69l.07-.23c2.39,2.06,12.49,5.35,24.08,5.32h.25c7.34,0,15.31-1.29,22.32-5.09,0,0,.06-.13.16-.39a18.23,18.23,0,0,0,4.83-3.3l.08-.58A51.12,51.12,0,0,0,305.65,779.51Z"
transform="translate(-203.29 -69)"
fill="url(#2478c1ed-8849-41cb-b6db-4ccd6d9f4272)"
/>
</g>
<circle cx={51.18} cy={710.52} r={49.64} fill="#f5f5f5" />
<path
d="M233,798.93s-11.83,1-8.7,22.52a17,17,0,0,0,5.63,3.58l6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M271.38,798.93s11.83,1,8.7,22.52a17,17,0,0,1-5.63,3.58l-6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<circle cx={49.21} cy={693.08} r={22.01} fill="#333" />
<path
d="M271.15,798.93H232.77l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M271.67,798.93H233.28l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M271.38,798.93H233l-3.58,15.35s-2.1,7.11.51,10.24S257,834.75,275,825a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M41.48,717.19H56.83a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73H48.2a6.73,6.73,0,0,1-6.73-6.73V717.19A0,0,0,0,1,41.48,717.19Z"
opacity={0.1}
/>
<path
d="M41.48,716.62H56.83a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73H48.2a6.73,6.73,0,0,1-6.73-6.73V716.62A0,0,0,0,1,41.48,716.62Z"
fill="#fda57d"
/>
<path
d="M244.8,787.83a22.1,22.1,0,0,0,15.35,0V786H244.8Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<circle cx={49.21} cy={697.85} r={22.01} fill="#fda57d" />
<path
d="M231.46,759.06h42S269.85,742.12,254,743.2,231.46,759.06,231.46,759.06Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M231.46,758.49h42s-3.58-16.95-19.45-15.87S231.46,758.49,231.46,758.49Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<ellipse cx={27.66} cy={696.92} rx={2.05} ry={3.84} fill="#fda57d" />
<ellipse cx={70.65} cy={696.92} rx={2.05} ry={3.84} fill="#fda57d" />
<g opacity={0.5}>
<path
d="M305.65,617a51.18,51.18,0,1,0-79.73,42.48l0,.23a17.52,17.52,0,0,0,5.8,3.69l.07-.23c2.39,2.06,12.49,5.35,24.08,5.32h.25c7.34,0,15.31-1.29,22.32-5.09,0,0,.06-.13.16-.39a18.23,18.23,0,0,0,4.83-3.3l.08-.58A51.12,51.12,0,0,0,305.65,617Z"
transform="translate(-203.29 -69)"
fill="url(#32857a06-6218-4ff4-a65e-5e0cc847f238)"
/>
</g>
<circle cx={50.65} cy={546.15} r={49.64} fill="#f5f5f5" />
<path
d="M234.06,634.71s-11.83,1-8.7,22.52a17,17,0,0,0,5.63,3.58l6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#be7c5e"
/>
<path
d="M272.44,634.71s11.83,1,8.7,22.52a17,17,0,0,1-5.63,3.58l-6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#be7c5e"
/>
<path
d="M234.57,599.4s-5.63,29-8.7,27.42c0,0,29.63,25.59,55.78,0,0,0-4.61-20.76-11.26-27.42Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<circle cx={50.27} cy={528.86} r={22.01} fill="#333" />
<path
d="M272.21,634.71H233.83l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M272.72,634.71H234.34l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M272.44,634.71H234.06l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#f55f44"
/>
<path
d="M42.53,553H57.89a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73h-1.9a6.73,6.73,0,0,1-6.73-6.73V553A0,0,0,0,1,42.53,553Z"
opacity={0.1}
/>
<path
d="M42.53,552.41H57.89a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73h-1.9a6.73,6.73,0,0,1-6.73-6.73V552.41A0,0,0,0,1,42.53,552.41Z"
fill="#be7c5e"
/>
<path
d="M245.85,623.62a22.1,22.1,0,0,0,15.35,0v-1.89H245.85Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<circle cx={50.27} cy={533.64} r={22.01} fill="#be7c5e" />
<path
d="M232.52,594.28h42S270.9,577.34,255,578.42,232.52,594.28,232.52,594.28Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<ellipse cx={28.72} cy={532.7} rx={2.05} ry={3.84} fill="#be7c5e" />
<ellipse cx={71.71} cy={532.7} rx={2.05} ry={3.84} fill="#be7c5e" />
<path
d="M232.52,594.85h42S270.9,577.9,255,579,232.52,594.85,232.52,594.85Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<g opacity={0.5}>
<path
d="M305.65,451.09a51.18,51.18,0,1,0-79.73,42.48l0,.23a17.52,17.52,0,0,0,5.8,3.69l.07-.23c2.39,2.06,12.49,5.35,24.08,5.32h.25c7.34,0,15.31-1.29,22.32-5.09,0,0,.06-.13.16-.39a18.23,18.23,0,0,0,4.83-3.3l.08-.58A51.12,51.12,0,0,0,305.65,451.09Z"
transform="translate(-203.29 -69)"
fill="url(#abb25740-3cbb-490d-a662-d7c03337099b)"
/>
</g>
<circle cx={51.18} cy={382.09} r={49.64} fill="#f5f5f5" />
<path
d="M233,470.5s-11.83,1-8.7,22.52a17,17,0,0,0,5.63,3.58l6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M271.38,470.5s11.83,1,8.7,22.52a17,17,0,0,1-5.63,3.58l-6.65-22.52Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<circle cx={49.21} cy={364.66} r={22.01} fill="#333" />
<path
d="M271.15,470.5H232.77l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M271.67,470.5H233.28l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M271.38,470.5H233l-3.58,15.35s-2.1,7.11.51,10.24,27.07,10.24,45,.51a20,20,0,0,0,.51-12.79c-2-7.16-.51-.51-.51-.51Z"
transform="translate(-203.29 -69)"
fill="#4d8af0"
/>
<path
d="M41.48,388.77H56.83a0,0,0,0,1,0,0V402a6.73,6.73,0,0,1-6.73,6.73H48.2A6.73,6.73,0,0,1,41.48,402V388.77A0,0,0,0,1,41.48,388.77Z"
opacity={0.1}
/>
<path
d="M41.48,388.2H56.83a0,0,0,0,1,0,0v13.23a6.73,6.73,0,0,1-6.73,6.73H48.2a6.73,6.73,0,0,1-6.73-6.73V388.2A0,0,0,0,1,41.48,388.2Z"
fill="#be7c5e"
/>
<path
d="M244.8,459.41a22.1,22.1,0,0,0,15.35,0v-1.89H244.8Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<circle cx={49.21} cy={369.43} r={22.01} fill="#be7c5e" />
<path
d="M231.46,430.64h42S269.85,413.7,254,414.78,231.46,430.64,231.46,430.64Z"
transform="translate(-203.29 -69)"
opacity={0.1}
/>
<path
d="M231.46,430.07h42s-3.58-16.95-19.45-15.87S231.46,430.07,231.46,430.07Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<ellipse cx={27.66} cy={368.49} rx={2.05} ry={3.84} fill="#be7c5e" />
<ellipse cx={70.65} cy={368.49} rx={2.05} ry={3.84} fill="#be7c5e" />
<path
d="M233.8,419.25a13.27,13.27,0,0,1,3.29-5.35c4.52-4.47,11.93-5.41,15.73-10.5a3,3,0,0,1-1.36,4.19c3.64,0,7.86-.34,9.92-3.34a6.81,6.81,0,0,1-1.15,7.19c3.23.15,6.67,2.34,6.88,5.56a6.42,6.42,0,0,1-3,5.41,16.52,16.52,0,0,1-6,2.26C252,426,229.79,431.69,233.8,419.25Z"
transform="translate(-203.29 -69)"
fill="#333"
/>
<g opacity={0.5}>
<rect
x={205.41}
y={35.49}
width={588}
height={31.69}
fill="url(#4925ed74-65be-4ffe-8436-a4fb7d7023e5)"
/>
</g>
<rect x={207.87} y={37.87} width={583.88} height={26.14} fill="#f5f5f5" />
<rect x={207.87} y={37.87} width={412.84} height={26.14} fill="#3ad29f" />
<g opacity={0.5}>
<rect
x={205.41}
y={207.03}
width={588}
height={31.69}
fill="url(#dd0bfc9c-debe-4d51-9931-9ab841717e3d)"
/>
</g>
<rect x={207.87} y={209.41} width={583.88} height={26.14} fill="#f5f5f5" />
<rect x={207.87} y={209.41} width={572.39} height={26.14} fill={props.primaryColor} />
<g opacity={0.5}>
<rect
x={205.41}
y={366.4}
width={588}
height={31.69}
fill="url(#d84c7c63-dccd-4756-aeb3-1aa79d1ac370)"
/>
</g>
<rect x={207.87} y={368.78} width={583.88} height={26.14} fill="#f5f5f5" />
<rect x={207.87} y={368.78} width={89.53} height={26.14} fill="#f55f44" />
<g opacity={0.5}>
<rect
x={205.41}
y={532.14}
width={588}
height={31.69}
fill="url(#c7dbaff9-5fd8-4d37-a62f-67877106401a)"
/>
</g>
<rect x={207.87} y={534.52} width={583.88} height={26.14} fill="#f5f5f5" />
<rect x={207.87} y={534.52} width={529.84} height={26.14} fill={props.primaryColor} />
<g opacity={0.5}>
<rect
x={205.41}
y={694.82}
width={588}
height={31.69}
fill="url(#dda452c3-0953-49e7-b2d8-d79937657bb0)"
/>
</g>
<rect x={207.87} y={697.2} width={583.88} height={26.14} fill="#f5f5f5" />
<rect x={207.87} y={697.2} width={181.99} height={26.14} fill="#3ad29f" />
</svg>
);
UndrawGrades.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawGrades.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawGrades;