UNPKG

react-undraw-illustrations

Version:

unDraw: MIT licensed illustrations for every project you can imagine and create...for React!

918 lines (913 loc) 30.8 kB
import React from "react"; import PropTypes from "prop-types"; const UndrawFilter = props => ( <svg style={{height:props.height, width:'100%'}} className={props.class} id="d5eeb229-0560-4c73-9e9e-2e1785b57a7c" data-name="Layer 1" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 857.1 758.83" > <defs> <linearGradient id="647fab05-0b83-421f-b355-94d847994b9c" x1={728.85} y1={502.58} x2={728.85} y2={461.76} gradientTransform="matrix(0.53, -0.85, -0.85, -0.53, 438.3, 1162.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="18266add-5a65-4fc6-a971-26e04d71af92" x1={715.36} y1={501.1} x2={715.36} y2={446.22} gradientTransform="translate(-99.07 262.06) rotate(-31.73)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="e9e2bb7b-c06b-4014-868f-351e0ca8ebab" x1={769.97} y1={356.2} x2={769.97} y2={269.16} gradientTransform="matrix(0.85, -0.53, 0.53, 0.85, -100.56, 262.41)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="3ed37a80-7f43-4a53-a0d5-c403389957fa" x1={411.46} y1={100.6} x2={411.46} y2={15.23} gradientTransform="translate(126.45 -98.14) rotate(23.79)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="80107904-00d9-4877-be8e-08caa3579ade" x1={118.53} y1={758.83} x2={118.53} y2={526.53} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="fb7bcafe-566b-4c20-ac54-38b064d3115f" x1={424.76} y1={252.76} x2={424.76} y2={157.57} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="8b625892-25db-4160-b55f-486d77087b7d" x1={266.79} y1={132.04} x2={266.79} y2={50.65} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="920aecfa-54b5-4c2b-93ff-a4455a83035f" x1={879.08} y1={629.37} x2={879.08} y2={507.77} gradientTransform="translate(-99.12 260.36) rotate(-31.73)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="ff0a9a5e-e45c-4b07-b4cc-7733561d3616" x1={396.83} y1={225.01} x2={396.83} y2={121.04} gradientTransform="matrix(0.85, -0.53, 0.53, 0.85, -99.84, 265.92)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="b894e33b-ac47-4a44-9333-a9aaaa82bb12" x1={236.43} y1={375.71} x2={236.43} y2={256.45} gradientTransform="translate(127.97 -95.73) rotate(23.79)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="421a0547-9346-4a1e-9997-f26fe9047b8e" x1={685.12} y1={40.19} x2={685.12} y2={-61.78} gradientTransform="matrix(0.89, 0.39, -0.39, 0.88, 143.07, -91.73)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="06731b5d-dbed-4868-bd06-0f960387a52e" x1={412.8} y1={499.65} x2={412.8} y2={373.23} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="19cac155-7edc-4646-8110-3a5404b3794a" x1={738.57} y1={755.54} x2={738.57} y2={523.23} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="5c907026-92e9-4e9f-a9ea-601c30aeeb56" x1={427.78} y1={756.43} x2={427.78} y2={522.45} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="7e326c48-2616-48c7-85a2-bec6e526d5c1" x1={426.61} y1={68.13} x2={426.61} y2={0} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> <linearGradient id="809fb2c4-55c1-495a-9238-84749dfd9959" x1={713.61} y1={139.13} x2={713.61} y2={71} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#647fab05-0b83-421f-b355-94d847994b9c" /> </defs> <title>filter</title> <g opacity={0.5}> <g opacity={0.5}> <rect x={395.77} y={275.4} width={31.61} height={26.49} transform="matrix(0.01, -1, 1, 0.01, -52.21, 627.02)" fill="url(#647fab05-0b83-421f-b355-94d847994b9c)" /> </g> <rect x={398.74} y={273.47} width={25.6} height={30.32} transform="translate(649.01 510.37) rotate(-179.48)" fill="#e6e6e6" /> <circle cx={411.47} cy={287.77} r={4.72} transform="translate(-51.44 626.06) rotate(-89.48)" fill="#fff" /> <circle cx={411.46} cy={289.35} r={4.29} transform="translate(-53.02 627.6) rotate(-89.48)" fill="#fff" /> <rect x={410.42} y={291.92} width={2} height={3.43} transform="translate(648.74 520.38) rotate(-179.48)" fill="#fff" /> <path d="M406.22,294.35h9.87a0,0,0,0,1,0,0v4.51a4.93,4.93,0,0,1-4.93,4.93h0a4.93,4.93,0,0,1-4.93-4.93v-4.51A0,0,0,0,1,406.22,294.35Z" transform="translate(648.16 531.24) rotate(-179.48)" fill="#fff" /> <circle cx={411.52} cy={283.05} r={1.72} transform="translate(-46.68 621.42) rotate(-89.48)" fill="#fff" /> <path d="M411,280.26a5.13,5.13,0,0,0-2.69.44,6,6,0,0,0-2.08,1.12,5.78,5.78,0,0,0-1.37,4.18,10.38,10.38,0,0,1-.63,4.43,4.39,4.39,0,0,1-4.06,2.37,3.5,3.5,0,0,0,3.33.11,5,5,0,0,0,2.25-2,12.3,12.3,0,0,0,.8-1.92,24.87,24.87,0,0,1,2.88-5.53,3.55,3.55,0,0,1,.64-.75,2.42,2.42,0,0,1,1.23-.49c.37,0,1,.12,1.22-.24C413,281.19,411.49,280.37,411,280.26Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </g> <g opacity={0.5}> <g opacity={0.5}> <rect x={740.67} y={267.4} width={35.62} height={42.5} transform="translate(-174.01 -63.75) rotate(-0.52)" fill="url(#18266add-5a65-4fc6-a971-26e04d71af92)" /> </g> <rect x={741.32} y={268.24} width={34.43} height={40.77} transform="translate(-174.01 -63.75) rotate(-0.52)" fill="#e6e6e6" /> <circle cx={758.62} cy={287.47} r={6.35} transform="translate(-174 -63.75) rotate(-0.52)" fill="#fff" /> <circle cx={758.64} cy={289.59} r={5.77} transform="translate(-174.02 -63.75) rotate(-0.52)" fill="#fff" /> <rect x={757.34} y={293.05} width={2.69} height={4.62} transform="translate(-174.07 -63.75) rotate(-0.52)" fill="#fff" /> <path d="M759,296.32h0a6.64,6.64,0,0,1,6.64,6.64V309a0,0,0,0,1,0,0H752.41a0,0,0,0,1,0,0V303a6.64,6.64,0,0,1,6.64-6.64Z" transform="translate(-174.14 -63.75) rotate(-0.52)" fill="#fff" /> <circle cx={758.56} cy={281.13} r={2.31} transform="translate(-173.95 -63.75) rotate(-0.52)" fill="#fff" /> <path d="M759.31,277.37a6.9,6.9,0,0,1,3.61.59,8,8,0,0,1,2.79,1.51c1.48,1.38,1.79,3.59,1.84,5.61s-.06,4.15.84,6a5.9,5.9,0,0,0,5.45,3.18,4.71,4.71,0,0,1-4.47.14,6.67,6.67,0,0,1-3-2.73,16.54,16.54,0,0,1-1.08-2.58,33.45,33.45,0,0,0-3.87-7.44,4.77,4.77,0,0,0-.86-1,3.25,3.25,0,0,0-1.65-.66c-.49-.07-1.33.16-1.64-.32C756.61,278.61,758.59,277.51,759.31,277.37Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </g> <g opacity={0.5}> <g opacity={0.5}> <rect x={690.52} y={89.66} width={56.49} height={67.4} transform="translate(-172.53 -64.12) rotate(-0.52)" fill="url(#e9e2bb7b-c06b-4014-868f-351e0ca8ebab)" /> </g> <rect x={691.55} y={91} width={54.6} height={64.66} transform="translate(-172.53 -64.12) rotate(-0.52)" fill="#e6e6e6" /> <circle cx={718.98} cy={121.5} r={10.07} transform="translate(-172.51 -64.12) rotate(-0.52)" fill="#fff" /> <circle cx={719.01} cy={124.85} r={9.15} transform="translate(-172.54 -64.12) rotate(-0.52)" fill="#fff" /> <rect x={716.96} y={130.34} width={4.27} height={7.32} transform="translate(-172.62 -64.12) rotate(-0.52)" fill="#fff" /> <path d="M719.66,135.53h0A10.52,10.52,0,0,1,730.18,146v9.61a0,0,0,0,1,0,0h-21a0,0,0,0,1,0,0V146A10.52,10.52,0,0,1,719.66,135.53Z" transform="matrix(1, -0.01, 0.01, 1, -172.73, -64.11)" fill="#fff" /> <circle cx={718.89} cy={111.43} r={3.66} transform="translate(-172.42 -64.12) rotate(-0.52)" fill="#fff" /> <path d="M720.09,105.48a10.94,10.94,0,0,1,5.73.94,12.73,12.73,0,0,1,4.43,2.4c2.34,2.2,2.84,5.69,2.92,8.9s-.1,6.58,1.33,9.45a9.36,9.36,0,0,0,8.65,5,7.47,7.47,0,0,1-7.09.22,10.59,10.59,0,0,1-4.8-4.33,26.23,26.23,0,0,1-1.71-4.08,53,53,0,0,0-6.14-11.8,7.56,7.56,0,0,0-1.36-1.6,5.16,5.16,0,0,0-2.62-1c-.78-.11-2.12.26-2.61-.51C715.8,107.45,718.94,105.7,720.09,105.48Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </g> <g opacity={0.5}> <g opacity={0.5}> <rect x={450.51} y={87} width={58.16} height={67.65} transform="translate(-172.53 -66.2) rotate(-0.52)" fill="url(#3ed37a80-7f43-4a53-a0d5-c403389957fa)" /> </g> <rect x={451.69} y={88.33} width={56} height={66.32} transform="translate(-172.54 -66.2) rotate(-0.52)" fill="#e6e6e6" /> <circle cx={479.2} cy={119.62} r={10.32} transform="translate(-172.52 -66.2) rotate(-0.52)" fill="#fff" /> <circle cx={479.23} cy={123.06} r={9.38} transform="translate(-172.55 -66.2) rotate(-0.52)" fill="#fff" /> <rect x={477.13} y={128.69} width={4.38} height={7.51} transform="translate(-172.64 -66.2) rotate(-0.52)" fill="#fff" /> <path d="M479.9,134h0a10.79,10.79,0,0,1,10.79,10.79v9.85a0,0,0,0,1,0,0H469.11a0,0,0,0,1,0,0V144.8A10.79,10.79,0,0,1,479.9,134Z" transform="translate(-172.75 -66.2) rotate(-0.52)" fill="#fff" /> <path d="M471.94,112.18s6.22-3.81,7.44-7.89a37.68,37.68,0,0,0,7.29,9.94Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </g> <rect y={526.53} width={237.07} height={232.3} fill="url(#80107904-00d9-4877-be8e-08caa3579ade)" /> <rect x={1.19} y={528.31} width={234.69} height={228.73} fill="#fff" /> <rect x={25.02} y={547.31} width={187.03} height={145.2} fill={props.primaryColor} /> <rect x={36.4} y={708.02} width={165.15} height={7.61} fill="#e0e0e0" /> <rect x={62.75} y={723.23} width={112.45} height={7.61} fill="#e0e0e0" /> <g opacity={0.5}> <rect x={382.92} y={157.57} width={83.67} height={95.18} fill="url(#fb7bcafe-566b-4c20-ac54-38b064d3115f)" /> </g> <rect x={385.57} y={158.9} width={79.25} height={93.86} fill="#e6e6e6" /> <circle cx={424.31} cy={203.17} r={14.61} fill="#fff" /> <circle cx={424.31} cy={208.04} r={13.28} fill="#fff" /> <rect x={421.21} y={216.01} width={6.2} height={10.63} fill="#fff" /> <path d="M422.78,223.54h4.38a13.08,13.08,0,0,1,13.08,13.08v16.14a0,0,0,0,1,0,0H409.7a0,0,0,0,1,0,0V236.62a13.08,13.08,0,0,1,13.08-13.08Z" fill="#fff" /> <path d="M588.9,258.17q-1.41.74-2.76,1.57a4.79,4.79,0,0,0-2,1.83,3.48,3.48,0,0,1-.46.89c-.42.46-1.12.45-1.72.59-2,.46-3,2.61-3.49,4.55a32.41,32.41,0,0,0-.76,3.5,4.38,4.38,0,0,0,.07,2.31c.13.32.32.6.42.93.36,1.2-.66,2.34-.91,3.56a6,6,0,0,0,.55,3.25,3.89,3.89,0,0,0,.43.92,6.24,6.24,0,0,0,.54.61,5.17,5.17,0,0,1,1,1.59A34.22,34.22,0,0,1,586,286c3.25,1.27,6.47,3.06,10,2.9a9.16,9.16,0,0,0,2.77-.57c1.74-.65,3.26-1.83,5-2.4a43.84,43.84,0,0,1,5-.84c.79-.16,1.77-.76,1.47-1.51a2.33,2.33,0,0,0,2.38-.47,6.36,6.36,0,0,0,1.47-2.08,19.25,19.25,0,0,0,1.65-4.12,11.66,11.66,0,0,0-1.05-8.22,3.68,3.68,0,0,0-1-1.28c-.32-.23-.7-.37-1-.62a3.7,3.7,0,0,1-.77-1q-1.66-2.73-3.51-5.33c-1.22-1.72-2.61-3.48-4.58-4.23-2.92-1.11-5.05.66-7.83.77-1.24,0-2.28-.45-3.59-.19A13.08,13.08,0,0,0,588.9,258.17Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <g opacity={0.5}> <rect x={231.01} y={50.65} width={71.54} height={81.39} fill="url(#8b625892-25db-4160-b55f-486d77087b7d)" /> </g> <rect x={233.28} y={51.79} width={67.76} height={80.25} fill="#e6e6e6" /> <circle cx={266.4} cy={89.64} r={12.49} fill="#fff" /> <circle cx={266.4} cy={93.81} r={11.36} fill="#fff" /> <rect x={263.75} y={100.62} width={5.3} height={9.08} fill="#fff" /> <path d="M267,107.05h0A13.06,13.06,0,0,1,280,120.11V132a0,0,0,0,1,0,0H253.91a0,0,0,0,1,0,0V120.11A13.06,13.06,0,0,1,267,107.05Z" fill="#fff" /> <path d="M432,146.9q-1.2.63-2.36,1.35a4.1,4.1,0,0,0-1.67,1.56,3,3,0,0,1-.39.76c-.36.39-1,.38-1.47.5-1.67.39-2.53,2.23-3,3.89a27.71,27.71,0,0,0-.65,3,3.74,3.74,0,0,0,.06,2c.11.27.27.52.36.79.31,1-.56,2-.78,3a5.16,5.16,0,0,0,.47,2.78,3.33,3.33,0,0,0,.37.79,5.33,5.33,0,0,0,.46.52,4.42,4.42,0,0,1,.85,1.36,29.26,29.26,0,0,1,5.28,1.5c2.78,1.08,5.53,2.62,8.51,2.48a7.83,7.83,0,0,0,2.37-.49c1.49-.56,2.79-1.56,4.3-2a37.49,37.49,0,0,1,4.25-.72c.68-.13,1.51-.65,1.26-1.29a2,2,0,0,0,2-.4,5.44,5.44,0,0,0,1.25-1.78,16.46,16.46,0,0,0,1.41-3.52,10,10,0,0,0-.9-7,3.14,3.14,0,0,0-.87-1.1c-.27-.2-.6-.32-.86-.53a3.17,3.17,0,0,1-.66-.85q-1.42-2.33-3-4.55a9.28,9.28,0,0,0-3.92-3.61c-2.5-1-4.32.57-6.69.66-1.06,0-1.95-.39-3.07-.16A11.18,11.18,0,0,0,432,146.9Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <g opacity={0.5}> <rect x={908.12} y={234.47} width={78.92} height={94.17} transform="matrix(1, -0.01, 0.01, 1, -173.94, -62.06)" fill="url(#920aecfa-54b5-4c2b-93ff-a4455a83035f)" /> </g> <rect x={909.56} y={236.34} width={76.28} height={90.34} transform="translate(-173.94 -62.05) rotate(-0.52)" fill="#e6e6e6" /> <circle cx={947.89} cy={278.95} r={14.06} transform="translate(-173.92 -62.05) rotate(-0.52)" fill="#fff" /> <circle cx={947.93} cy={283.64} r={12.78} transform="translate(-173.96 -62.05) rotate(-0.52)" fill="#fff" /> <rect x={945.06} y={291.31} width={5.97} height={10.23} transform="translate(-174.08 -62.05) rotate(-0.52)" fill="#fff" /> <path d="M947.21,298.55h3.24a13.08,13.08,0,0,1,13.08,13.08v15a0,0,0,0,1,0,0h-29.4a0,0,0,0,1,0,0v-15a13.08,13.08,0,0,1,13.08-13.08Z" transform="translate(-174.22 -62.04) rotate(-0.52)" fill="#fff" /> <circle cx={947.76} cy={264.89} r={5.11} transform="translate(-173.79 -62.05) rotate(-0.52)" fill="#fff" /> <path d="M949.43,256.58c2.69-.51,5.44.36,8,1.31a17.79,17.79,0,0,1,6.18,3.35c3.27,3.07,4,8,4.08,12.44s-.14,9.19,1.86,13.2a13.08,13.08,0,0,0,12.09,7.05c-2.87,1.92-6.76,1.73-9.91.31a14.79,14.79,0,0,1-6.7-6.06,36.65,36.65,0,0,1-2.39-5.71A74.11,74.11,0,0,0,954.07,266a10.57,10.57,0,0,0-1.9-2.23,7.21,7.21,0,0,0-3.66-1.46c-1.09-.15-3,.36-3.64-.72C943.44,259.33,947.83,256.88,949.43,256.58Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <g opacity={0.5}> <rect x={294.93} y={164.1} width={67.48} height={80.52} transform="matrix(1, -0.01, 0.01, 1, -173.27, -67.62)" fill="url(#ff0a9a5e-e45c-4b07-b4cc-7733561d3616)" /> </g> <rect x={296.15} y={165.7} width={65.22} height={77.24} transform="translate(-173.27 -67.62) rotate(-0.52)" fill="#e6e6e6" /> <circle cx={328.92} cy={202.13} r={12.02} transform="translate(-173.25 -67.62) rotate(-0.52)" fill="#fff" /> <circle cx={328.96} cy={206.14} r={10.93} transform="translate(-173.29 -67.62) rotate(-0.52)" fill="#fff" /> <rect x={326.51} y={212.69} width={5.1} height={8.74} transform="translate(-173.39 -67.62) rotate(-0.52)" fill="#fff" /> <path d="M329.73,218.88h0a12.57,12.57,0,0,1,12.57,12.57v11.48a0,0,0,0,1,0,0H317.16a0,0,0,0,1,0,0V231.45a12.57,12.57,0,0,1,12.57-12.57Z" transform="translate(-173.51 -67.61) rotate(-0.52)" fill="#fff" /> <circle cx={328.81} cy={190.11} r={4.37} transform="translate(-173.14 -67.62) rotate(-0.52)" fill="#fff" /> <path d="M330.24,183c2.3-.44,4.65.31,6.85,1.12a15.21,15.21,0,0,1,5.29,2.86c2.8,2.62,3.4,6.8,3.49,10.64s-.12,7.86,1.59,11.29a11.18,11.18,0,0,0,10.33,6c-2.45,1.64-5.78,1.48-8.47.27a12.65,12.65,0,0,1-5.73-5.18,31.33,31.33,0,0,1-2-4.88,63.36,63.36,0,0,0-7.34-14.1,9,9,0,0,0-1.62-1.91,6.16,6.16,0,0,0-3.13-1.25c-.93-.13-2.53.31-3.11-.62C325.12,185.35,328.88,183.26,330.24,183Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <g opacity={0.5}> <rect x={176.19} y={241.61} width={81.25} height={94.51} transform="translate(-174.08 -68.59) rotate(-0.52)" fill="url(#b894e33b-ac47-4a44-9333-a9aaaa82bb12)" /> </g> <rect x={177.85} y={243.47} width={78.23} height={92.65} transform="translate(-174.09 -68.59) rotate(-0.52)" fill="#e6e6e6" /> <circle cx={216.28} cy={287.18} r={14.42} transform="translate(-174.06 -68.6) rotate(-0.52)" fill="#fff" /> <circle cx={216.33} cy={291.98} r={13.11} transform="translate(-174.11 -68.6) rotate(-0.52)" fill="#fff" /> <rect x={213.39} y={299.85} width={6.12} height={10.49} transform="translate(-174.23 -68.6) rotate(-0.52)" fill="#fff" /> <path d="M215.26,307.27h4a13.08,13.08,0,0,1,13.08,13.08v15.76a0,0,0,0,1,0,0H202.18a0,0,0,0,1,0,0V320.36a13.08,13.08,0,0,1,13.08-13.08Z" transform="translate(-174.38 -68.59) rotate(-0.52)" fill="#fff" /> <path d="M206.14,276.78s8.69-5.32,10.39-11c0,0,4,8.27,10.18,13.89Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <circle cx={288.75} cy={679} r={24.91} transform="translate(-177.64 -67.92) rotate(-0.52)" fill="#fff" /> <circle cx={288.82} cy={687.3} r={22.65} transform="translate(-177.71 -67.92) rotate(-0.52)" fill="#fff" /> <rect x={283.75} y={700.89} width={10.57} height={18.12} transform="translate(-177.92 -67.92) rotate(-0.52)" fill="#fff" /> <path d="M289.63,713.71h1.59A25.25,25.25,0,0,1,316.47,739v24.58a0,0,0,0,1,0,0H264.38a0,0,0,0,1,0,0V739A25.25,25.25,0,0,1,289.63,713.71Z" transform="translate(-178.18 -67.9) rotate(-0.52)" fill="#fff" /> <path d="M271.22,661s15-9.2,17.94-19c0,0,6.92,14.28,17.58,24Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <g opacity={0.5}> <rect x={724.88} y={124.81} width={67.76} height={77.41} transform="translate(-172.91 -63.65) rotate(-0.52)" fill="url(#421a0547-9346-4a1e-9997-f26fe9047b8e)" /> </g> <rect x={726.26} y={126.34} width={65.24} height={75.88} transform="translate(-172.92 -63.65) rotate(-0.52)" fill="#e6e6e6" /> <ellipse cx={758.31} cy={162.14} rx={12.03} ry={11.81} transform="translate(-172.9 -63.65) rotate(-0.52)" fill="#fff" /> <ellipse cx={758.35} cy={166.07} rx={10.93} ry={10.74} transform="translate(-172.93 -63.65) rotate(-0.52)" fill="#fff" /> <rect x={755.9} y={172.52} width={5.1} height={8.59} transform="matrix(1, -0.01, 0.01, 1, -173.03, -63.65)" fill="#fff" /> <path d="M759.12,178.6h0a12.57,12.57,0,0,1,12.57,12.57v11.05a0,0,0,0,1,0,0H746.54a0,0,0,0,1,0,0V191.17A12.57,12.57,0,0,1,759.12,178.6Z" transform="translate(-173.16 -63.65) rotate(-0.52)" fill="#fff" /> <path d="M749.85,153.62s7.25-4.36,8.66-9A43.1,43.1,0,0,0,767,156Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <g opacity={0.5}> <polygon points="359.03 373.23 359.03 375.05 398.47 443.43 398.47 484.15 427.44 499.65 427.44 498.74 427.44 443.43 466.58 375.05 466.58 373.23 359.03 373.23" fill="url(#06731b5d-dbed-4868-bd06-0f960387a52e)" /> </g> <rect x={360.23} y={374.12} width={104.55} height={1.8} fill="#cfd8dc" /> <rect x={360.23} y={374.12} width={104.55} height={1.8} opacity={0.1} /> <polygon points="360.23 375.92 398.57 443.33 398.57 483.47 426.74 497.85 426.74 443.33 464.78 375.92 360.23 375.92" fill="#cfd8dc" /> <polygon points="400.37 483.47 400.37 443.33 362.02 375.92 360.23 375.92 398.57 443.33 398.57 483.47 400.37 483.47" fill="#fff" opacity={0.2} /> <polygon points="398.57 483.47 426.74 498.75 426.74 497.85 400.37 483.47 398.57 483.47" fill="#cfd8dc" /> <polygon points="398.57 483.47 426.74 498.75 426.74 497.85 400.37 483.47 398.57 483.47" opacity={0.1} /> <rect x={620.03} y={523.23} width={237.07} height={232.3} fill="url(#19cac155-7edc-4646-8110-3a5404b3794a)" /> <rect x={621.23} y={525.02} width={234.69} height={228.73} fill="#fff" /> <rect x={645.05} y={544.01} width={187.03} height={145.2} fill={props.primaryColor} /> <rect x={658.27} y={709.61} width={165.15} height={7.61} fill="#e0e0e0" /> <rect x={684.62} y={724.82} width={112.45} height={7.61} fill="#e0e0e0" /> <rect x={308.39} y={522.45} width={238.78} height={233.98} fill="url(#5c907026-92e9-4e9f-a9ea-601c30aeeb56)" /> <rect x={309.59} y={524.25} width={236.38} height={230.38} fill="#fff" /> <rect x={333.59} y={543.38} width={188.38} height={146.25} fill={props.primaryColor} /> <rect x={340.65} y={707.15} width={166.34} height={7.66} fill="#e0e0e0" /> <rect x={367.18} y={722.47} width={113.27} height={7.66} fill="#e0e0e0" /> <path d="M213.58,354s-1,111,97,90,101-55,213-11" transform="translate(-171.45 -70.58)" fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={2} strokeDasharray={12} /> <path d="M947.58,344s1,111-97,90-101-55-213-11" transform="translate(-171.45 -70.58)" fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={2} strokeDasharray={12} /> <path d="M595.58,344s-13,31,6,46-2,47-2,47" transform="translate(-171.45 -70.58)" fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={2} strokeDasharray={12} /> <path d="M329,265.24s15,73,88,73,137,82,123,92" transform="translate(-171.45 -70.58)" fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={2} strokeDasharray={12} /> <path d="M435,224.24s-19.22,35.35,1.91,71.37a76,76,0,0,0,45.67,34.44c45.31,12.42,65.15,6.65,94.43,81.18" transform="translate(-171.45 -70.58)" fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={2} strokeDasharray={12} /> <path d="M758,226.24s15.35,18.69-13.37,58.24a97.73,97.73,0,0,1-45.32,33.84c-29,10.77-57.31,41.92-57.31,87.92" transform="translate(-171.45 -70.58)" fill="none" stroke="#3ad29f" strokeMiterlimit={10} strokeWidth={2} strokeDasharray={12} /> <g opacity={0.5}> <g opacity={0.5}> <rect x={396.67} width={59.89} height={68.13} fill="url(#7e326c48-2616-48c7-85a2-bec6e526d5c1)" /> </g> <rect x={398.57} y={0.95} width={56.72} height={67.18} fill="#e6e6e6" /> <circle cx={426.29} cy={32.64} r={10.46} fill="#fff" /> <circle cx={426.29} cy={36.13} r={9.51} fill="#fff" /> <rect x={424.08} y={41.83} width={4.44} height={7.61} fill="#fff" /> <path d="M426.77,47.22h0A10.93,10.93,0,0,1,437.7,58.15v10a0,0,0,0,1,0,0H415.84a0,0,0,0,1,0,0v-10A10.93,10.93,0,0,1,426.77,47.22Z" fill="#fff" /> <path d="M592.84,92.07q-1,.53-2,1.13a3.43,3.43,0,0,0-1.4,1.31,2.49,2.49,0,0,1-.33.64c-.3.33-.8.32-1.23.42-1.4.33-2.12,1.87-2.5,3.25a23.2,23.2,0,0,0-.55,2.51,3.13,3.13,0,0,0,.05,1.65c.09.23.23.43.3.66.26.86-.47,1.67-.65,2.55a4.32,4.32,0,0,0,.39,2.33,2.78,2.78,0,0,0,.31.66,4.46,4.46,0,0,0,.39.43,3.7,3.7,0,0,1,.71,1.13,24.49,24.49,0,0,1,4.42,1.26c2.33.91,4.63,2.19,7.13,2.07a6.56,6.56,0,0,0,2-.41c1.25-.47,2.33-1.31,3.6-1.71a31.38,31.38,0,0,1,3.56-.6c.57-.11,1.27-.54,1.05-1.08a1.67,1.67,0,0,0,1.71-.33,4.55,4.55,0,0,0,1-1.49A13.78,13.78,0,0,0,612,105.5a8.34,8.34,0,0,0-.75-5.89,2.63,2.63,0,0,0-.73-.92c-.23-.17-.5-.27-.72-.45a2.65,2.65,0,0,1-.55-.72q-1.19-2-2.51-3.81a7.76,7.76,0,0,0-3.28-3c-2.09-.8-3.62.47-5.6.55a14.28,14.28,0,0,0-2.57-.14A9.36,9.36,0,0,0,592.84,92.07Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </g> <g opacity={0.5}> <g opacity={0.5}> <rect x={683.67} y={71} width={59.89} height={68.13} fill="url(#809fb2c4-55c1-495a-9238-84749dfd9959)" /> </g> <rect x={685.57} y={71.95} width={56.72} height={67.18} fill="#e6e6e6" /> <circle cx={713.29} cy={103.64} r={10.46} fill="#fff" /> <circle cx={713.29} cy={107.13} r={9.51} fill="#fff" /> <rect x={711.08} y={112.83} width={4.44} height={7.61} fill="#fff" /> <path d="M713.77,118.22h0a10.93,10.93,0,0,1,10.93,10.93v10a0,0,0,0,1,0,0H702.84a0,0,0,0,1,0,0v-10a10.93,10.93,0,0,1,10.93-10.93Z" fill="#fff" /> <path d="M879.84,163.07q-1,.53-2,1.13a3.43,3.43,0,0,0-1.4,1.31,2.49,2.49,0,0,1-.33.64c-.3.33-.8.32-1.23.42-1.4.33-2.12,1.87-2.5,3.25a23.2,23.2,0,0,0-.55,2.51,3.13,3.13,0,0,0,.05,1.65c.09.23.23.43.3.66.26.86-.47,1.67-.65,2.55a4.32,4.32,0,0,0,.39,2.33,2.78,2.78,0,0,0,.31.66,4.46,4.46,0,0,0,.39.43,3.7,3.7,0,0,1,.71,1.13,24.49,24.49,0,0,1,4.42,1.26c2.33.91,4.63,2.19,7.13,2.07a6.56,6.56,0,0,0,2-.41c1.25-.47,2.33-1.31,3.6-1.71a31.38,31.38,0,0,1,3.56-.6c.57-.11,1.27-.54,1.05-1.08a1.67,1.67,0,0,0,1.71-.33,4.55,4.55,0,0,0,1-1.49A13.78,13.78,0,0,0,899,176.5a8.34,8.34,0,0,0-.75-5.89,2.63,2.63,0,0,0-.73-.92c-.23-.17-.5-.27-.72-.45a2.65,2.65,0,0,1-.55-.72q-1.19-2-2.51-3.81a7.76,7.76,0,0,0-3.28-3c-2.09-.8-3.62.47-5.6.55a14.28,14.28,0,0,0-2.57-.14A9.36,9.36,0,0,0,879.84,163.07Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </g> <circle cx={595.82} cy={680.79} r={23.66} transform="translate(-177.54 -65.2) rotate(-0.52)" fill="#fff" /> <circle cx={595.89} cy={688.68} r={21.51} transform="translate(-177.62 -65.2) rotate(-0.52)" fill="#fff" /> <rect x={591.06} y={701.58} width={10.04} height={17.21} transform="translate(-177.81 -65.2) rotate(-0.52)" fill="#fff" /> <path d="M597.4,713.76h0a24.74,24.74,0,0,1,24.74,24.74v22.58a0,0,0,0,1,0,0H572.67a0,0,0,0,1,0,0V738.5A24.74,24.74,0,0,1,597.4,713.76Z" transform="translate(-178.05 -65.18) rotate(-0.52)" fill="#fff" /> <circle cx={595.6} cy={657.13} r={8.6} transform="matrix(1, -0.01, 0.01, 1, -177.33, -65.2)" fill="#fff" /> <path d="M598.41,643.14c4.53-.86,9.15.61,13.47,2.2,3.73,1.38,7.51,2.92,10.4,5.64,5.5,5.16,6.68,13.39,6.87,20.93s-.23,15.46,3.14,22.22A22,22,0,0,0,652.62,706c-4.83,3.23-11.38,2.91-16.68.53a24.88,24.88,0,0,1-11.27-10.19,61.66,61.66,0,0,1-4-9.6A124.69,124.69,0,0,0,606.22,659a17.78,17.78,0,0,0-3.2-3.76,12.13,12.13,0,0,0-6.16-2.46c-1.84-.25-5,.61-6.12-1.21C588.34,647.77,595.73,643.65,598.41,643.14Z" transform="translate(-171.45 -70.58)" fill="#fff" /> <circle cx={743.84} cy={612.28} r={22.94} fill="#fff" /> <rect x={738.49} y={626.05} width={10.71} height={18.35} fill="#fff" /> <path d="M743.86,639h2.27a25.25,25.25,0,0,1,25.25,25.25v25.22a0,0,0,0,1,0,0H718.61a0,0,0,0,1,0,0V664.3A25.25,25.25,0,0,1,743.86,639Z" fill="#fff" /> <path d="M941,706c-1,1-48,3-51,0,2-10,0-34.5,0-34.5a25.5,25.5,0,0,1,25.5-25.5h0A25.5,25.5,0,0,1,941,671.5S938,702,941,706Z" transform="translate(-171.45 -70.58)" fill="#fff" /> </svg> ); UndrawFilter.propTypes = { /** * Hex color */ primaryColor: PropTypes.string, /** * percentage */ height: PropTypes.string, /** * custom class for svg */ class: PropTypes.string }; UndrawFilter.defaultProps = { primaryColor: "#6c68fb", height: "250px", class: "" }; export default UndrawFilter;