react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
467 lines (462 loc) • 16.6 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawSwipeProfiles = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="dee5f091-7f82-4933-86d1-b20eda2269df"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 945.76 774.02"
>
<defs>
<linearGradient
id="bdec97e1-73a0-4dcd-b2be-12860314d1eb"
x1={762.62}
y1={728.18}
x2={1047.15}
y2={56.3}
gradientTransform="translate(-13.63 -2.04) rotate(-0.14)"
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="b1089e02-1745-4f58-944f-b37988cc3676"
x1={894.5}
y1={336.85}
x2={894.5}
y2={132.23}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#bdec97e1-73a0-4dcd-b2be-12860314d1eb"
/>
<linearGradient
id="3a602410-16a1-4489-8868-738d38b9e229"
x1={-389.38}
y1={725.38}
x2={-104.84}
y2={53.5}
gradientTransform="matrix(-1, 0, 0, 1, 61.63, -2.04)"
xlinkHref="#bdec97e1-73a0-4dcd-b2be-12860314d1eb"
/>
<linearGradient
id="4d85006a-073b-4a8e-8d7d-f5f50f5693df"
x1={-257.5}
y1={336.85}
x2={-257.5}
y2={132.23}
gradientTransform="matrix(-1, 0, 0, 1, 48, 0)"
xlinkHref="#bdec97e1-73a0-4dcd-b2be-12860314d1eb"
/>
<linearGradient
id="5a2f83a6-bf7f-4026-9ed1-a487c8c8e296"
x1={469.32}
y1={851.47}
x2={753.85}
y2={179.59}
xlinkHref="#bdec97e1-73a0-4dcd-b2be-12860314d1eb"
/>
<linearGradient
id="9207eeb0-429a-4606-9083-b77d7bb2d95d"
x1={601.5}
y1={460.85}
x2={601.5}
y2={256.23}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#bdec97e1-73a0-4dcd-b2be-12860314d1eb"
/>
<linearGradient
id="e6257317-29c6-4e8d-a9d2-439d45dc50a1"
x1={531.38}
y1={640.9}
x2={531.38}
y2={532.9}
gradientTransform="matrix(1, 0, 0, 1, 0, 0)"
xlinkHref="#bdec97e1-73a0-4dcd-b2be-12860314d1eb"
/>
</defs>
<title>swipe profiles1</title>
<g opacity={0.5}>
<path
d="M1057.67,63l-332.5.81a13.66,13.66,0,0,0-13.63,13.69L713,699.38A13.66,13.66,0,0,0,726.75,713l332.5-.81a13.66,13.66,0,0,0,13.63-13.69l-1.51-621.89A13.66,13.66,0,0,0,1057.67,63Z"
transform="translate(-127.12 -62.99)"
fill="url(#bdec97e1-73a0-4dcd-b2be-12860314d1eb)"
/>
</g>
<rect
x={717.15}
y={71.88}
width={350.11}
height={631.95}
rx={13.64}
ry={13.64}
transform="translate(-128.06 -60.82) rotate(-0.14)"
fill="#fff"
/>
<path
id="03400db2-955d-4119-b6c0-e63250e8f2de"
data-name="<Path>"
d="M979.43,87.51a28.38,28.38,0,0,1-27.91,24.21L830.58,112a28.38,28.38,0,0,1-28-24.07l-64.05.16a13.3,13.3,0,0,0-13.27,13.33l1.39,573.67A13.3,13.3,0,0,0,740,688.36l306-.74a13.3,13.3,0,0,0,13.27-13.33l-1.39-573.67a13.3,13.3,0,0,0-13.33-13.27Z"
transform="translate(-127.12 -62.99)"
fill={props.primaryColor}
opacity={0.3}
/>
<g opacity={0.5}>
<path
d="M996.5,234.23a102,102,0,1,0-158.91,84.66l.06.45a34.91,34.91,0,0,0,11.57,7.36l.13-.45c4.77,4.1,24.88,10.66,48,10.6h.5c14.64,0,30.52-2.58,44.49-10.14,0,0,.12-.27.31-.77a36.34,36.34,0,0,0,9.62-6.59q.08-.58.16-1.16A101.89,101.89,0,0,0,996.5,234.23Z"
transform="translate(-127.12 -62.99)"
fill="url(#b1089e02-1745-4f58-944f-b37988cc3676)"
/>
</g>
<circle cx={767.38} cy={171.25} r={98.94} fill="#f5f5f5" />
<rect
x={849.32}
y={95.31}
width={78.02}
height={4.88}
rx={2}
ry={2}
transform="translate(-128.49 -49.63) rotate(-0.86)"
fill="#dbdbdb"
/>
<circle
cx={943.91}
cy={96.42}
r={2.93}
transform="translate(-128.46 -48.79) rotate(-0.86)"
fill="#dbdbdb"
/>
<rect x={680.38} y={309.9} width={162} height={18} fill="#f5f5f5" />
<rect x={644.38} y={345.9} width={234} height={18} fill="#f5f5f5" />
<g opacity={0.5}>
<path
d="M142.33,63l332.5.81a13.66,13.66,0,0,1,13.63,13.69L487,699.38A13.66,13.66,0,0,1,473.25,713l-332.5-.81a13.66,13.66,0,0,1-13.63-13.69l1.51-621.89A13.66,13.66,0,0,1,142.33,63Z"
transform="translate(-127.12 -62.99)"
fill="url(#3a602410-16a1-4489-8868-738d38b9e229)"
/>
</g>
<rect
x={132.74}
y={71.88}
width={350.11}
height={631.95}
rx={13.64}
ry={13.64}
transform="translate(487.52 713.46) rotate(-179.86)"
fill="#fff"
/>
<path
id="630d207c-7e3b-460e-9d0a-7242eec8ea7a"
data-name="<Path>"
d="M220.57,87.51a28.38,28.38,0,0,0,27.91,24.21l120.93.29a28.38,28.38,0,0,0,28-24.07l64.05.16a13.3,13.3,0,0,1,13.27,13.33l-1.39,573.67A13.3,13.3,0,0,1,460,688.36l-306-.74a13.3,13.3,0,0,1-13.27-13.33l1.39-573.67a13.3,13.3,0,0,1,13.33-13.27Z"
transform="translate(-127.12 -62.99)"
fill={props.primaryColor}
opacity={0.3}
/>
<g opacity={0.5}>
<path
d="M203.5,234.23a102,102,0,1,1,158.91,84.66l-.06.45a34.91,34.91,0,0,1-11.57,7.36l-.13-.45c-4.77,4.1-24.88,10.66-48,10.6h-.5c-14.64,0-30.52-2.58-44.49-10.14,0,0-.12-.27-.31-.77a36.34,36.34,0,0,1-9.62-6.59q-.08-.58-.16-1.16A101.89,101.89,0,0,1,203.5,234.23Z"
transform="translate(-127.12 -62.99)"
fill="url(#4d85006a-073b-4a8e-8d7d-f5f50f5693df)"
/>
</g>
<circle cx={178.38} cy={171.25} r={98.94} fill="#f5f5f5" />
<rect
x={272.66}
y={95.31}
width={78.02}
height={4.88}
rx={2}
ry={2}
transform="translate(494.71 137.18) rotate(-179.14)"
fill="#dbdbdb"
/>
<circle
cx={256.09}
cy={96.42}
r={2.93}
transform="translate(28.71 288.05) rotate(-89.14)"
fill="#dbdbdb"
/>
<rect
x={230.5}
y={372.89}
width={162}
height={18}
transform="translate(495.88 700.79) rotate(-180)"
fill="#f5f5f5"
/>
<rect
x={194.5}
y={408.89}
width={234}
height={18}
transform="translate(495.88 772.79) rotate(-180)"
fill="#f5f5f5"
/>
<g opacity={0.5}>
<path
d="M764.67,187l-332.5.81a13.66,13.66,0,0,0-13.63,13.69L420,823.38A13.66,13.66,0,0,0,433.75,837l332.5-.81a13.66,13.66,0,0,0,13.63-13.69l-1.51-621.89A13.66,13.66,0,0,0,764.67,187Z"
transform="translate(-127.12 -62.99)"
fill="url(#5a2f83a6-bf7f-4026-9ed1-a487c8c8e296)"
/>
</g>
<rect
x={424.15}
y={195.88}
width={350.11}
height={631.95}
rx={13.64}
ry={13.64}
transform="translate(-128.36 -61.53) rotate(-0.14)"
fill="#fff"
/>
<path
id="e707708a-3328-453c-98e2-ff60f305110c"
data-name="<Path>"
d="M686.43,211.51a28.38,28.38,0,0,1-27.91,24.21L537.58,236a28.38,28.38,0,0,1-28-24.07l-64.05.16a13.3,13.3,0,0,0-13.27,13.33l1.39,573.67A13.3,13.3,0,0,0,447,812.36l306-.74a13.3,13.3,0,0,0,13.27-13.33l-1.39-573.67a13.3,13.3,0,0,0-13.33-13.27Z"
transform="translate(-127.12 -62.99)"
fill={props.primaryColor}
opacity={0.4}
/>
<g opacity={0.5}>
<path
d="M703.5,358.23a102,102,0,1,0-158.91,84.66l.06.45a34.91,34.91,0,0,0,11.57,7.36l.13-.45c4.77,4.1,24.88,10.66,48,10.6h.5c14.64,0,30.52-2.58,44.49-10.14,0,0,.12-.27.31-.77a36.34,36.34,0,0,0,9.62-6.59q.08-.58.16-1.16A101.89,101.89,0,0,0,703.5,358.23Z"
transform="translate(-127.12 -62.99)"
fill="url(#9207eeb0-429a-4606-9083-b77d7bb2d95d)"
/>
</g>
<circle cx={474.38} cy={295.25} r={98.94} fill="#f5f5f5" />
<rect
x={556.32}
y={219.31}
width={78.02}
height={4.88}
rx={2}
ry={2}
transform="translate(-130.39 -54.02) rotate(-0.86)"
fill="#dbdbdb"
/>
<circle
cx={650.91}
cy={220.42}
r={2.93}
transform="translate(-130.36 -53.18) rotate(-0.86)"
fill="#dbdbdb"
/>
<rect x={387.38} y={433.9} width={162} height={18} fill="#f5f5f5" />
<rect x={351.38} y={469.9} width={234} height={18} fill="#f5f5f5" />
<path
d="M620.37,632v44.51H383v14.73a3.12,3.12,0,0,1-4.52,2.79l-68.8-34.4a3.45,3.45,0,0,1-.15-6.09l70-39.38a2.29,2.29,0,0,1,3.41,2l-.22,15.53Z"
transform="translate(-127.12 -62.99)"
fill="#3ad29f"
/>
<path
d="M696.63,632v44.51H934v14.73a3.12,3.12,0,0,0,4.52,2.79l68.8-34.4a3.45,3.45,0,0,0,.15-6.09l-70-39.38a2.29,2.29,0,0,0-3.41,2l.22,15.53Z"
transform="translate(-127.12 -62.99)"
fill="#3ad29f"
/>
<g opacity={0.5}>
<circle
cx={531.38}
cy={586.9}
r={54}
fill="url(#e6257317-29c6-4e8d-a9d2-439d45dc50a1)"
/>
</g>
<circle cx={531.38} cy={586.9} r={45} fill={props.primaryColor} />
<path
d="M563.7,398.92s-23.57,1.93-17.34,44.88a33.87,33.87,0,0,0,11.22,7.14l13.26-44.88Z"
transform="translate(-127.12 -62.99)"
fill="#fda57d"
/>
<path
d="M640.2,398.92s23.57,1.93,17.34,44.88a33.87,33.87,0,0,1-11.22,7.14l-13.26-44.88Z"
transform="translate(-127.12 -62.99)"
fill="#fda57d"
/>
<path
d="M564.72,328.54s-11.22,32.64-17.34,29.58c0,0,59,51,111.18,0,0,0-9.18-16.32-22.44-29.58Z"
transform="translate(-127.12 -62.99)"
fill="#333"
/>
<circle cx={475.46} cy={262.49} r={43.86} fill="#333" />
<path
d="M639.75,398.92h-76.5l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<path
d="M640.77,398.92h-76.5l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<path
d="M640.2,398.92H563.7l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
fill={props.primaryColor}
/>
<path
d="M460,310.55h30.6a0,0,0,0,1,0,0V335a15.3,15.3,0,0,1-15.3,15.3h0A15.3,15.3,0,0,1,460,335V310.55A0,0,0,0,1,460,310.55Z"
opacity={0.1}
/>
<path
d="M460,309.41h30.6a0,0,0,0,1,0,0v24.48a15.3,15.3,0,0,1-15.3,15.3h0a15.3,15.3,0,0,1-15.3-15.3V309.41A0,0,0,0,1,460,309.41Z"
fill="#fda57d"
/>
<path
d="M587.22,376.82a44,44,0,0,0,30.6.08v-3.76h-30.6Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<circle cx={475.46} cy={272.01} r={43.86} fill="#fda57d" />
<path
d="M560.64,318.34h83.64s-7.14-33.77-38.76-31.62S560.64,318.34,560.64,318.34Z"
transform="translate(-127.12 -62.99)"
fill="#333"
/>
<ellipse cx={432.5} cy={270.14} rx={4.08} ry={7.65} fill="#fda57d" />
<ellipse cx={518.18} cy={270.14} rx={4.08} ry={7.65} fill="#fda57d" />
<path
d="M560.64,319.48h83.64s-7.14-33.77-38.76-31.62S560.64,319.48,560.64,319.48Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<path
d="M851.7,272.92s-23.57,1.93-17.34,44.88a33.87,33.87,0,0,0,11.22,7.14l13.26-44.88Z"
transform="translate(-127.12 -62.99)"
fill="#4d8af0"
/>
<path
d="M928.2,272.92s23.57,1.93,17.34,44.88a33.87,33.87,0,0,1-11.22,7.14l-13.26-44.88Z"
transform="translate(-127.12 -62.99)"
fill="#4d8af0"
/>
<circle cx={763.46} cy={136.49} r={43.86} fill="#333" />
<path
d="M927.75,272.92h-76.5l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
fill="#4d8af0"
/>
<path
d="M928.77,272.92h-76.5l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
fill="#4d8af0"
/>
<path
d="M928.2,272.92H851.7l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
fill="#4d8af0"
/>
<path
d="M748,184.55h30.6a0,0,0,0,1,0,0V209a15.3,15.3,0,0,1-15.3,15.3h0A15.3,15.3,0,0,1,748,209V184.55A0,0,0,0,1,748,184.55Z"
opacity={0.1}
/>
<path
d="M748,183.41h30.6a0,0,0,0,1,0,0v24.48a15.3,15.3,0,0,1-15.3,15.3h0a15.3,15.3,0,0,1-15.3-15.3V183.41a0,0,0,0,1,0,0Z"
fill="#fdb797"
/>
<path
d="M875.22,250.82a44,44,0,0,0,30.6.08v-3.76h-30.6Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<circle cx={763.46} cy={146.01} r={43.86} fill="#fdb797" />
<path
d="M848.64,193.48h83.64s-7.14-33.77-38.76-31.62S848.64,193.48,848.64,193.48Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<path
d="M848.64,192.34h83.64s-7.14-33.77-38.76-31.62S848.64,192.34,848.64,192.34Z"
transform="translate(-127.12 -62.99)"
fill="#333"
/>
<ellipse cx={720.5} cy={144.14} rx={4.08} ry={7.65} fill="#fdb797" />
<ellipse cx={806.18} cy={144.14} rx={4.08} ry={7.65} fill="#fdb797" />
<path
d="M855.14,170a15.54,15.54,0,0,1,5.64-8.36c2.14-1.48,4.69-2.2,7.15-3.06a54.61,54.61,0,0,0,10.39-5c3.72-2.29,7.21-5.05,11.31-6.57,7-2.61,14.89-1.2,22.17.67a18.65,18.65,0,0,1,5.18,1.93,19.63,19.63,0,0,1,4.6,4.45L933.12,168a22.12,22.12,0,0,1,2.87,4,13.9,13.9,0,0,1,1.31,4.56,11.93,11.93,0,0,1-1.23,7.48c-2,3.33-6,5-9.84,5.16s-7.64-1-11.35-2.05c-12-3.5-24.06-6.76-36.45-8.22a102.82,102.82,0,0,0-18.55-.6c-1.94.13-4.51,1-5.69-1C853.16,175.69,854.61,171.69,855.14,170Z"
transform="translate(-127.12 -62.99)"
fill="#333"
/>
<path
d="M266.7,271.92s-23.57,1.93-17.34,44.88a33.87,33.87,0,0,0,11.22,7.14l13.26-44.88Z"
transform="translate(-127.12 -62.99)"
fill="#be7c5e"
/>
<path
d="M343.2,271.92s23.57,1.93,17.34,44.88a33.87,33.87,0,0,1-11.22,7.14l-13.26-44.88Z"
transform="translate(-127.12 -62.99)"
fill="#be7c5e"
/>
<path
d="M267.72,201.54s-1.81,5.28-4.38,11.39c-5.61,13.37.79,64.71,14.22,70.18,15.06,6.14,34.88,10.07,55.46,2.57,17.89-6.52,23.4-65,10.76-79.19-1.48-1.67-3-3.33-4.65-4.94Z"
transform="translate(-127.12 -62.99)"
fill="#333"
/>
<circle cx={178.46} cy={135.49} r={43.86} fill="#333" />
<path
d="M342.75,271.92h-76.5l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<path
d="M343.77,271.92h-76.5l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<path
d="M343.2,271.92H266.7l-7.14,30.6s-4.19,14.17,1,20.4,53.95,20.4,89.76,1a39.91,39.91,0,0,0,1-25.5c-4.08-14.28-1-1-1-1Z"
transform="translate(-127.12 -62.99)"
fill="#f55f44"
/>
<path
d="M163,183.55h30.6a0,0,0,0,1,0,0V208a15.3,15.3,0,0,1-15.3,15.3h0A15.3,15.3,0,0,1,163,208V183.55A0,0,0,0,1,163,183.55Z"
opacity={0.1}
/>
<path
d="M163,182.41h30.6a0,0,0,0,1,0,0v24.48a15.3,15.3,0,0,1-15.3,15.3h0a15.3,15.3,0,0,1-15.3-15.3V182.41a0,0,0,0,1,0,0Z"
fill="#be7c5e"
/>
<path
d="M290.22,249.82a44,44,0,0,0,30.6.08v-3.76h-30.6Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
<circle cx={178.46} cy={145.01} r={43.86} fill="#be7c5e" />
<path
d="M263.64,191.34h83.64s-7.14-33.77-38.76-31.62S263.64,191.34,263.64,191.34Z"
transform="translate(-127.12 -62.99)"
fill="#333"
/>
<ellipse cx={135.5} cy={143.14} rx={4.08} ry={7.65} fill="#be7c5e" />
<ellipse cx={221.18} cy={143.14} rx={4.08} ry={7.65} fill="#be7c5e" />
<path
d="M263.64,192.48h83.64s-7.14-33.77-38.76-31.62S263.64,192.48,263.64,192.48Z"
transform="translate(-127.12 -62.99)"
opacity={0.1}
/>
</svg>
);
UndrawSwipeProfiles.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawSwipeProfiles.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawSwipeProfiles;