react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
380 lines (375 loc) • 11.5 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawFastLoading = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="f130f8b3-b494-408e-9d23-4781bd978d43"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 942 745.6"
>
<defs>
<linearGradient
id="19dcf708-dd5c-44ad-a611-182aebfaf3c5"
x1={219.48}
y1={505.38}
x2={219.48}
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="fbcf3902-941f-4a87-a568-e80fc50a1800"
x1={425.02}
y1={459.78}
x2={425.02}
y2={162.72}
xlinkHref="#19dcf708-dd5c-44ad-a611-182aebfaf3c5"
/>
<linearGradient
id="34819b51-4aee-4e46-acb4-23489a509fb6"
x1={600}
y1={824.36}
x2={600}
y2={334.87}
xlinkHref="#19dcf708-dd5c-44ad-a611-182aebfaf3c5"
/>
<linearGradient
id="cc414fb6-c720-43be-8b52-f04b3df2ea53"
x1={617.59}
y1={479.82}
x2={617.59}
y2={137.05}
xlinkHref="#19dcf708-dd5c-44ad-a611-182aebfaf3c5"
/>
</defs>
<title>fast loading</title>
<g opacity={0.5}>
<rect
x={52.32}
width={334.33}
height={505.38}
rx={4.5}
ry={4.5}
fill="url(#19dcf708-dd5c-44ad-a611-182aebfaf3c5)"
/>
</g>
<rect
x={56.6}
y={3.71}
width={325.76}
height={495.16}
rx={4.5}
ry={4.5}
fill="#f2f2f2"
/>
<g opacity={0.5}>
<rect
x={89.18}
y={94.93}
width={65.15}
height={58.64}
rx={4.5}
ry={4.5}
fill={props.primaryColor}
/>
</g>
<rect
x={173.88}
y={94.93}
width={175.91}
height={6.52}
rx={2.82}
ry={2.82}
fill="#e0e0e0"
/>
<rect
x={173.88}
y={114.47}
width={146.23}
height={6.52}
rx={2.82}
ry={2.82}
fill="#e0e0e0"
/>
<g opacity={0.5}>
<rect
x={89.18}
y={186.14}
width={65.15}
height={58.64}
rx={4.5}
ry={4.5}
fill={props.primaryColor}
/>
</g>
<rect
x={173.88}
y={186.14}
width={175.91}
height={6.52}
rx={2.82}
ry={2.82}
fill="#e0e0e0"
/>
<rect
x={173.88}
y={205.68}
width={175.91}
height={6.52}
rx={2.82}
ry={2.82}
fill="#e0e0e0"
/>
<g opacity={0.5}>
<rect
x={89.18}
y={277.35}
width={65.15}
height={58.64}
rx={4.5}
ry={4.5}
fill={props.primaryColor}
/>
</g>
<rect
x={173.88}
y={277.35}
width={175.91}
height={6.52}
rx={2.82}
ry={2.82}
fill="#e0e0e0"
/>
<rect
x={173.88}
y={296.9}
width={19.55}
height={6.52}
rx={2.82}
ry={2.82}
fill="#e0e0e0"
/>
<g opacity={0.5}>
<rect
x={260.36}
y={162.72}
width={329.32}
height={297.06}
rx={4.5}
ry={4.5}
fill="url(#fbcf3902-941f-4a87-a568-e80fc50a1800)"
/>
</g>
<rect
x={265.45}
y={165.7}
width={319.7}
height={287.73}
rx={4.5}
ry={4.5}
fill="#fff"
/>
<g opacity={0.5}>
<rect
x={296.84}
y={227.52}
width={68.69}
height={61.82}
rx={4.5}
ry={4.5}
fill={props.primaryColor}
/>
</g>
<rect
x={386.14}
y={227.52}
width={185.46}
height={6.87}
rx={2.98}
ry={2.98}
fill="#e0e0e0"
/>
<rect
x={386.14}
y={248.13}
width={185.46}
height={6.87}
rx={2.98}
ry={2.98}
fill="#e0e0e0"
/>
<rect
x={289.97}
y={322.92}
width={281.63}
height={6.87}
rx={2.98}
ry={2.98}
fill="#e0e0e0"
/>
<rect
x={289.97}
y={343.53}
width={281.63}
height={6.87}
rx={2.98}
ry={2.98}
fill="#e0e0e0"
/>
<rect
x={289.97}
y={371}
width={281.63}
height={6.87}
rx={2.98}
ry={2.98}
fill="#e0e0e0"
/>
<rect
x={289.97}
y={391.61}
width={212.94}
height={6.87}
rx={2.98}
ry={2.98}
fill="#e0e0e0"
/>
<g opacity={0.5}>
<path
d="M726.64,352.64h0l1.17-5.22-1.64,5.1a510.06,510.06,0,0,0-130.8-17.64C277.05,333,129,614.33,129,614.33L430.66,773.49s37-114.74,168.41-111a226.18,226.18,0,0,1,27,2.36L586.09,789.38a22.2,22.2,0,1,0,37.07,24.4h0l0-.06a22.07,22.07,0,0,0,3.27-11.2c0-.67,0-1.34-.07-2l28.9-129.14c86.1,26.48,112.19,102.1,112.19,102.1L1071,621.73S957,415.2,726.64,352.64Z"
transform="translate(-129 -78.76)"
fill="url(#34819b51-4aee-4e46-acb4-23489a509fb6)"
/>
</g>
<path
d="M595.43,338C281.17,336.17,135,613.89,135,613.89L432.82,771s36.54-113.28,166.27-109.63a223.22,223.22,0,0,1,27.29,2.42L725,355.54A503.55,503.55,0,0,0,595.43,338Z"
transform="translate(-129 -78.76)"
fill={props.primaryColor}
/>
<path
d="M725,355.54,626.38,663.82C734,680.17,765.35,771,765.35,771L1065,621.2S952.41,417.3,725,355.54Z"
transform="translate(-129 -78.76)"
fill="#e0e0e0"
/>
<path
d="M626.06,797.71,726.18,350.38,586.26,786.71a21.92,21.92,0,1,0,36.59,24.09h0v-.06a21.79,21.79,0,0,0,3.23-11.05C626.14,799,626.11,798.36,626.06,797.71Z"
transform="translate(-129 -78.76)"
fill="#535461"
/>
<g opacity={0.7}>
<path
d="M662.25,337.47l-2.62-.49,5.17-19c8.14-61-22.61-67.19-34.14-67.4a37.91,37.91,0,0,0-4.05-1.23v-7.2a38.22,38.22,0,0,0,28.55-30.86h.1c1.83,0,3.32-2.79,3.32-6.23a8.64,8.64,0,0,0-1.45-5.14q.2-2,.2-4A39.72,39.72,0,0,0,645,167.13a25.6,25.6,0,0,0-2.82-7.58c-2.83-5-7.54-10.18-5.62-15.59l-12.43,1.28-.12-8.19c-3.88.7-5.51,5.19-7.81,8.39-5.54,7.7-16.65,8.77-24,14.77-2.5,2-8.12,8.24-7.05,12.31a39.66,39.66,0,0,0-7.58,23.37q0,2,.2,4a8.64,8.64,0,0,0-1.45,5.14c0,3.44,1.49,6.23,3.32,6.23h.1a38.22,38.22,0,0,0,28.55,30.86v7.2a37.91,37.91,0,0,0-4.05,1.23c-11.53.21-42.28,6.36-34.14,67.4l5.17,19-1.23.23a14.17,14.17,0,0,0-11.33,16.53L583.14,462.9a4.29,4.29,0,0,0,5,3.43l3.59-.67v2.12a11.92,11.92,0,0,0-6.64,10.68v1.35h24.08v-1.35a11.92,11.92,0,0,0-5.81-10.23v-4.75l3.28-.61a4.29,4.29,0,0,0,3.43-5L590.93,355.29H644L624.88,457.88a4.29,4.29,0,0,0,3.43,5l3.28.61v4.75a11.92,11.92,0,0,0-5.81,10.23v1.35h24.08v-1.35a11.92,11.92,0,0,0-6.64-10.68v-2.12l3.59.67a4.29,4.29,0,0,0,5-3.43l20.64-110.56A12.75,12.75,0,0,0,662.25,337.47Z"
transform="translate(-129 -78.76)"
fill="url(#cc414fb6-c720-43be-8b52-f04b3df2ea53)"
/>
</g>
<rect x={463.72} y={373} width={11.18} height={15.18} fill="#fdb797" />
<rect x={502.06} y={373} width={11.18} height={15.18} fill="#fdb797" />
<rect x={451.74} y={248.4} width={73.49} height={26.36} fill="#4d8af0" />
<g opacity={0.05}>
<rect x={451.74} y={248.4} width={73.49} height={26.36} />
</g>
<path
d="M580.74,331.95s27.42,6.39,36.74,6.39,36.74-6.39,36.74-6.39v-4H580.74Z"
transform="translate(-129 -78.76)"
opacity={0.1}
/>
<path
d="M654.22,331.15s-27.42,6.39-36.74,6.39-36.74-6.39-36.74-6.39V287.22a36.74,36.74,0,0,1,36.74-36.74h0a36.74,36.74,0,0,1,36.74,36.74Z"
transform="translate(-129 -78.76)"
fill="#f55f44"
/>
<path
d="M479.7,153.34h17.57a0,0,0,0,1,0,0v21.14a7.61,7.61,0,0,1-7.61,7.61h-2.34a7.61,7.61,0,0,1-7.61-7.61V153.34A0,0,0,0,1,479.7,153.34Z"
fill="#fdb797"
/>
<path
d="M606,457.22l-15.75,2.94a5.17,5.17,0,0,1-6-4.13L565.47,355.39a17.06,17.06,0,0,1,13.64-19.91l4.06-.76a5.17,5.17,0,0,1,6,4.13l21,112.33A5.17,5.17,0,0,1,606,457.22Z"
transform="translate(-129 -78.76)"
fill="#4d8af0"
/>
<path
d="M628.92,457.22l15.75,2.94a5.17,5.17,0,0,0,6-4.13l19.1-102.32a15.36,15.36,0,0,0-12.28-17.91l-5.74-1.07a5.17,5.17,0,0,0-6,4.13l-21,112.33A5.17,5.17,0,0,0,628.92,457.22Z"
transform="translate(-129 -78.76)"
fill="#4d8af0"
/>
<path
d="M608.7,245.42a36.77,36.77,0,0,0,17.57,0V232.9H608.7Z"
transform="translate(-129 -78.76)"
opacity={0.1}
/>
<circle cx={488.48} cy={121.39} r={38.34} fill="#333" />
<circle cx={488.48} cy={130.18} r={36.74} fill="#fdb797" />
<path
d="M593.22,165.82c7.07-5.77,17.76-6.8,23.08-14.21,2.21-3.08,3.78-7.41,7.51-8.08l.11,7.88,12-1.23c-1.85,5.2,2.68,10.2,5.41,15a24.66,24.66,0,0,1,3.19,11.61c-4.15,2.49-9.3-.23-13.92-1.68s-9.27-1.56-14-1.69a29.05,29.05,0,0,0-7.22.4,36.41,36.41,0,0,0-6,2.19c-3.18,1.33-13.23,6.36-16.18,3.12C583.88,175.46,590.49,168.05,593.22,165.82Z"
transform="translate(-129 -78.76)"
fill="#333"
/>
<path
d="M595.22,190.51a16.85,16.85,0,0,0,6.5,2,57.24,57.24,0,0,0,27.89-3.13c1.46,3.69,5,6.23,8.79,7.43s7.81,1.26,11.78,1.32a4.36,4.36,0,0,0,2.53-.48c1.77-1.19.91-3.93-.12-5.79l-5.12-9.28c-1.51-2.74-3.07-5.54-5.41-7.61-2.94-2.6-6.84-3.82-10.68-4.59a60.24,60.24,0,0,0-27.42.91C594.39,173.82,582.1,182.57,595.22,190.51Z"
transform="translate(-129 -78.76)"
opacity={0.1}
/>
<path
d="M595.22,189.71a16.85,16.85,0,0,0,6.5,2,57.24,57.24,0,0,0,27.89-3.13c1.46,3.69,5,6.23,8.79,7.43s7.81,1.26,11.78,1.32a4.36,4.36,0,0,0,2.53-.48c1.77-1.19.91-3.93-.12-5.79l-5.12-9.28c-1.51-2.74-3.07-5.54-5.41-7.61-2.94-2.6-6.84-3.82-10.68-4.59a60.24,60.24,0,0,0-27.42.91C594.39,173,582.1,181.78,595.22,189.71Z"
transform="translate(-129 -78.76)"
fill="#333"
/>
<ellipse cx={524.83} cy={130.18} rx={3.2} ry={5.99} fill="#fdb797" />
<ellipse cx={452.14} cy={130.18} rx={3.2} ry={5.99} fill="#fdb797" />
<path
d="M608.84,252.92s-46.48-7.24-36.89,64.65l5.59,20.61,16-.64s-10.38-24-4-39.94S608.84,252.92,608.84,252.92Z"
transform="translate(-129 -78.76)"
fill="#f55f44"
/>
<path
d="M626.12,252.92s46.48-7.24,36.89,64.65l-5.59,20.61-16-.64s10.38-24,4-39.94S626.12,252.92,626.12,252.92Z"
transform="translate(-129 -78.76)"
fill="#f55f44"
/>
<circle cx={457.33} cy={261.97} r={8.79} fill="#fdb797" />
<circle cx={521.23} cy={261.97} r={8.79} fill="#fdb797" />
<path
d="M467.37,381.79h3.09a10,10,0,0,1,10,10v2.74a0,0,0,0,1,0,0H457.33a0,0,0,0,1,0,0v-2.74A10,10,0,0,1,467.37,381.79Z"
fill="#333"
/>
<path
d="M506.51,381.79h3.09a10,10,0,0,1,10,10v2.74a0,0,0,0,1,0,0H496.47a0,0,0,0,1,0,0v-2.74A10,10,0,0,1,506.51,381.79Z"
fill="#333"
/>
<path
d="M588.73,291.21s-3.2,16.77,2.4,24"
transform="translate(-129 -78.76)"
opacity={0.1}
/>
<path
d="M646.24,291.21s3.2,16.77-2.4,24"
transform="translate(-129 -78.76)"
opacity={0.1}
/>
</svg>
);
UndrawFastLoading.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawFastLoading.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawFastLoading;