react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
541 lines (536 loc) • 23.2 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawJavascriptFrameworks = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="b12601fe-d580-4c34-96ea-fd9385fd61ef"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 787.17 730"
>
<defs>
<linearGradient
id="0f843176-b155-4fd0-ad57-11e95e0d789d"
x1={278.97}
y1={470.3}
x2={278.97}
y2={199.62}
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="25f5d4d7-cd88-442e-9614-80d1ddfb8612"
x1={191.8}
y1={163.04}
x2={191.8}
y2={0}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="994fa9eb-1693-4991-8760-1e03fe752962"
x1={563.67}
y1={215.47}
x2={563.67}
y2={0.88}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="11927ac3-0739-4a99-9ed0-6bb4e544147b"
x1={639.88}
y1={470.3}
x2={639.88}
y2={255.7}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="205a7b6f-1347-48e6-a8d8-e62e9371faf5"
x1={453.7}
y1={780.9}
x2={453.7}
y2={650.04}
gradientTransform="matrix(-1, 0, 0, 1, 1039.58, -85)"
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="9674bae8-dc38-457d-aad2-1ca172fa4fcf"
x1={488.73}
y1={780.9}
x2={488.73}
y2={650.04}
gradientTransform="matrix(-1, 0, 0, 1, 1039.58, -85)"
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="670f9f66-abdf-4e55-863b-c6ae298f92c6"
x1={259.49}
y1={698.31}
x2={357.92}
y2={698.31}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="aad0c709-f161-4bb9-b7fa-8d1ad7b6cda8"
x1={235.32}
y1={696.9}
x2={235.32}
y2={566.04}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="e84a48bf-de2b-4246-a228-e2ada8fb5abc"
x1={270.35}
y1={696.9}
x2={270.35}
y2={566.04}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="4ed2ee33-f415-4877-af32-9a88ff255f81"
x1={319.81}
y1={696.88}
x2={319.81}
y2={561.94}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
<linearGradient
id="e17f2bcd-7998-4191-810d-7026902eea9f"
x1={840.16}
y1={682.09}
x2={972.2}
y2={682.09}
xlinkHref="#0f843176-b155-4fd0-ad57-11e95e0d789d"
/>
</defs>
<title>JavaScript Frameworks</title>
<rect
x={136.93}
y={199.62}
width={284.09}
height={270.68}
fill="url(#0f843176-b155-4fd0-ad57-11e95e0d789d)"
/>
<rect x={143.02} y={205.71} width={271.9} height={258.49} fill="#fff" />
<rect x={152.78} y={215.47} width={252.39} height={238.98} fill={props.primaryColor} />
<path
d="M531.58,353.55h30.8l-77,132.81-77-132.81h58.9l18.09,30.8,17.71-30.8Z"
transform="translate(-206.42 -85)"
fill="#41b883"
/>
<path
d="M408.4,353.55l77,132.81,77-132.81h-30.8l-46.2,79.69-46.58-79.69Z"
transform="translate(-206.42 -85)"
fill="#41b883"
/>
<path
d="M438.81,353.55l46.58,80.07,46.2-80.07H503.1l-17.71,30.8-18.09-30.8Z"
transform="translate(-206.42 -85)"
fill="#35495e"
/>
<g opacity={0.5}>
<rect
x={5.25}
width={373.1}
height={163.04}
fill="url(#25f5d4d7-cd88-442e-9614-80d1ddfb8612)"
/>
</g>
<rect x={10.12} y={2.09} width={363.34} height={156.07} fill="#fff" />
<rect x={20.56} y={11.85} width={342.46} height={136.56} fill={props.primaryColor} />
<path
d="M511,141.7l10.26.06-20.63,28A12,12,0,0,0,499,172a52,52,0,0,0-2,7.32l-9.39,0s1.46-5.24,1.4-8c-.05-2.44-1.3-4.87-2-7.32s-1.66-7.32-1.66-7.32H495l1.33,5.32L511,141.7"
transform="translate(-206.42 -85)"
fill="#fff"
/>
<path
d="M491.56,147.15c1.89,1.14,3.06,7.44,3.06,7.44s-9.91.15-15.3.15h-4.66L469,179.36h-8.65s5.38-26.76,6.66-31.61c.41-1.57,2.82-1.3,6.89-1.3h6.5c4.2,0,9.1-.54,11.16.71m-40.28,12a5.19,5.19,0,0,0-.91-3.41c-1-1.56-1.95-1.92-4.61-2-7.52-.24-7.37,5.33-7.37,5.33Zm8.15-6.38c1.1,4-1,13.31-1,13.31s-11-.18-17,0c-1.87.06-4.1-.2-4.66.67-.78,1.22.29,3.09,1.19,3.88s3.07,1,3.8,1.11c4.87.62,15.08.16,15.08.16l-1.77,7.83s-14.42.72-21.63-1a7.34,7.34,0,0,1-3.66-2c-.25-.27-.46-.63-.69-.94a8.75,8.75,0,0,1-1-1.72c-1.65-4.39.19-12.8,2-17.3.21-.52.47-1.18.75-1.75s.64-1.49.91-1.91.42-.48.61-.75a11.17,11.17,0,0,1,.72-.91,13.71,13.71,0,0,1,2.33-2c3-2.25,8.44-4,15-3.33,2.46.25,6.17,1.13,8,3.66a11.17,11.17,0,0,1,1,3Zm-39.68-6.35,8.39,0s-4.68,22.18-7.06,33h-9.65c-6.74,0-12.75.84-15.31-4s-.11-12.4,1-17.64c.79-3.71,2.44-11.28,2.44-11.28l8.69-.08s-2.46,11.8-3.48,17.69c-.37,2.11-1.12,4.1-.33,5.66s1.8,1.59,5,1.66c1,0,4.33,0,4.33,0l6-25m-39.27,16c.88-3.12,2.16-6.5,2-9.32a8,8,0,0,0-4.33-6.32,11.08,11.08,0,0,0-11.31,2.66c-2.36,2.56-3.16,5.54-4,9.65-.62,3.05-1.13,6.27,0,8.65,2,4.21,8.25,3.29,15,3.33,1-2.68,1.82-5.68,2.66-8.65Zm11.65-12.31c1,7-2.72,14.66-5.25,21.35,2.58.23,4.85,0,5,.16s-1.73,8-2.39,8c-2,.05-8.84.11-11.67.11-9.24,0-17.89.6-22.29-4a14.49,14.49,0,0,1-3.33-7.32,31,31,0,0,1,1-11.31,34.24,34.24,0,0,1,3.33-8.65c3.88-6.78,10.64-11.81,22-10.65a21.09,21.09,0,0,1,7.32,2.33c.14.08.61.46.72.53,2.66,1.69,5.09,5.74,5.6,9.46Zm-40.89-3.62c-.56,2.55-1.12,5.43-1.71,7.95h-9.32c.72-2.79,1.27-5.56,2-8,3,0,5.75,0,9,0M339.9,156.73h9c-1.17,6.5-3.5,17-5.32,24.29-1.14,4.57-1.9,7.9-5,10.32-.28.22-.44.11-.67.33-.57.54-3.2,1.17-4.66,1.33a67,67,0,0,1-8,0c.76-2.79,1.62-6.13,2.3-8.63,7.1.86,7.28-5.85,8.65-12.31.8-3.73,3.2-13.81,3.66-15.31"
transform="translate(-206.42 -85)"
fill="#fff"
/>
<path
d="M318.93,173.7l-.19.5c-3.28,6.39-9.09,10.31-17.39,10.48a24.31,24.31,0,0,1-10-2,25.79,25.79,0,0,1-12-11.31c-3.43-6.65-4-15.89,3.08-22.79.11,0-.87,1.5-.76,1.5l-.2.64c-5.14,16.1,10.7,29.89,26.09,28.31a20.22,20.22,0,0,0,11.31-5.32"
transform="translate(-206.42 -85)"
fill="#21609b"
/>
<path
d="M309.61,167a14.73,14.73,0,0,0,10.32-4.33c-2.1,5.32-8.17,8.74-16.3,7.65-6.82-.91-13.31-7.77-14-14.64-.49-5,1.25-8,4.13-11.61a12.15,12.15,0,0,0-1.46,4.29C291.22,159.23,301,167,309.61,167"
transform="translate(-206.42 -85)"
fill="#21609b"
/>
<path
d="M319.54,153.61c-.6,1.38-4.07,4-5.6,4.32-6.06,1.29-9.95-1.58-12-4.85a15,15,0,0,1-1-2.16c-.79-2.68-.43-6.74,1.93-8.84a11,11,0,0,0-.44,5.82,12.93,12.93,0,0,0,1.6,3.5,9.22,9.22,0,0,0,3.66,3.23,9.71,9.71,0,0,0,1.84.88c1.53.45,4.75,1.63,9.95-1.9"
transform="translate(-206.42 -85)"
fill="#21609b"
/>
<rect
x={456.38}
y={0.88}
width={214.59}
height={214.59}
fill="url(#994fa9eb-1693-4991-8760-1e03fe752962)"
/>
<rect x={462.47} y={6.97} width={202.4} height={202.4} fill="#fff" />
<rect x={472.23} y={16.73} width={182.89} height={182.89} fill={props.primaryColor} />
<path
d="M704.14,154.52,770.19,131,838,154.1,827,241.5,770.19,273l-56-31.07Z"
transform="translate(-206.42 -85)"
fill="#e23237"
/>
<path
d="M838,154.1,770.19,131V273L827,241.55l11-87.44Z"
transform="translate(-206.42 -85)"
fill="#b52e31"
/>
<path
d="M770.29,147.57l-41.16,91.58,15.38-.26,8.26-20.66H789.7l9,20.92,14.7.26-43.15-91.84Zm.11,29.34L784.31,206H758.16l12.24-29.08Z"
transform="translate(-206.42 -85)"
fill="#fff"
/>
<rect
x={497.83}
y={255.7}
width={284.09}
height={214.59}
fill="url(#11927ac3-0739-4a99-9ed0-6bb4e544147b)"
/>
<rect x={503.93} y={261.8} width={271.9} height={202.4} fill="#fff" />
<rect x={513.68} y={271.55} width={252.39} height={182.89} fill={props.primaryColor} />
<path
d="M770.2,447.59c0,11.57,11.23,22.41,29,28.55-3.61,17.89-.74,32.34,9,38,10,5.81,24.95,1.86,39.16-10.49,13.78,11.93,27.72,16.66,37.48,11,10-5.77,13.13-21.17,9.53-39.64,18.57-6.07,29-15.25,29-27,0-11.3-11.25-21.11-28.8-27.22,4-19.22.71-33.31-9.43-39.2-9.77-5.68-23.91-.8-38,11.35-14.54-13-28.52-17-38.68-11.15-9.8,5.63-12.64,20.32-9.13,38.57C782.16,426.37,770.23,436.33,770.2,447.59Z"
transform="translate(-206.42 -85)"
fill="#fff"
/>
<path
d="M890.86,426.85q-2.17-.75-4.38-1.39.37-1.49.69-3c3.37-16.08,1.24-29.06-6.15-33.35-7.08-4.12-18.71.12-30.46,10.28q-1.74,1.51-3.4,3.1-1.1-1.07-2.25-2.09c-12.25-10.95-24.55-15.58-32-11.33-7.1,4.08-9.24,16.26-6.31,31.53q.44,2.27,1,4.51c-1.74.49-3.43,1-5,1.57-14.42,5-23.64,12.82-23.67,21,0,8.43,9.82,16.92,24.81,22.1q1.82.63,3.68,1.16-.61,2.41-1.08,4.85c-2.89,15-.71,26.89,6.35,31,7.29,4.24,19.56-.06,31.54-10.45q1.42-1.23,2.85-2.61,1.79,1.73,3.67,3.37c11.53,10,22.94,14,30,10,7.31-4.2,9.72-17,6.69-32.54q-.35-1.78-.8-3.64,1.29-.38,2.53-.78C904.78,465,915,456.65,915,448.1c0-8.19-9.44-16.15-24.12-21.25Z"
transform="translate(-206.42 -85)"
fill="#53c1de"
/>
<path
d="M887.35,464.57c-.74.24-1.51.48-2.29.71A136.42,136.42,0,0,0,878.23,448a136.36,136.36,0,0,0,6.68-17c1.39.41,2.74.84,4,1.29,12.58,4.37,20.24,10.81,20.22,15.74,0,5.26-8.33,12.06-21.81,16.48Zm-5.62,11.06c1.34,6.88,1.51,13.1.6,18-.82,4.37-2.46,7.27-4.48,8.43-4.3,2.47-13.46-.79-23.32-9.33q-1.7-1.47-3.41-3.13a136.59,136.59,0,0,0,11.45-14.45A135.68,135.68,0,0,0,881,472.33q.41,1.68.73,3.29Zm-56.59,25.8c-4.19,1.47-7.53,1.5-9.54.33-4.28-2.49-6-12-3.56-24.86q.44-2.27,1-4.51a136.68,136.68,0,0,0,18.33,2.71A141.44,141.44,0,0,0,843,489.55q-1.27,1.22-2.6,2.38c-5.29,4.6-10.59,7.85-15.26,9.49Zm-19.51-37.14c-6.63-2.29-12.1-5.25-15.84-8.48-3.37-2.9-5.06-5.78-5.05-8.1,0-5,7.42-11.25,19.75-15.51q2.32-.8,4.69-1.46a139.4,139.4,0,0,0,6.58,17.2A141.51,141.51,0,0,0,809,465.34Q807.29,464.85,805.63,464.27Zm6.72-44.76c-2.52-13.08-.79-22.93,3.49-25.39,4.56-2.62,14.61,1.17,25.19,10.62.68.6,1.36,1.24,2,1.89a139.29,139.29,0,0,0-11.64,14.31,142,142,0,0,0-18.16,2.76q-.51-2.09-.92-4.2ZM871,434.19q-2-3.45-4.12-6.82c4.34.56,8.5,1.3,12.4,2.21a124,124,0,0,1-4.39,11.7Q873,437.7,871,434.19ZM847.13,410.8a124.3,124.3,0,0,1,8,9.69q-8-.41-16.08-.05c2.65-3.48,5.37-6.71,8.1-9.64ZM823,434.08q-2,3.47-3.86,7c-1.68-4-3.12-8-4.29-11.79,3.88-.86,8-1.55,12.34-2.08Q825,430.61,823,434.08Zm4.19,34.75a123.76,123.76,0,0,1-12.53-2.06c1.21-3.88,2.71-7.9,4.45-12q1.83,3.57,3.84,7.05T827.16,468.83Zm19.9,16.56c-2.75-3-5.48-6.28-8.16-9.82q3.91.17,8,.18t8.21-.16A123.6,123.6,0,0,1,847.06,485.38Zm27.84-30.64a123.44,123.44,0,0,1,4.53,12,123.35,123.35,0,0,1-12.7,2.12q2.17-3.41,4.2-6.91t4-7.2Zm-9,4.28q-3.11,5.36-6.56,10.51c-4,.28-8.21.41-12.46.4s-8.35-.16-12.32-.43q-3.51-5.16-6.62-10.57t-5.77-11q2.7-5.58,5.82-11h0q3.11-5.36,6.63-10.48c4-.29,8.2-.44,12.39-.43s8.37.19,12.41.51q3.45,5.13,6.52,10.49T871.78,448q-2.74,5.6-5.88,11Zm12.2-64.87c4.55,2.64,6.29,13.24,3.38,27.13q-.29,1.36-.62,2.7a139.24,139.24,0,0,0-18.18-2.93,136.54,136.54,0,0,0-11.46-14.39q1.53-1.47,3.14-2.86c10.07-8.71,19.47-12.13,23.74-9.65Z"
transform="translate(-206.42 -85)"
fill="#fff"
/>
<path
d="M847,435.74a12.15,12.15,0,1,1-12.19,12.11A12.15,12.15,0,0,1,847,435.74"
transform="translate(-206.42 -85)"
fill="#53c1de"
/>
<g opacity={0.7}>
<g opacity={0.1}>
<polygon
points="602.37 565.04 602.37 583.59 602.37 589.77 602.37 672.2 602.37 678.39 602.37 695.9 577.64 695.9 569.4 695.9 569.4 678.39 569.4 672.2 569.4 589.77 569.4 583.59 569.4 565.04 577.64 565.04 602.37 565.04"
fill="url(#205a7b6f-1347-48e6-a8d8-e62e9371faf5)"
/>
</g>
<g opacity={0.1}>
<polygon
points="567.34 565.04 567.34 583.59 567.34 589.77 567.34 672.2 567.34 678.39 567.34 695.9 542.61 695.9 534.36 695.9 534.36 678.39 534.36 672.2 534.36 589.77 534.36 583.59 534.36 565.04 542.61 565.04 567.34 565.04"
fill="url(#9674bae8-dc38-457d-aad2-1ca172fa4fcf)"
/>
</g>
</g>
<g opacity={0.7}>
<path
d="M357.33,674.11a19.11,19.11,0,0,0-7.58-20.26,56.45,56.45,0,0,1-5.08-3.28c-2.57-2.16-4-5.35-5.09-8.53-2.54-7.64-3.34-16.2-7.8-23.1-4.06-6.28-12-8.12-19-8.74-2.55-.23-5.23-.35-7.57.71-3.91,1.77-5.77,6.38-5.94,10.66s.94,8.51,1.22,12.79-.48,9-3.64,11.88-7.68,3.24-11.86,3.82a78.55,78.55,0,0,0-16.08,4c-4.37,1.59-9.23,4.46-9.44,9.1-.17,3.8,2.89,6.82,5.2,9.84,4.3,5.65,6.45,13.09,5,20s-6.45,13.14-7.35,20.3a8.81,8.81,0,0,0,.72,5.36,9.81,9.81,0,0,0,2.72,2.88c2.7,2.09,5.71,3.76,8.26,6,5.32,4.71,8.21,11.56,10.43,18.32.21.65.4,1.31.61,2h-5.23a19.41,19.41,0,0,0-19.36,19.36h0a19.41,19.41,0,0,0,19.36,19.36H332.1a19.41,19.41,0,0,0,19.36-19.36h0a19.41,19.41,0,0,0-19.36-19.36H317.77c3.39-4.54,6.93-8.8,12.16-10.55s11.56-.72,15.66-4.37a12.27,12.27,0,0,0,3.55-7A21,21,0,0,0,346.85,712c-1.65-2.94-4.06-5.61-4.58-8.94-.45-2.85.58-5.73,2-8.25C348.2,687.61,355.19,682,357.33,674.11Z"
transform="translate(-206.42 -85)"
fill="url(#670f9f66-abdf-4e55-863b-c6ae298f92c6)"
/>
</g>
<path
d="M312.62,614.39c-2.43-.22-5-.33-7.21.68-3.72,1.68-5.49,6.08-5.66,10.16s.9,8.1,1.16,12.18-.46,8.56-3.47,11.32-7.31,3.09-11.3,3.64a74.8,74.8,0,0,0-15.31,3.8c-4.16,1.51-8.79,4.25-9,8.67-.16,3.61,2.76,6.5,4.95,9.38,4.1,5.38,6.14,12.47,4.75,19.09s-6.14,12.51-7,19.33a8.39,8.39,0,0,0,.69,5.11,9.34,9.34,0,0,0,2.59,2.74c2.57,2,5.44,3.58,7.87,5.73,5.07,4.49,7.81,11,9.93,17.44A141.28,141.28,0,0,1,290.5,763c4.37-2.81,10-2.77,14.68-5.05,9.93-4.87,13.26-19,23.74-22.47,5-1.66,11-.69,14.91-4.16a11.69,11.69,0,0,0,3.38-6.7A20,20,0,0,0,345,711.35c-1.57-2.8-3.86-5.34-4.36-8.51-.43-2.71.56-5.46,1.88-7.86,3.77-6.85,10.43-12.16,12.46-19.71A18.2,18.2,0,0,0,347.79,656a53.76,53.76,0,0,1-4.83-3.13c-2.44-2.06-3.84-5.09-4.85-8.13-2.42-7.27-3.19-15.43-7.43-22C326.81,616.74,319.29,615,312.62,614.39Z"
transform="translate(-206.42 -85)"
fill="#4db6ac"
/>
<path
d="M312.55,614.64s9.22,123.5-14.75,144.7"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.6}
/>
<rect
x={56.36}
y={660.52}
width={86.64}
height={36.87}
rx={14.3}
ry={14.3}
fill={props.primaryColor}
/>
<path
d="M261.86,662.57s23.56-2.75,52.33,14.75"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.6}
/>
<path
d="M313.73,692.06a60.88,60.88,0,0,1,41.21-25.8"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.6}
/>
<path
d="M264.16,712.8s32.66-5.54,47.67,3.68"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.6}
/>
<path
d="M310,729.15s17.1-7.76,36.33-1.46"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.6}
/>
<g opacity={0.7}>
<g opacity={0.1}>
<polygon
points="218.83 566.04 218.83 584.59 218.83 590.77 218.83 673.2 218.83 679.39 218.83 696.9 243.56 696.9 251.81 696.9 251.81 679.39 251.81 673.2 251.81 590.77 251.81 584.59 251.81 566.04 243.56 566.04 218.83 566.04"
fill="url(#aad0c709-f161-4bb9-b7fa-8d1ad7b6cda8)"
/>
</g>
<g opacity={0.1}>
<polygon
points="253.87 566.04 253.87 584.59 253.87 590.77 253.87 673.2 253.87 679.39 253.87 696.9 278.6 696.9 286.84 696.9 286.84 679.39 286.84 673.2 286.84 590.77 286.84 584.59 286.84 566.04 278.6 566.04 253.87 566.04"
fill="url(#e84a48bf-de2b-4246-a228-e2ada8fb5abc)"
/>
</g>
<g opacity={0.1}>
<polygon
points="352.6 688.38 325.25 585.84 325.25 585.84 323.66 579.87 323.66 579.87 318.88 561.94 287.02 570.44 291.8 588.36 291.8 588.36 293.07 593.12 314.63 673.98 314.63 673.98 316.23 679.96 316.23 679.96 320.74 696.88 352.6 688.38"
fill="url(#4ed2ee33-f415-4877-af32-9a88ff255f81)"
/>
</g>
</g>
<rect x={222.21} y={569.24} width={31.31} height={124.26} fill="#535461" />
<rect x={222.21} y={586.85} width={31.31} height={5.87} fill={props.primaryColor} />
<rect x={222.21} y={670.99} width={31.31} height={5.87} fill={props.primaryColor} />
<rect x={245.69} y={569.24} width={7.83} height={124.26} opacity={0.1} />
<rect x={255.47} y={569.24} width={31.31} height={124.26} fill="#535461" />
<rect x={255.47} y={586.85} width={31.31} height={5.87} fill={props.primaryColor} />
<rect x={255.47} y={670.99} width={31.31} height={5.87} fill={props.primaryColor} />
<rect x={278.95} y={569.24} width={7.83} height={124.26} opacity={0.1} />
<rect
x={508.85}
y={652.28}
width={31.31}
height={124.26}
transform="translate(-372.81 74.3) rotate(-14.93)"
fill="#535461"
/>
<rect
x={498.14}
y={671.3}
width={31.31}
height={5.87}
transform="translate(-362.82 70.18) rotate(-14.93)"
fill={props.primaryColor}
/>
<rect
x={519.82}
y={752.6}
width={31.31}
height={5.87}
transform="translate(-383.03 78.51) rotate(-14.93)"
fill={props.primaryColor}
/>
<rect
x={531.94}
y={649.26}
width={7.83}
height={124.26}
transform="translate(-371.64 77.12) rotate(-14.93)"
opacity={0.1}
/>
<rect
x={773.28}
y={654.24}
width={31.31}
height={124.26}
transform="translate(1371.45 1347.74) rotate(-180)"
fill="#535461"
/>
<rect
x={773.28}
y={671.85}
width={31.31}
height={5.87}
transform="translate(1371.45 1264.58) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={773.28}
y={755.99}
width={31.31}
height={5.87}
transform="translate(1371.45 1432.86) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={773.28}
y={654.24}
width={7.83}
height={124.26}
transform="translate(1347.97 1347.74) rotate(-180)"
opacity={0.1}
/>
<rect
x={740.01}
y={654.24}
width={31.31}
height={124.26}
transform="translate(1304.92 1347.74) rotate(-180)"
fill="#535461"
/>
<rect
x={740.01}
y={671.85}
width={31.31}
height={5.87}
transform="translate(1304.92 1264.58) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={740.01}
y={755.99}
width={31.31}
height={5.87}
transform="translate(1304.92 1432.86) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={740.01}
y={654.24}
width={7.83}
height={124.26}
transform="translate(1281.44 1347.74) rotate(-180)"
opacity={0.1}
/>
<g opacity={0.7}>
<path
d="M964.86,721.52H908.94l.74-6.29c15.8-14.18,26-52,26-52a5.23,5.23,0,0,0-.67.14c-9.3,1.87-15.86,5.68-20.47,10.25l2-16.73c29.19-6.29,40.76-44.9,40.76-44.9-18.63,4.13-30.24,10.53-37.45,16.59L922.69,604c19.73,6.77,40.16-29.21,40.16-29.21l-.78-.16.38-.25-.58.21c-21.81-4.7-33.47,7.77-37.26,12.95l.28-2.41q-.87,2.28-1.68,4.54h0l0,.06q-2.28,6.28-4.24,12.4v0h0q-1.68,5.23-3.14,10.34v0s-.9-22-24.07-27.76c0,0,2.43,47.93,20.79,40.08h0c-1.7,6.92-3.12,13.64-4.29,20.13h0q-1.15,6.34-2,12.39l-.11.12.11-.09,0,.32v0h0q-.77,5.46-1.32,10.64c.36-6.65-.86-25.88-23.51-44,0,0-30.09,52.93,21.23,63.34l.34.29-.08-.24.47.1.21-2.72a285.24,285.24,0,0,0,.18,34.05h0c.05.78.11,1.54.16,2.28H847.39c-21.57,44.63,12,69.08,12,69.08h92.69C988,745.15,964.86,721.52,964.86,721.52ZM904.61,670.8h0v0Z"
transform="translate(-206.42 -85)"
fill="url(#e17f2bcd-7998-4191-810d-7026902eea9f)"
/>
</g>
<path
d="M905.8,738.47s-14.67-64.09,17.76-146.72"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
strokeWidth={3}
opacity={0.6}
/>
<path
d="M848.65,719.16H962.17s22.39,28.57-12.36,71H860.24S827.81,760.86,848.65,719.16Z"
transform="translate(-206.42 -85)"
fill={props.primaryColor}
/>
<path
d="M921.93,596s11.28-20.08,38.31-13.9c0,0-22.34,38-42.44,25.58Z"
transform="translate(-206.42 -85)"
fill="#4db6ac"
/>
<path
d="M914.77,617.3s-.87-20.53-23.26-25.94c0,0,2.35,44.79,20.09,37.45Z"
transform="translate(-206.42 -85)"
fill="#4db6ac"
/>
<path
d="M907.45,647.63s4.13-21.51,47.38-30.78c0,0-13.79,44.49-49.36,42.71Z"
transform="translate(-206.42 -85)"
fill="#4db6ac"
/>
<path
d="M904,671.77s4.55-22.49-22.48-43.34c0,0-29.37,49.93,21.22,59.33Z"
transform="translate(-206.42 -85)"
fill="#4db6ac"
/>
<path
d="M903.14,702.69S900,670.9,934,664.72c0,0-12.41,44.39-30.91,52.31Z"
transform="translate(-206.42 -85)"
fill="#4db6ac"
/>
<path
d="M918.15,608s29.34-22.39,41.7-26.25"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.3}
/>
<path
d="M905.41,659.32s35.52-37.84,49.42-42.47"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.3}
/>
<path
d="M891.51,591.37s21.62,29.34,20.08,37.07"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.3}
/>
<path
d="M881.47,628.43s11.58,52.51,20.85,59.46"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.3}
/>
<path
d="M903.09,717.23s18.53-51,30.89-52.51"
transform="translate(-206.42 -85)"
fill="none"
stroke="#535461"
strokeMiterlimit={10}
opacity={0.3}
/>
<g opacity={0.1}>
<path
d="M962.17,719.16H848.65c-.26.52-.5,1-.75,1.54H958.3s21.84,27.88-11.12,69.5h2.62C984.56,747.73,962.17,719.16,962.17,719.16Z"
transform="translate(-206.42 -85)"
/>
</g>
<rect y={692.4} width={787.17} height={26.68} fill="#e0e0e0" />
<rect x={33.35} y={719.08} width={720.46} height={10.92} fill="#e0e0e0" />
<rect x={33.35} y={719.08} width={720.46} height={3.64} opacity={0.1} />
</svg>
);
UndrawJavascriptFrameworks.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawJavascriptFrameworks.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawJavascriptFrameworks;