react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
207 lines (202 loc) • 13.1 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
const UndrawExperts = props => (
<svg className={props.class} id='747ad91c-18bb-4936-b655-cddf352f94cc' dataName='Layer 1' xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink' width='1081.95' height='662.59' style={{height:props.height,width:'100%'}}
viewBox='0 0 1081.95 662.59'>
<defs>
<lineargradient id='d97f7624-c4eb-4e7b-b35a-7f9180afe4f8' x1='863.76'
y1='427.61' x2='863.76' gradientunits='userSpaceOnUse'>
<stop offset='0' stopColor='gray' stopOpacity='.25' />
<stop offset='.54' stopColor='gray' stopOpacity='.12' />
<stop offset='1' stopColor='gray' stopOpacity='.1' />
</lineargradient>
<lineargradient id='bc158a6b-8b54-4024-9d86-b607f354f9d2' x1='853.83'
y1='307.88' x2='989.67' y2='307.88' xlinkHref='#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8'>
<lineargradient id='67a622da-4d2c-40ec-a156-0953688d8952' x1='218.19'
y1='542.13' x2='218.19' y2='114.52' xlinkHref='#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8'>
<lineargradient id='22f5c963-4955-4fd8-94b1-7c287e1ee373' x1='211.43'
y1='414.37' x2='362.74' y2='414.37' xlinkHref='#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8'>
<lineargradient id='435772a6-cef7-4b13-8b4e-baec559ce710' x1='543.14'
y1='662.59' x2='543.14' y2='234.98' xlinkHref='#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8'>
<lineargradient id='d5aea71b-2b89-434e-8ba8-1990ff8adea2' x1='526.51'
y1='527.82' x2='701.7' y2='527.82' xlinkHref='#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8'
/></lineargradient>
</lineargradient>
</lineargradient>
</lineargradient>
</defs>
<rect x='645.57' width='436.38' height='427.61' fill='url(#d97f7624-c4eb-4e7b-b35a-7f9180afe4f8)'
opacity='.5' />
<rect x='647.76' y='3.29' width='432' height='421.03' fill='#fff' />
<rect x='691.62' y='38.25' width='344.28' height='267.27' fill={props.primaryColor}
opacity='.5' />
<path d='M988,341a40.35,40.35,0,0,0-12-28c-6.76-6.64-15.85-14.26-25.7-18.87h0l-.06,0A43.5,43.5,0,0,0,937,290.13V273.77a36.7,36.7,0,0,0,8.19-10.63h0v1.31S960.88,248.6,960.52,230c.23-11.17-5.14-23.46-23.15-34-41.82-24.4-57.84,11.08-60.89,19.29a5.5,5.5,0,0,0-.44,1.25l-.12.38,0,0a4.38,4.38,0,0,0,0,1.16h0l0,.12,0,0a4.84,4.84,0,0,0,0,.62c0,2.74,2.33,5.26,6.28,7.32A36.58,36.58,0,0,0,900.44,281V291.5l-.81-1.53s-5.59,3.35-12.8,8.49h0c-12.08,8.61-28.72,22.25-31.22,33.52-4,18,0,94.18,0,94.18l134.06,2Zm-41.37-79.35h0Zm-1.34,1.47h0Zm.1-.11.05-.05Zm.2-.21,0,0Zm-69.5-44v0Zm.18.59,0,.06Zm.25.59,0,.08Zm.32.58.06.1Zm.39.57.08.11Zm.46.56.11.12Zm.53.55.13.13Zm4.54,3,.14.07h0Zm-3.94-2.49.16.14Zm.66.53.19.14Zm.73.51.22.15Zm.79.5.26.15Zm.85.48.29.16Z'
transform='translate(-59.03 -118.7)' fill='url(#bc158a6b-8b54-4024-9d86-b607f354f9d2)'
opacity='.5' />
<rect x='841.99' y='155.57' width='35.59' height='52.2' fill={props.skinColor}
/>
<path d='M902.2,282.57c3.72,1.32,5.32,2.37,9.49,2.37a35.42,35.42,0,0,0,23.73-9.12v-.37H902.2Z'
transform='translate(-59.03 -118.7)' opacity='.05' />
<circle cx='853.85' cy='129.47' r='35.59' fill={props.skinColor} />
<circle cx='821.82' cy='118.79' fill='#ff0' />
<path d='M880.84,237.49' transform='translate(-59.03 -118.7)' fill='#ff0'
/>
<ellipse cx='849.93' cy='101.34' rx='31.81' ry='12.09' />
<path d='M915.32,224.5l29.26,17.81v22s38.17-38.58-7.63-65.29-59.8,20.36-59.8,20.36S889.87,229.59,915.32,224.5Z'
transform='translate(-59.03 -118.7)' />
<ellipse cx='886.9' cy='129.47' rx='3.56' ry='5.93' fill={props.skinColor} />
<g opacity='.05'>
<path d='M944.58,242.31,925.1,230.46A74.71,74.71,0,0,1,909,232.13c-17.1,0-31-5.13-31.77-11.56l0,.11,0,0a4.71,4.71,0,0,0,0,.6c0,6.68,14.24,12.09,31.81,12.09a74.71,74.71,0,0,0,16.15-1.67l19.47,11.85Z'
transform='translate(-59.03 -118.7)' />
<path d='M944.58,264.35v1.27s15.25-15.42,14.9-33.52C959.12,249.64,944.58,264.35,944.58,264.35Z'
transform='translate(-59.03 -118.7)' />
</g>
<path d='M900.22,290.45s-38.94,23.36-42.83,40.88,0,91.64,0,91.64l130.44,1.95-1.66-84.82a39.27,39.27,0,0,0-11.7-27.25c-9.74-9.57-24.47-21.26-39.21-22.4l-17.52,33.1Z'
transform='translate(-59.03 -118.7)' fill='#4d8af0' />
<path d='M882.24,330.1s-10.18,53.43-1.27,70' transform='translate(-59.03 -118.7)'
opacity='.05' />
<path d='M956,330.1s10.18,53.43,1.27,70' transform='translate(-59.03 -118.7)'
opacity='.05' />
<polygon points='841.02 171.95 877.99 171.43 853.75 233.02 841.02 171.95'
fill='#fff' />
<polygon points='841.02 168.14 841.02 171.95 877.92 171.95 877.99 168.14 841.02 168.14'
fill='#fff' />
<rect x='856.29' y='168.14' width='5.09' height='5.09' />
<polygon points='841.02 171.95 833.39 179.59 849.93 207.77 841.02 171.95'
fill='#4d8af0' />
<polygon points='876.64 174.5 883.01 180.86 863.92 206.3 876.64 174.5'
fill='#4d8af0' />
<polygon points='841.02 171.95 833.39 179.59 849.93 207.77 841.02 171.95'
fill='#fff' opacity='.1' />
<polygon points='876.64 174.5 883.01 180.86 863.92 206.3 876.64 174.5'
fill='#fff' opacity='.1' />
<polygon points='858.83 170.68 838.48 256.48 851.2 275.56 867.74 256.48 858.83 170.68'
/>
<rect x='715.95' y='343.06' width='304' height='14' fill='#e0e0e0' />
<rect x='764.45' y='371.06' width='207' height='14' fill='#e0e0e0' />
<rect y='114.52' width='436.38' height='427.61' fill='url(#67a622da-4d2c-40ec-a156-0953688d8952)'
opacity='.5' />
<rect x='2.19' y='117.81' width='432' height='421.03' fill='#fff' />
<rect x='46.05' y='152.77' width='344.28' height='267.27' fill={props.primaryColor}
opacity='.5' />
<path d='M357.18,488.85h5.56L361,471.05l-.19,0c1.06-10.88,2.65-59.09-49.18-78.3L307,389.7l-.35.31V377A37.26,37.26,0,0,0,315,366.24h0v1.33A65.48,65.48,0,0,0,326.2,351a65.4,65.4,0,0,1-9.92,13.9v-.12c6.51-7.43,33.13-41.92-9.29-66.67-47.78-27.87-56.8,18.89-56.8,18.89L254,322.1s-9.25,18.52-9.25,27.26a37.14,37.14,0,0,0,24.75,35v11.1c-3.45,1.26-51.4,19.81-51.4,75.58l-6.68,17.8,2.23,1h0v49.61h109s6.68-52.85,4.45-70.65l6.68,4.45v15.58h1.48v.39h-.43l.43,1.44v47.68h21.88V490.68l.25-1.44h-.25Zm-123.66,4.08h0l.16-4.08Z'
transform='translate(-59.03 -118.7)' fill='url(#22f5c963-4955-4fd8-94b1-7c287e1ee373)'
opacity='.5' />
<rect x='211.21' y='259.53' width='35.59' height='52.2' fill={props.skinColor}
/>
<path d='M271.43,386.53c3.72,1.32,5.32,2.37,9.49,2.37a35.41,35.41,0,0,0,23.73-9.12v-.37H271.43Z'
transform='translate(-59.03 -118.7)' opacity='.05' />
<circle cx='223.08' cy='233.43' r='35.59' fill={props.skinColor} />
<circle cx='191.05' cy='222.75' fill='#ff0' />
<path d='M250.07,341.45' transform='translate(-59.03 -118.7)' fill='#ff0'
/>
<path d='M284.54,334.82l29.26,11.45v22S352,329.74,306.17,303c-41.18-24-48.64,4.91-53.82,10.47a1.34,1.34,0,0,0,.07,1.9C257.51,320.16,261.86,339.36,284.54,334.82Z'
transform='translate(-59.03 -118.7)' fill='#4d4545' />
<rect x='274.27' y='367.13' width='20.97' height='52.25' fill={props.skinColor}
/>
<polygon points='272.85 352.2 272.85 367.13 300.57 367.13 298.88 350.07 272.85 352.2'
fill='#fff' />
<polygon points='157.68 367.13 157.68 420.45 174.74 420.45 176.72 371.04 157.68 367.13'
fill={props.skinColor} />
<path d='M282.82,411.19l-12.38-14.93S221,413.32,221,468.77l14.93,17.06-2.13,53.32h87.44s6.4-55.45,4.27-72.51l6.4,4.27h25.59s9.84-59.72-52-78.91Z'
transform='translate(-59.03 -118.7)' fill='#235067' />
<polygon points='161.94 350.07 155.55 367.13 176.49 376.73 176.87 367.13 161.94 350.07'
fill='#fff' />
<polygon points='202.62 283.54 211 302.29 222.97 292.45 211.41 278.83 202.62 283.54'
opacity='.05' />
<polygon points='202.62 282.27 211 301.01 222.97 291.18 211.41 277.56 202.62 282.27'
fill='#fff' />
<polygon points='247.14 273.37 254.77 278.46 233.15 298.81 225.58 292.24 247.14 273.37'
opacity='.05' />
<polygon points='247.14 272.1 254.77 277.18 233.15 297.54 225.58 290.97 247.14 272.1'
fill='#fff' />
<path d='M237.47,481.12a76,76,0,0,1,15.27-45.8' transform='translate(-59.03 -118.7)'
opacity='.05' />
<polygon points='263.68 349.7 263.68 342.06 271.31 347.15 266.22 345.88 263.68 349.7'
opacity='.05' />
<polygon points='273.86 367.51 274.27 368.88 295.24 368.88 295.48 367.51 273.86 367.51'
opacity='.05' />
<polygon points='157.68 368.11 157.68 369.57 176.38 377.6 175.9 376.41 157.68 368.11'
opacity='.05' />
<path d='M324.58,353.71a62.69,62.69,0,0,1-9.5,13.32V345l-29.26-11.45c-21.93,4.39-25.39-13.25-31.54-18.9a1.35,1.35,0,0,0-1.9.08l0,0a1.34,1.34,0,0,0,.07,1.9c5.1,4.78,9.44,24,32.13,19.44l29.26,11.45v22A62.76,62.76,0,0,0,324.58,353.71Z'
transform='translate(-59.03 -118.7)' opacity='.05' />
<ellipse cx='256.12' cy='233.43' rx='3.56' ry='5.93' fill={props.skinColor} />
<rect x='58.95' y='452.06' width='304' height='14' fill='#e0e0e0' />
<rect x='107.45' y='480.06' width='207' height='14' fill='#e0e0e0' />
<rect x='324.95' y='234.98' width='436.38' height='427.61' fill='url(#435772a6-cef7-4b13-8b4e-baec559ce710)'
opacity='.5' />
<rect x='327.14' y='238.27' width='432' height='421.03' fill='#fff' />
<rect x='371' y='273.24' width='344.28' height='267.27' fill={props.primaryColor}
opacity='.5' />
<path d='M632.51,558.78l1-.75,1.43-1.06h0l66.76-49.59-22.95-91.79s0-.11,0-.3c.19-2.8,1.26-24.47-10.45-20.56-11.44,3.81-7.2,19.82-6.38,22.54l.13.4,14.6,77.19-46.4,27.06-6.44-.72a57.9,57.9,0,0,0,11.11-34.69c0-28.8-19.61-52.15-43.81-52.15s-43.81,23.35-43.81,52.15c0,21.57,11,40.09,26.69,48l-16.61,8.31v.09c-4.76-1-22.82-.7-15.5,65.58a69.92,69.92,0,0,1-10.81,45.8l-4.58,6.37,114.35.7h.35S625,635.41,632.51,558.78Z'
transform='translate(-59.03 -118.7)' fill='url(#d5aea71b-2b89-434e-8ba8-1990ff8adea2)'
opacity='.5' />
<path d='M559.4,543.37s-23.6-10.19-16.72,59.84a82.67,82.67,0,0,1-12.87,53.17l-1.45,2.23H550.3l16.52-17.5Z'
transform='translate(-59.03 -118.7)' fill={props.accentColor} />
<path d='M677.25,418.22s0-.1,0-.29l-16.5,1.94.12.4,14.31,75.66-49.08,28.63,2,36.81,71.57-53.17Z'
transform='translate(-59.03 -118.7)' fill={props.accentColor} />
<ellipse cx='532.34' cy='369.04' rx='42.94' ry='51.12' fill='#ff0' />
<rect x='523.14' y='386.42' width='30.67' height='44.99' fill={props.skinColor}
/>
<path d='M591.37,543l-8.18-12.27L558.65,543V563.3S549.74,579,557,597.08c-2,26.58-7.42,61.42-7.42,61.42l90.91.67s-16.36-26.23-8.18-103.93l-2-32.72-18.4-2Z'
transform='translate(-59.03 -118.7)' fill={props.accentColor} />
<polygon points='571.19 403.81 573.24 405.85 575.28 438.1 572.9 439.87 571.19 403.81'
opacity='.05' />
<path d='M583.19,512.28c3.2,1.13,4.59,2,8.18,2a30.52,30.52,0,0,0,20.45-7.86v-.32H583.19Z'
transform='translate(-59.03 -118.7)' opacity='.05' />
<circle cx='533.36' cy='363.93' r='30.67' fill={props.skinColor} />
<ellipse cx='564.04' cy='363.93' rx='3.07' ry='5.11' fill={props.skinColor} />
<circle cx='505.76' cy='354.73' fill='#ff0' />
<path d='M564.78,473.43' transform='translate(-59.03 -118.7)' fill='#ff0'
/>
<polygon points='506.58 354.33 506.58 355.77 559.23 355.77 559.23 357.21 505.86 357.21 506.58 354.33'
opacity='.05' />
<rect x='505.76' y='330.19' width='53.17' height='26.58' fill='#ff0' />
<path d='M667,397.77c-11.21,3.74-7.06,19.43-6.26,22.1l16.5-1.94C677.46,415.18,678.51,393.94,667,397.77Z'
transform='translate(-59.03 -118.7)' fill={props.skinColor} />
<g opacity='.05'>
<path d='M551.39,658.5s5.38-34.84,7.42-61.42c-7.21-18,1.69-33.78,1.69-33.78V543l22.89-11.45-.55-.82L558.31,543V563.3s-8.9,15.75-1.69,33.78c-2,26.58-7.42,61.42-7.42,61.42l90.91.67v0Z'
transform='translate(-59.03 -118.7)' />
<polygon points='534.19 424.25 554.44 401.98 552.45 401.76 533.26 422.86 534.19 424.25'
/>
</g>
<polygon points='516.46 416.99 532.17 453.17 560.97 403.76 553.01 402.74 533.27 422.47 524.5 412.61 516.46 416.99'
opacity='.05' />
<polygon points='516.46 415.89 532.17 452.08 560.97 402.67 553.01 401.64 533.27 421.38 524.5 411.51 516.46 415.89'
fill='#fff' />
<rect x='391.95' y='569.06' width='304' height='14' fill='#e0e0e0' />
<rect x='440.45' y='597.06' width='207' height='14' fill='#e0e0e0' />
</svg>
);
UndrawExperts.propTypes = {
/**
* Hex color
*/
skinColor: PropTypes.string,
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* Hex color
*/
accentColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawExperts.defaultProps = {
skinColor: '#e2bd95',
primaryColor:'#6c68fb',
hairColor:'#222',
accentColor:'#43d1a0',
height:'100%',
class:''
};
export default UndrawExperts;