react-undraw-illustrations/src/node_modules/components/UndrawChatting/UndrawChatting.js

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

import React from 'react';
import PropTypes from 'prop-types';

const UndrawChatting = props => (
    
   <svg className={props.class} id='2c32a5d1-9ebb-4e5f-946d-03caca411964' dataName='Layer 1' xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink' width='789.99' height='731' style={{height:props.height,width:'100%'}} viewBox='0 0 789.99 731'>
    <defs>
        <lineargradient id='e8bc579c-b689-4b79-8d3e-12ed6a496947' x1='461.46'
        y1='792.95' x2='746' y2='121.07' gradienttransform='rotate(-.14 -841.696 5577.13)'
        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='cfdf7721-0c02-41fc-8db3-2f80d97037f4' x1='533.21'
        y1='688.58' x2='533.21' y2='490.28' xlinkHref='#e8bc579c-b689-4b79-8d3e-12ed6a496947'>
            <lineargradient id='c1b02b18-c4d9-4578-b739-51fef2fdc4ab' x1='-602.79'
            y1='427.8' x2='-602.79' y2='229.5' gradienttransform='matrix(-1 0 0 1 48 0)'
            xlinkHref='#e8bc579c-b689-4b79-8d3e-12ed6a496947'>
                <lineargradient id='0b093351-16bd-4346-89bf-f32fc0d63148' x1='376.5' y1='427.5'
                x2='376.5' y2='242.61' xlinkHref='#e8bc579c-b689-4b79-8d3e-12ed6a496947'>
                    <lineargradient id='81bfca67-d9d1-4d9e-a40d-a000f0d65a64' x1='3313.5'
                    y1='702.5' x2='3313.5' y2='517.61' gradienttransform='matrix(-1 0 0 1 4122 0)'
                    xlinkHref='#e8bc579c-b689-4b79-8d3e-12ed6a496947' /></lineargradient>
            </lineargradient>
        </lineargradient>
    </defs>
    <path d='M756.67,128.49l-332.5.81A13.66,13.66,0,0,0,410.54,143l1.51,621.89a13.66,13.66,0,0,0,13.7,13.63l332.5-.81A13.66,13.66,0,0,0,771.88,764l-1.51-621.89A13.66,13.66,0,0,0,756.67,128.49Z'
    transform='translate(-205 -84.5)' fill='url(#e8bc579c-b689-4b79-8d3e-12ed6a496947)'
    opacity='.5' />
    <rect x='416.16' y='137.38' width='350.11' height='631.95' rx='13.64'
    ry='13.64' transform='rotate(-.14 -34095.806 84310.093)' fill='#fff' />
    <path id='869b38ff-715e-463a-98e7-ca2bce61d391' dataName='&lt;Path&gt;'
    d='M678.43,153a28.38,28.38,0,0,1-27.91,24.21l-120.93.29a28.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,439,753.86l306-.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(-205 -84.5)' fill={props.primaryColor} opacity='.4' />
    <rect x='548.33' y='160.81' width='78.02' height='4.88' rx='2' ry='2'
    transform='rotate(-.86 -5143.63 13778.86)' fill='#dbdbdb' />
    <circle cx='642.91' cy='161.92' r='2.93' transform='rotate(-.86 -5088.324 13777.942)'
    fill='#dbdbdb' />
    <path d='M632.07,589.13a98.85,98.85,0,1,0-154,82l.06.44a33.84,33.84,0,0,0,11.21,7.13l.13-.44c4.63,4,24.12,10.33,46.51,10.27h.49c14.18,0,29.58-2.5,43.12-9.83,0,0,.12-.26.3-.75a35.21,35.21,0,0,0,9.32-6.38q.08-.57.16-1.12A98.74,98.74,0,0,0,632.07,589.13Z'
    transform='translate(-205 -84.5)' fill='url(#cfdf7721-0c02-41fc-8db3-2f80d97037f4)'
    opacity='.5' />
    <circle cx='328.21' cy='504.64' r='95.89' fill='#f5f5f5' />
    <path d='M496.58,628.57s-22.85,1.87-16.8,43.49A32.82,32.82,0,0,0,490.65,679l12.85-43.49Z'
    transform='translate(-205 -84.5)' fill={props.skinColor} />
    <path d='M570.72,628.57s22.85,1.87,16.8,43.49A32.82,32.82,0,0,1,576.65,679L563.8,635.49Z'
    transform='translate(-205 -84.5)' fill={props.skinColor} />
    <path d='M497.57,560.36S486.7,592,480.77,589c0,0,57.22,49.43,107.75,0,0,0-8.9-15.82-21.75-28.67Z'
    transform='translate(-205 -84.5)' fill='#333' />
    <circle cx='329.25' cy='472.89' r='42.51' fill='#333' />
    <path d='M570.28,628.57H496.15l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z'
    transform='translate(-205 -84.5)' opacity='.1' />
    <path d='M571.27,628.57H497.13l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z'
    transform='translate(-205 -84.5)' opacity='.1' />
    <path d='M570.72,628.57H496.58l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z'
    transform='translate(-205 -84.5)' fill={props.primaryColor} />
    <path d='M314.32,519.46H344a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7A0,0,0,0,1,314.32,519.46Z'
    opacity='.1' />
    <path d='M314.32,518.37H344a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7A0,0,0,0,1,314.32,518.37Z'
    fill={props.skinColor} />
    <path d='M519.38,607.14a42.68,42.68,0,0,0,29.66.08v-3.64H519.38Z' transform='translate(-205 -84.5)'
    opacity='.1' />
    <circle cx='329.25' cy='482.12' r='42.51' fill={props.skinColor} />
    <path d='M493.62,550.47h81.06s-6.92-32.73-37.56-30.64S493.62,550.47,493.62,550.47Z'
    transform='translate(-205 -84.5)' fill='#333' />
    <ellipse cx='287.63' cy='480.31' rx='3.95' ry='7.41' fill={props.skinColor} />
    <ellipse cx='370.66' cy='480.31' rx='3.95' ry='7.41' fill={props.skinColor} />
    <path d='M493.62,551.57h81.06s-6.92-32.73-37.56-30.64S493.62,551.57,493.62,551.57Z'
    transform='translate(-205 -84.5)' opacity='.1' />
    <path d='M551.94,328.35a98.85,98.85,0,1,1,154,82l-.06.44A33.84,33.84,0,0,1,694.67,418l-.13-.44c-4.63,4-24.12,10.33-46.51,10.27h-.49c-14.18,0-29.58-2.5-43.12-9.83,0,0-.12-.26-.3-.75a35.21,35.21,0,0,1-9.32-6.38q-.08-.57-.16-1.12A98.74,98.74,0,0,1,551.94,328.35Z'
    transform='translate(-205 -84.5)' fill='url(#c1b02b18-c4d9-4578-b739-51fef2fdc4ab)'
    opacity='.5' />
    <circle cx='445.79' cy='243.86' r='95.89' fill='#f5f5f5' />
    <path d='M613.2,364.88s-22.85,1.87-16.8,43.49a32.82,32.82,0,0,0,10.87,6.92l12.85-43.49Z'
    transform='translate(-205 -84.5)' fill='#be7c5e' />
    <path d='M687.33,364.88s22.85,1.87,16.8,43.49a32.82,32.82,0,0,1-10.87,6.92L680.41,371.8Z'
    transform='translate(-205 -84.5)' fill='#be7c5e' />
    <path d='M614.18,296.67s-1.76,5.12-4.25,11c-5.44,13,.77,62.71,13.78,68,14.6,6,33.8,9.76,53.75,2.49,17.33-6.32,22.68-63,10.42-76.75-1.44-1.62-2.94-3.23-4.51-4.79Z'
    transform='translate(-205 -84.5)' fill='#333' />
    <circle cx='445.86' cy='209.21' r='42.51' fill='#333' />
    <path d='M686.9,364.88H612.76l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z'
    transform='translate(-205 -84.5)' opacity='.1' />
    <path d='M687.88,364.88H613.74l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z'
    transform='translate(-205 -84.5)' opacity='.1' />
    <path d='M687.33,364.88H613.2l-6.92,29.66s-4.06,13.73,1,19.77,52.28,19.77,87,1a38.68,38.68,0,0,0,1-24.71c-4-13.84-1-1-1-1Z'
    transform='translate(-205 -84.5)' fill={props.secondaryColor} />
    <path d='M430.93,255.78h29.66a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7a0,0,0,0,1,0,0Z'
    opacity='.1' />
    <path d='M430.93,254.68h29.66a0,0,0,0,1,0,0v28.7a9.85,9.85,0,0,1-9.85,9.85h-10a9.85,9.85,0,0,1-9.85-9.85v-28.7A0,0,0,0,1,430.93,254.68Z'
    fill='#be7c5e' />
    <path d='M636,343.45a42.68,42.68,0,0,0,29.66.08v-3.64H636Z' transform='translate(-205 -84.5)'
    opacity='.1' />
    <circle cx='445.86' cy='218.43' r='42.51' fill='#be7c5e' />
    <path d='M610.23,286.79h81.06s-6.92-32.73-37.56-30.64S610.23,286.79,610.23,286.79Z'
    transform='translate(-205 -84.5)' fill='#333' />
    <ellipse cx='404.24' cy='216.62' rx='3.95' ry='7.41' fill='#be7c5e' />
    <ellipse cx='487.27' cy='216.62' rx='3.95' ry='7.41' fill='#be7c5e' />
    <path d='M610.23,287.89h81.06s-6.92-32.73-37.56-30.64S610.23,287.89,610.23,287.89Z'
    transform='translate(-205 -84.5)' opacity='.1' />
    <path d='M210,242.61V385.33H434.86S451.46,418,480,427.5c0,0-9.11-23.14.4-42.17H543V242.61Z'
    transform='translate(-205 -84.5)' fill='url(#0b093351-16bd-4346-89bf-f32fc0d63148)'
    opacity='.5' />
    <path d='M219,247.5v135H444s0,27,27,36c0,0-9-18,0-36h63v-135Z' transform='translate(-205 -84.5)'
    fill='#fff' />
    <rect x='41' y='190' width='180' height='18' fill={props.primaryColor} />
    <rect x='41' y='217' width='243' height='18' fill={props.primaryColor} />
    <rect x='41' y='244' width='216' height='18' fill={props.primaryColor} />
    <path d='M975,517.61V660.33H750.15S733.55,693,705,702.5c0,0,9.11-23.14-.4-42.17H642V517.61Z'
    transform='translate(-205 -84.5)' fill='url(#81bfca67-d9d1-4d9e-a40d-a000f0d65a64)'
    opacity='.5' />
    <path d='M966,522.5v135H741s0,27-27,36c0,0,9-18,0-36H651v-135Z' transform='translate(-205 -84.5)'
    fill='#fff' />
    <rect x='483' y='465' width='180' height='18' fill={props.primaryColor} />
    <rect x='483' y='492' width='243' height='18' fill={props.primaryColor} />
    <rect x='483' y='519' width='216' height='18' fill={props.primaryColor} />
    <g opacity='.5' fill='#47e6b1'>
        <rect x='84' y='714' width='3' height='17' />
        <rect x='289' y='798.5' width='3' height='17' transform='rotate(90 230.25 662.25)'
        />
    </g>
    <g opacity='.5' fill='#47e6b1'>
        <rect x='633' y='192' width='3' height='17' />
        <rect x='838' y='276.5' width='3' height='17' transform='rotate(90 779.25 140.25)'
        />
    </g>
    <g opacity='.5' fill='#47e6b1'>
        <rect x='697' y='612' width='3' height='17' />
        <rect x='902' y='696.5' width='3' height='17' transform='rotate(90 843.25 560.25)'
        />
    </g>
    <g opacity='.5' fill='#47e6b1'>
        <rect x='508' width='3' height='17' />
        <rect x='713' y='84.5' width='3' height='17' transform='rotate(90 654.25 -51.75)'
        />
    </g>
    <path d='M463.7,796.81a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0a1.84,1.84,0,0,0,3.31,1.22h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,463.7,796.81Z'
    transform='translate(-205 -84.5)' fill='#4d8af0' opacity='.5' />
    <path d='M262.9,479.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,257,485.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,262.9,479.46Z'
    transform='translate(-205 -84.5)' fill='#4d8af0' opacity='.5' />
    <path d='M371.9,566.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,366,572.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,371.9,566.46Z'
    transform='translate(-205 -84.5)' fill='#4d8af0' opacity='.5' />
    <path d='M993.9,802.46a3.67,3.67,0,0,1-2-4.44,1.77,1.77,0,0,0,.08-.41h0a1.84,1.84,0,0,0-3.31-1.22h0a1.77,1.77,0,0,0-.2.36,3.67,3.67,0,0,1-4.44,2,1.77,1.77,0,0,0-.41-.08h0a1.84,1.84,0,0,0-1.22,3.31h0a1.77,1.77,0,0,0,.36.2,3.67,3.67,0,0,1,2,4.44,1.77,1.77,0,0,0-.08.41h0A1.84,1.84,0,0,0,988,808.3h0a1.77,1.77,0,0,0,.2-.36,3.67,3.67,0,0,1,4.44-2,1.77,1.77,0,0,0,.41.08h0a1.84,1.84,0,0,0,1.22-3.31h0A1.77,1.77,0,0,0,993.9,802.46Z'
    transform='translate(-205 -84.5)' fill='#4d8af0' opacity='.5' />
    <circle cx='6' cy='659' r='6' fill={props.secondaryColor} opacity='.5' />
    <circle cx='683' cy='64' r='6' fill='#4d8af0' opacity='.5' />
    <circle cx='104' cy='76' r='6' fill='#47e6b1' opacity='.5' />
    <circle cx='689' cy='346' r='6' fill={props.secondaryColor} opacity='.5' />
</svg>
);

UndrawChatting.propTypes = {
    /**
    * Hex color
    */
   secondaryColor: PropTypes.string,
    /**
    * Hex color
    */
    primaryColor: PropTypes.string,
    /**
    * Hex color
    */
    accentColor: PropTypes.string,
    /**
    * percentage
    */
    height: PropTypes.string,
    /**
    * custom class for svg
    */
    class: PropTypes.string    
  };

  UndrawChatting.defaultProps = {
  primaryColor:'#6c68fb',
  secondaryColor:'#f55f44',
  skinColor:'#fda57d',
  height:'100%',
  class:''
};

export default UndrawChatting;