react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
346 lines (341 loc) • 11.8 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawSelfie = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="44914b3e-4ff9-4431-981e-b48acbe6759b"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 472.08 753.74"
>
<defs>
<linearGradient
id="047d6260-e3e7-4421-9cbc-178d61f5fd00"
x1={447.08}
y1={348.99}
x2={447.08}
y2={216.4}
gradientTransform="translate(0.01 -0.01)"
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="63ca4d46-187d-400f-bc66-80514cad3441"
x1={653.79}
y1={826.87}
x2={653.79}
y2={570.09}
xlinkHref="#047d6260-e3e7-4421-9cbc-178d61f5fd00"
/>
<linearGradient
id="d33e6aa4-99b5-473f-bb68-306d2b531be8"
x1={487.46}
y1={663.45}
x2={740.06}
y2={66.96}
gradientTransform="translate(-13.63 -2.04) rotate(-0.14)"
xlinkHref="#047d6260-e3e7-4421-9cbc-178d61f5fd00"
/>
<linearGradient
id="29dd9e8b-9418-4416-aa22-a80903c94e95"
x1={236.87}
y1={452.34}
x2={236.87}
y2={80.35}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopColor="#fcfdff" />
<stop offset={1} stopColor="#b2ebf2" />
</linearGradient>
<linearGradient
id="92cc4875-fc0d-4098-9c41-d6fc57a0b2d9"
x1={774.73}
y1={657.67}
x2={774.73}
y2={411.51}
xlinkHref="#047d6260-e3e7-4421-9cbc-178d61f5fd00"
/>
<linearGradient
id="8bf4a49d-4b4a-4ad7-b49f-3914cd869768"
x1={450.36}
y1={549.19}
x2={450.36}
y2={439.64}
xlinkHref="#047d6260-e3e7-4421-9cbc-178d61f5fd00"
/>
<linearGradient
id="d03a91ec-a732-40ea-b889-bca828f7dae8"
x1={446.09}
y1={640}
x2={446.09}
y2={542.77}
xlinkHref="#047d6260-e3e7-4421-9cbc-178d61f5fd00"
/>
<linearGradient
id="f5bc8f66-26fb-41cb-b6de-69223130756b"
x1={458.5}
y1={459.05}
x2={458.5}
y2={337.39}
xlinkHref="#047d6260-e3e7-4421-9cbc-178d61f5fd00"
/>
</defs>
<title>selfie1</title>
<path
d="M525,333.23h0a33.9,33.9,0,0,1-46.61,10.59l-98.71-65.05a33.9,33.9,0,0,1-10.59-46.61h0a33.9,33.9,0,0,1,46.61-10.59l98.71,65.05A33.9,33.9,0,0,1,525,333.23Z"
transform="translate(-363.96 -73.13)"
fill="url(#047d6260-e3e7-4421-9cbc-178d61f5fd00)"
/>
<path
d="M519.55,329.67h0a31.51,31.51,0,0,1-43.33,9.85L384.46,279a31.51,31.51,0,0,1-9.85-43.33h0a31.51,31.51,0,0,1,43.33-9.85l91.77,60.47A31.51,31.51,0,0,1,519.55,329.67Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
<path
d="M836,642.19a72.1,72.1,0,0,0-142.93-13.44l-221.58-6L474,660.81s-31.59,72.9,134.46,92.35v73.71h192V704.39A72.06,72.06,0,0,0,836,642.19Z"
transform="translate(-363.96 -73.13)"
fill="url(#63ca4d46-187d-400f-bc66-80514cad3441)"
/>
<path
d="M452.66,673.6c-1.14,20.51,12.74,63.27,142.11,77.24v70.6H794.19v-187l-341.63-8.54.11,1.65A368.71,368.71,0,0,1,452.66,673.6Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
<g opacity={0.5}>
<path
d="M747.91,73.13l-295.19.72A12.13,12.13,0,0,0,440.62,86L442,638.11a12.13,12.13,0,0,0,12.16,12.1l295.19-.72a12.13,12.13,0,0,0,12.1-12.16L760.08,85.23A12.13,12.13,0,0,0,747.91,73.13Z"
transform="translate(-363.96 -73.13)"
fill="url(#d33e6aa4-99b5-473f-bb68-306d2b531be8)"
/>
</g>
<rect
x={445.61}
y={81.02}
width={310.82}
height={561.04}
rx={13.64}
ry={13.64}
transform="translate(-364.84 -71.67) rotate(-0.14)"
fill="#fff"
/>
<path
id="08c8378a-2a7c-440d-babe-a4bd2c3153db"
data-name="<Path>"
d="M678.45,94.89a25.2,25.2,0,0,1-24.78,21.49l-107.36.26a25.2,25.2,0,0,1-24.89-21.37l-56.87.14a11.81,11.81,0,0,0-11.78,11.83L454,616.54a11.81,11.81,0,0,0,11.83,11.78l271.63-.66a11.81,11.81,0,0,0,11.78-11.83L748,106.53a11.81,11.81,0,0,0-11.83-11.78Z"
transform="translate(-363.96 -73.13)"
fill={props.primaryColor}
/>
<rect
x={562.95}
y={101.82}
width={69.26}
height={4.33}
rx={2}
ry={2}
transform="translate(-365.45 -64.13) rotate(-0.86)"
fill="#dbdbdb"
/>
<circle
cx={646.92}
cy={102.81}
r={2.6}
transform="translate(-365.43 -63.39) rotate(-0.86)"
fill="#dbdbdb"
/>
<circle cx={236.87} cy={508.27} r={24.86} fill="#eee" opacity={0.5} />
<circle
cx={236.87}
cy={508.27}
r={17.52}
fill="none"
stroke="#6c63ff"
strokeMiterlimit={10}
opacity={0.2}
/>
<rect
x={123.24}
y={493.18}
width={30.18}
height={30.18}
fill="#eee"
opacity={0.5}
/>
<path
d="M710.67,570.65v-3.32a1,1,0,0,0-1-1H698a1,1,0,0,0-1,1v3.32h-4.52v-2h-2.68v2h-3.35v20.07h34.79V570.65Z"
transform="translate(-363.96 -73.13)"
fill="#eee"
opacity={0.5}
/>
<rect
x={88.61}
y={80.35}
width={296.52}
height={371.98}
fill="url(#29dd9e8b-9418-4416-aa22-a80903c94e95)"
/>
<circle cx={353.17} cy={57.27} r={7.99} fill="#eee" opacity={0.7} />
<circle cx={358.5} cy={65.26} r={7.99} fill="#eee" opacity={0.7} />
<circle cx={346.96} cy={65.26} r={7.99} fill="#eee" opacity={0.5} />
<polyline
points="109.03 49.28 121.46 57.27 103.7 65.26 112.58 73.25"
fill="#eee"
opacity={0.7}
/>
<rect
x={88.61}
y={226.84}
width={87.89}
height={225.5}
fill={props.primaryColor}
opacity={0.3}
/>
<rect
x={300.79}
y={399.07}
width={43.5}
height={53.27}
fill={props.primaryColor}
opacity={0.3}
/>
<rect
x={344.3}
y={354.68}
width={37.29}
height={98.54}
fill={props.primaryColor}
opacity={0.3}
/>
<path
d="M528,525.46h-14.2S509.39,370.1,528,322.16h3.55S519.15,497.94,528,525.46Z"
transform="translate(-363.96 -73.13)"
fill="#fff8e1"
/>
<path
d="M518.27,314.17s-11.54,32-6.21,46.17c0,0,8-29.3,17.31-33.74s19.09,33.74,19.09,33.74,5.33-24-4.44-43.5c0,0,19.53,10.65,29.3,31.07,0,0,1.78-13.32-21.31-40.84,0,0,20.42,5.33,33.74,17.76,0,0,4.44-9.77-23.08-25.75,0,0,3.55-11.54,24.86-6.21,0,0,0-15.09-33.74-12.43,0,0,0-9.77,22.19-8,0,0,0-12.43-25.75-8,0,0,5.33-8,8.88-9.77,0,0-7.1-.89-12.43,3.55,0,0,.89-16-12.43-22.19l-1.78,22.19s-14.92-17.59-11.54-14.2c.89.89,3.55,11.54,2.66,16.87,0,0-15.09-12.43-33.74.89,0,0,23.08,1.78,26.63,9.77,0,0-19.53-3.55-24-.89,0,0,15.09,5.33,14.2,8.88,0,0-26.63,0-30.18,9.77,0,0,27.52,3.55,29.3,6.21,0,0-32,23.08-33.74,29.3,0,0,32.85-19.53,38.17-19.53s-24,28.41-22.19,35.51C488.08,340.8,512.05,312.4,518.27,314.17Z"
transform="translate(-363.96 -73.13)"
fill="#c8e6c9"
/>
<path
d="M539.71,443.68s-39.43,12.91-29.44,81.79h18.64l22.24-70.34Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
<path
d="M662.39,443.68s38.11,14.68,28.11,83.56l-18.3-.14-21.26-72Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
<path
d="M541.35,330.82s-18,92.53-27.81,87.62c0,0,94.69,81.78,178.29,0,0,0-14.72-66.36-36-87.62Z"
transform="translate(-363.96 -73.13)"
fill="#333"
/>
<circle cx={238.09} cy={252.78} r={70.33} fill="#333" />
<path
d="M673.11,527.1s8.18-18,1.64-40.89-1.64-1.64-1.64-1.64l-11.45-40.89H539l-11.45,49.07s-6.72,22.72,1.64,32.71"
transform="translate(-363.96 -73.13)"
opacity={0.1}
/>
<path
d="M662.39,443.68H539.71l-11.45,49.07s-11.39,32.55,1.64,32.71c144.62,1.78.8,0,143.94,1.64,0,0,8.18-18,1.64-40.89s-1.64-1.64-1.64-1.64Z"
transform="translate(-363.96 -73.13)"
fill="#f55f44"
/>
<path
d="M213.38,329.84h49.07a0,0,0,0,1,0,0V386.9a6.73,6.73,0,0,1-6.73,6.73H220.1a6.73,6.73,0,0,1-6.73-6.73V329.84a0,0,0,0,1,0,0Z"
opacity={0.1}
/>
<path
d="M213.38,328h49.07a0,0,0,0,1,0,0v57.07a6.73,6.73,0,0,1-6.73,6.73H220.1a6.73,6.73,0,0,1-6.73-6.73V328A0,0,0,0,1,213.38,328Z"
fill="#be7c5e"
/>
<path
d="M577.42,408.22a70.62,70.62,0,0,0,49.07.14v-6H577.42Z"
transform="translate(-363.96 -73.13)"
opacity={0.1}
/>
<circle cx={238.09} cy={268.05} r={70.33} fill="#be7c5e" />
<path
d="M534.81,314.46H668.93s-11.45-54.16-62.15-50.71S534.81,314.46,534.81,314.46Z"
transform="translate(-363.96 -73.13)"
fill="#333"
/>
<ellipse cx={169.21} cy={265.05} rx={6.54} ry={12.27} fill="#be7c5e" />
<ellipse cx={306.61} cy={265.05} rx={6.54} ry={12.27} fill="#be7c5e" />
<path
d="M534.81,316.28H668.93s-11.45-54.16-62.15-50.71S534.81,316.28,534.81,316.28Z"
transform="translate(-363.96 -73.13)"
opacity={0.1}
/>
<circle cx={395.33} cy={571.44} r={69.04} fill="#be7c5e" />
<path
d="M803.92,656.74h0c-20,4.63-33.79-8.43-38.42-28.46l-46-171a37.5,37.5,0,0,1,28-44.85h0a37.5,37.5,0,0,1,44.85,28l37.58,175.38C834.52,635.9,824,652.11,803.92,656.74Z"
transform="translate(-363.96 -73.13)"
fill="url(#92cc4875-fc0d-4098-9c41-d6fc57a0b2d9)"
/>
<rect
x={746.3}
y={417.86}
width={62.84}
height={250.9}
rx={31.42}
ry={31.42}
transform="translate(-466.33 115.97) rotate(-13.01)"
fill="#be7c5e"
/>
<path
d="M511.71,533.62h0a33.49,33.49,0,0,1-46,10.47l-66.2-42.83a33.49,33.49,0,0,1-10.47-46h0a33.49,33.49,0,0,1,46-10.47l66.2,42.83A33.49,33.49,0,0,1,511.71,533.62Z"
transform="translate(-363.96 -73.13)"
fill="url(#8bf4a49d-4b4a-4ad7-b49f-3914cd869768)"
/>
<path
d="M495.1,624.29h0a33.79,33.79,0,0,1-46.46,10.56l-41-29.91a33.79,33.79,0,0,1-10.56-46.46h0a33.79,33.79,0,0,1,46.46-10.56l41,29.91A33.79,33.79,0,0,1,495.1,624.29Z"
transform="translate(-363.96 -73.13)"
fill="url(#d03a91ec-a732-40ea-b889-bca828f7dae8)"
/>
<path
d="M491.8,622.07h0a31.51,31.51,0,0,1-43.33,9.85L410.23,604a31.51,31.51,0,0,1-9.85-43.33h0a31.51,31.51,0,0,1,43.33-9.85l38.24,27.89A31.51,31.51,0,0,1,491.8,622.07Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
<path
d="M508.09,531.3h0a31.51,31.51,0,0,1-43.33,9.85l-62.29-40.3a31.51,31.51,0,0,1-9.85-43.33h0A31.51,31.51,0,0,1,436,447.67L498.24,488A31.51,31.51,0,0,1,508.09,531.3Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
<path
d="M528.84,443.4h0a33.64,33.64,0,0,1-46.26,10.51l-83.9-54.63A33.64,33.64,0,0,1,388.17,353h0a33.64,33.64,0,0,1,46.26-10.51l83.9,54.63A33.64,33.64,0,0,1,528.84,443.4Z"
transform="translate(-363.96 -73.13)"
fill="url(#f5bc8f66-26fb-41cb-b6de-69223130756b)"
/>
<path
d="M524.38,440.54h0a31.51,31.51,0,0,1-43.33,9.85l-78.58-51.16a31.51,31.51,0,0,1-9.85-43.33h0A31.51,31.51,0,0,1,436,346l78.58,51.16A31.51,31.51,0,0,1,524.38,440.54Z"
transform="translate(-363.96 -73.13)"
fill="#be7c5e"
/>
</svg>
);
UndrawSelfie.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawSelfie.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawSelfie;