react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
517 lines (512 loc) • 15.5 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawWelcome = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="fd1e300e-6133-4b79-9025-3394cccdd89f"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 868 731"
>
<defs>
<linearGradient
id="06147ff9-8cd2-48ac-a1c1-caecd7b6d6a5"
x1={731.5}
y1={630}
x2={731.5}
y2={105}
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="a49b107c-cf66-4ec6-8282-86ab0caa351c"
x1={136.5}
y1={632}
x2={136.5}
y2={107}
xlinkHref="#06147ff9-8cd2-48ac-a1c1-caecd7b6d6a5"
/>
<linearGradient
id="1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
x1={136.5}
y1={190}
x2={136.5}
y2={159}
gradientUnits="userSpaceOnUse"
>
<stop offset={0} stopOpacity={0.12} />
<stop offset={0.55} stopOpacity={0.09} />
<stop offset={1} stopOpacity={0.02} />
</linearGradient>
<linearGradient
id="b9a200bd-353c-4381-b6e1-073e5213fd80"
x1={732.5}
y1={237}
x2={732.5}
y2={206}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="bd740118-0fc8-46fe-baa7-1287731d1ce1"
x1={731.5}
y1={285}
x2={731.5}
y2={254}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="be3dcc85-6798-4804-ad40-40dd5e1bf54d"
x1={731.5}
y1={333}
x2={731.5}
y2={302}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="7951aed1-d6b7-43ca-8fc6-4bf3d931fa96"
x1={731.5}
y1={381}
x2={731.5}
y2={350}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="f7ec873f-c4fc-49e9-9fd3-dd83f2d4e56d"
x1={731.5}
y1={429}
x2={731.5}
y2={398}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="ccdfa92b-51d8-4ad9-a821-9e1bef0af2d7"
x1={731.5}
y1={477}
x2={731.5}
y2={446}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="073d1fbf-61de-45f9-b512-c4899ce091e5"
x1={731.5}
y1={525}
x2={731.5}
y2={494}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="24835175-14ba-470d-95d2-6a8277fcc694"
x1={731.5}
y1={573}
x2={731.5}
y2={542}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="5ff08f58-18b8-40ea-89dd-f61e941fbca5"
x1={731.5}
x2={731.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="35037972-f4cb-4e52-85d9-6feea861c78a"
x1={51}
y1={223.5}
x2={222}
y2={223.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="c11cf938-6a5f-4793-b594-126852022070"
x1={51}
y1={270.5}
x2={222}
y2={270.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="68e8be81-276e-4a4c-a07a-ad0995a3c0be"
x1={51}
y1={317.5}
x2={222}
y2={317.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="0822cc54-0c46-479a-a5ec-03e9a82962c7"
x1={51}
y1={365.5}
x2={222}
y2={365.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="7019b20f-90f6-479e-a238-57a05bc6be32"
x1={51}
y1={413.5}
x2={222}
y2={413.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="d42fcc48-79e2-414c-a733-2be802693088"
x1={51}
y1={461.5}
x2={222}
y2={461.5}
xlinkHref="#1f9811ff-c8f4-40a6-be63-e60ca0341cbe"
/>
<linearGradient
id="0c4558fc-2870-4523-bb15-f13635f1ebad"
x1={132}
y1={664}
x2={735}
y2={664}
xlinkHref="#06147ff9-8cd2-48ac-a1c1-caecd7b6d6a5"
/>
<linearGradient
id="5f8c78d2-e119-41dc-88f5-5bfd3b7b4286"
x1={435}
y1={89}
x2={435}
y2={50}
xlinkHref="#06147ff9-8cd2-48ac-a1c1-caecd7b6d6a5"
/>
<linearGradient
id="0b3309b2-8c80-4e02-ba09-43858a03760e"
x1={601}
y1={704.8}
x2={601}
y2={406}
xlinkHref="#06147ff9-8cd2-48ac-a1c1-caecd7b6d6a5"
/>
</defs>
<title>welcome</title>
<rect x={69} width={731} height={731} fill={props.primaryColor} opacity={0.2} />
<rect
x={179}
y={68.25}
width={510}
height={595.5}
fill={props.primaryColor}
opacity={0.5}
/>
<rect
x={595}
y={105}
width={273}
height={525}
fill="url(#06147ff9-8cd2-48ac-a1c1-caecd7b6d6a5)"
/>
<rect
y={107}
width={273}
height={525}
fill="url(#a49b107c-cf66-4ec6-8282-86ab0caa351c)"
/>
<rect x={604} y={113} width={255} height={506} fill={props.primaryColor} />
<rect
x={175}
y={197.5}
width={255}
height={506}
transform="translate(439 816.5) rotate(-180)"
fill={props.primaryColor}
/>
<rect
x={51}
y={159}
width={171}
height={31}
fill="url(#1f9811ff-c8f4-40a6-be63-e60ca0341cbe)"
/>
<rect
x={647}
y={206}
width={171}
height={31}
fill="url(#b9a200bd-353c-4381-b6e1-073e5213fd80)"
/>
<rect
x={646}
y={254}
width={171}
height={31}
fill="url(#bd740118-0fc8-46fe-baa7-1287731d1ce1)"
/>
<rect
x={646}
y={302}
width={171}
height={31}
fill="url(#be3dcc85-6798-4804-ad40-40dd5e1bf54d)"
/>
<rect
x={646}
y={350}
width={171}
height={31}
fill="url(#7951aed1-d6b7-43ca-8fc6-4bf3d931fa96)"
/>
<rect
x={646}
y={398}
width={171}
height={31}
fill="url(#f7ec873f-c4fc-49e9-9fd3-dd83f2d4e56d)"
/>
<rect
x={646}
y={446}
width={171}
height={31}
fill="url(#ccdfa92b-51d8-4ad9-a821-9e1bef0af2d7)"
/>
<rect
x={646}
y={494}
width={171}
height={31}
fill="url(#073d1fbf-61de-45f9-b512-c4899ce091e5)"
/>
<rect
x={646}
y={542}
width={171}
height={31}
fill="url(#24835175-14ba-470d-95d2-6a8277fcc694)"
/>
<rect
x={646}
y={159}
width={171}
height={31}
fill="url(#5ff08f58-18b8-40ea-89dd-f61e941fbca5)"
/>
<rect
x={51}
y={208}
width={171}
height={31}
fill="url(#35037972-f4cb-4e52-85d9-6feea861c78a)"
/>
<rect
x={51}
y={255}
width={171}
height={31}
fill="url(#c11cf938-6a5f-4793-b594-126852022070)"
/>
<rect
x={51}
y={302}
width={171}
height={31}
fill="url(#68e8be81-276e-4a4c-a07a-ad0995a3c0be)"
/>
<rect
x={51}
y={350}
width={171}
height={31}
fill="url(#0822cc54-0c46-479a-a5ec-03e9a82962c7)"
/>
<rect
x={51}
y={398}
width={171}
height={31}
fill="url(#7019b20f-90f6-479e-a238-57a05bc6be32)"
/>
<rect x={55} y={163} width={164} height={24} fill="#fff" />
<rect x={54.5} y={210} width={164} height={24} fill="#fff" />
<rect x={54.5} y={258} width={164} height={24} fill="#fff" />
<rect x={54.5} y={306} width={164} height={24} fill="#fff" />
<rect x={54.5} y={354} width={164} height={24} fill="#fff" />
<rect x={54.5} y={402} width={164} height={24} fill="#fff" />
<rect
x={51}
y={446}
width={171}
height={31}
fill="url(#d42fcc48-79e2-414c-a733-2be802693088)"
/>
<rect x={54.5} y={450} width={164} height={24} fill="#fff" />
<rect x={54.5} y={450} width={164} height={24} fill="#fff" />
<rect x={54.5} y={498} width={164} height={24} fill="#fff" />
<rect x={54.5} y={546} width={164} height={24} fill="#fff" />
<rect x={650} y={162} width={164} height={24} fill="#fff" />
<rect x={650} y={210} width={164} height={24} fill="#fff" />
<rect x={650} y={258} width={164} height={24} fill="#fff" />
<rect x={650} y={306} width={164} height={24} fill="#fff" />
<rect x={650} y={354} width={164} height={24} fill="#fff" />
<rect x={650} y={402} width={164} height={24} fill="#fff" />
<rect x={650} y={450} width={164} height={24} fill="#fff" />
<rect x={650} y={498} width={164} height={24} fill="#fff" />
<rect x={650} y={546} width={164} height={24} fill="#fff" />
<rect
x={132}
y={645}
width={603}
height={38}
fill="url(#0c4558fc-2870-4523-bb15-f13635f1ebad)"
/>
<rect x={137} y={649} width={594} height={30} fill={props.primaryColor} />
<rect
x={134}
y={50}
width={602}
height={39}
fill="url(#5f8c78d2-e119-41dc-88f5-5bfd3b7b4286)"
/>
<rect x={137} y={53} width={594} height={30} fill={props.primaryColor} />
<rect
x={289}
y={113}
width={292}
height={506}
fill="#263238"
opacity={0.5}
/>
<path
d="M825.66,417.55c7,9.38-3.48,20.46-3.48,20.46l1.76.61c-2.59,2.87-12.82,15.82-52.26,74.4-50.5,75-118.55,93.71-118.55,93.71h0a84,84,0,0,0-27.73-14.31v-7.08a83,83,0,0,0,55.3-53.48,85.08,85.08,0,0,0,9.14-38.44c0-48-39.77-86.94-88.82-86.94s-88.82,38.93-88.82,86.94a85.08,85.08,0,0,0,9.14,38.44,83,83,0,0,0,55.3,53.48v7.08a84,84,0,0,0-27.73,14.31h0S480.83,588,430.33,513c-39.44-58.58-49.67-71.54-52.26-74.4l1.76-.61s-10.45-11.08-3.48-20.46-46.15-20.46-40.06,0,13.93,30.69,13.93,30.69S461.42,623.6,519.47,652.58a80.43,80.43,0,0,0-2.06,18.12V704.8H684.59V670.7a80.43,80.43,0,0,0-2.06-18.12c58-29,169.25-204.35,169.25-204.35s7.84-10.23,13.93-30.69S818.69,408.17,825.66,417.55Z"
transform="translate(-166 -84.5)"
fill="url(#0b3309b2-8c80-4e02-ba09-43858a03760e)"
/>
<circle cx={435} cy={413.47} r={85.06} fill="#263238" />
<circle cx={435} cy={426.82} r={80.06} fill="#f8c198" />
<circle cx={403.31} cy={409.3} r={10.01} fill="#263238" />
<circle cx={468.36} cy={409.3} r={10.01} fill="#263238" />
<path
d="M624.35,548c0,6-10.45,15.85-23.35,15.85S577.65,554,577.65,548s10.45-5.84,23.35-5.84S624.35,542,624.35,548Z"
transform="translate(-166 -84.5)"
fill="#fff"
/>
<circle cx={405.81} cy={409.3} r={3.34} fill="#fff" />
<circle cx={471.69} cy={409.3} r={3.34} fill="#fff" />
<path
d="M609,466.88c-4.88,0-9.26-4.24-9.78-9.09a12,12,0,0,1,7-11.75,3.42,3.42,0,0,1,1.47-.38c1.68,0,2.51,2,3.05,3.59,1.68,4.92,4.66,9.72,9.34,12s11.22,1.11,13.69-3.47c-6.62-2.95-9.45-12.21-5.6-18.35,1.49-2.37,3.81-4.38,4.28-7.14.86-5-4.62-8.64-9.47-10.14-14-4.33-62.8-4.81-65.49,16.08C554.67,460.27,593.63,469.8,609,466.88Z"
transform="translate(-166 -84.5)"
fill="#263238"
/>
<ellipse
cx={524.27}
cy={512.15}
rx={5}
ry={14.18}
transform="translate(-317.38 143.66) rotate(-21.53)"
fill="#f8c198"
/>
<ellipse
cx={677.73}
cy={512.15}
rx={14.18}
ry={5}
transform="translate(-213.42 870.11) rotate(-68.47)"
fill="#f8c198"
/>
<path
d="M650.91,608.84s65.17-18.3,113.54-91.69,50.87-73.59,50.87-73.59l25.85,10.21S721.09,647.25,669.39,657.26,650.91,608.84,650.91,608.84Z"
transform="translate(-166 -84.5)"
fill="#ff9800"
/>
<path
d="M812.83,443.77s10-10.84,3.34-20,44.2-20,38.36,0-13.34,30-13.34,30Z"
transform="translate(-166 -84.5)"
fill="#f8c198"
/>
<path
d="M551.09,608.84s-65.17-18.3-113.54-91.69-50.87-73.59-50.87-73.59l-25.85,10.21s120.09,193.48,171.8,203.49S551.09,608.84,551.09,608.84Z"
transform="translate(-166 -84.5)"
fill="#ff9800"
/>
<path
d="M389.17,443.77s-10-10.84-3.34-20-44.2-20-38.36,0,13.34,30,13.34,30Z"
transform="translate(-166 -84.5)"
fill="#f8c198"
/>
<g opacity={0.2}>
<path
d="M628.29,427.27c-.48,2.76-2.8,4.76-4.28,7.14-3.37,5.38-1.62,13.16,3.32,17a12.79,12.79,0,0,1,.85-11.14c1.49-2.37,3.81-4.38,4.28-7.14.54-3.13-1.41-5.73-4.13-7.6A6,6,0,0,1,628.29,427.27Z"
transform="translate(-166 -84.5)"
fill="#fff"
/>
<path
d="M607.46,446.51c-.32-.75-.62-1.51-.88-2.27-.54-1.59-1.37-3.54-3.05-3.59a3.42,3.42,0,0,0-1.47.38,12,12,0,0,0-7,11.75,10.53,10.53,0,0,0,4.47,7.35,9.4,9.4,0,0,1-.3-1.51,12,12,0,0,1,7-11.75A3.87,3.87,0,0,1,607.46,446.51Z"
transform="translate(-166 -84.5)"
fill="#fff"
/>
<path
d="M600.41,462.35c-12.16.51-31.78-4.13-41.45-14,7.22,15.36,37.05,21.79,50,19.32A10.08,10.08,0,0,1,600.41,462.35Z"
transform="translate(-166 -84.5)"
fill="#fff"
/>
<path
d="M628.68,454.11c-2.92,3.43-8.58,4.15-12.75,2.12a14.54,14.54,0,0,1-3.7-2.61,17.84,17.84,0,0,0,7.87,8.44c4.68,2.27,11.22,1.11,13.69-3.47A11.88,11.88,0,0,1,628.68,454.11Z"
transform="translate(-166 -84.5)"
fill="#fff"
/>
</g>
<path
d="M837.85,453.77S717.76,647.25,666,657.26a60.33,60.33,0,0,1-9.07,1.11,53.05,53.05,0,0,0,12.41-1.11c51.71-10,171.8-203.49,171.8-203.49l-2.68-.95C838.09,453.45,837.85,453.77,837.85,453.77Z"
transform="translate(-166 -84.5)"
fill="#fff"
opacity={0.2}
/>
<path
d="M364.15,453.77S484.24,647.25,536,657.26a60.33,60.33,0,0,0,9.07,1.11,53.05,53.05,0,0,1-12.41-1.11c-51.71-10-171.8-203.49-171.8-203.49l2.68-.95C363.91,453.45,364.15,453.77,364.15,453.77Z"
transform="translate(-166 -84.5)"
fill="#fff"
opacity={0.2}
/>
<path
d="M435,506.88h0a80.06,80.06,0,0,1,80.06,80.06V620.3a0,0,0,0,1,0,0H354.94a0,0,0,0,1,0,0V586.94A80.06,80.06,0,0,1,435,506.88Z"
fill="#ff9800"
/>
<path
d="M601.83,591.8h0a80.93,80.93,0,0,0-8.72.47c1,0,1.91-.06,2.88-.06h0a80.06,80.06,0,0,1,80.06,80.06v32.94h5.84V671.86A80.06,80.06,0,0,0,601.83,591.8Z"
transform="translate(-166 -84.5)"
fill="#fff"
opacity={0.2}
/>
<path
d="M600.17,591.8h0a80.93,80.93,0,0,1,8.72.47c-1,0-1.91-.06-2.88-.06h0a80.06,80.06,0,0,0-80.06,80.06v32.94h-5.84V671.86A80.06,80.06,0,0,1,600.17,591.8Z"
transform="translate(-166 -84.5)"
fill="#fff"
opacity={0.2}
/>
<rect
x={411.65}
y={484.78}
width={46.7}
height={56.29}
rx={23.35}
ry={23.35}
fill="#f8c198"
/>
</svg>
);
UndrawWelcome.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawWelcome.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawWelcome;