UNPKG

react-undraw-illustrations

Version:

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

899 lines (894 loc) 25.5 kB
import React from "react"; import PropTypes from "prop-types"; const UndrawNewMessage = props => ( <svg style={{height:props.height, width:'100%'}} className={props.class} id="e6c7a302-1d79-4c46-b758-a00a31f9e26b" data-name="Layer 1" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 867.19 752.72" > <defs> <linearGradient id="22870d72-ac13-4c8c-bdf9-4d0841984fac" x1={8.15} y1={612.92} x2={8.15} y2={548.54} gradientTransform="matrix(-1, 0, 0, 1, 631.86, -7.83)" 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="46920503-58a9-44f5-869a-eb0d6f580dc2" x1={-193.49} y1={331.29} x2={-193.49} y2={266.91} gradientTransform="matrix(0, -1, -1, 0, 1165.49, 229)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="5b6c626d-ce2f-4633-b930-0e0ef649b376" x1={-246.01} y1={452.36} x2={-246.01} y2={387.98} gradientTransform="matrix(0, -1, -1, 0, 1296.56, 320.52)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="6999a8fe-21a9-4701-b226-ef883076e79f" x1={-14.86} y1={303.11} x2={-14.86} y2={238.73} gradientTransform="matrix(-1, 0, 0, 1, 542.37, -1.49)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="2e4c56eb-c899-4e7c-9ca1-432187ad2299" x1={-70.23} y1={46.12} x2={-70.23} y2={-18.26} gradientTransform="matrix(0, -1, -1, 0, 813.84, 48.8)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="92480007-5af8-4fb0-a0fe-f7ce09be329b" x1={58.85} y1={392.6} x2={58.85} y2={328.22} gradientTransform="matrix(0, -1, -1, 0, 1170.31, 321.92)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="91ef2396-2c54-4e76-8182-4a9970397d72" x1={320.67} y1={441.4} x2={320.67} y2={377.01} gradientTransform="matrix(-1, 0, 0, 1, 595.88, 88.63)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="c20cc891-92ec-4c26-a6a9-c793ae6cdb85" x1={162.93} y1={324.23} x2={162.93} y2={259.85} gradientTransform="matrix(0, -1, -1, 0, 809.92, 510.37)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="e5bd4efc-3d4a-453d-9559-e76160a17bf3" x1={-38.47} y1={742.22} x2={-38.47} y2={677.84} gradientTransform="matrix(0, -1, -1, 0, 1237.91, 453)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="1f2c304b-4956-4e16-8f36-0a16127bea31" x1={257.58} y1={271.1} x2={257.58} y2={206.72} gradientTransform="matrix(-1, 0, 0, 1, 544.58, 77.7)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="132bee92-70bf-4f7a-8946-6baf61115962" x1={186} y1={144.09} x2={186} y2={79.71} gradientTransform="matrix(0, -1, -1, 0, 641.58, 352.21)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="190d4067-154d-4acf-a3d4-786604031f46" x1={123.1} y1={659.28} x2={123.1} y2={594.9} gradientTransform="matrix(0, -1, -1, 0, 1166.77, 433.34)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="5b6818eb-4255-4703-a8a1-ad450826a32f" x1={438.22} y1={567.33} x2={541.4} y2={567.33} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="f72680a8-1c69-456c-9139-7d75f0ebc6fd" x1={554.46} y1={525.12} x2={586.43} y2={525.12} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="b4ecf0d7-9b75-430f-acce-e09492370ef4" x1={669.68} y1={582.71} x2={700.58} y2={582.71} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="fe1de1d1-8458-4939-941f-dea050869f88" x1={571.06} y1={506.59} x2={571.06} y2={139.02} gradientTransform="matrix(1, 0, 0, 1, 0, 0)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> <linearGradient id="b7a7a14d-13e4-460f-98bc-d42561b19638" x1={19.14} y1={784.71} x2={19.14} y2={618.86} gradientTransform="matrix(-1, 0, 0, 1, 619.95, 34.86)" xlinkHref="#22870d72-ac13-4c8c-bdf9-4d0841984fac" /> </defs> <title>new message</title> <rect x={571.33} y={540.71} width={104.76} height={64.38} transform="translate(-304.11 128.49) rotate(-16.6)" fill="url(#22870d72-ac13-4c8c-bdf9-4d0841984fac)" /> <rect x={572.48} y={542.47} width={101.21} height={60.09} transform="translate(-304.03 128.29) rotate(-16.6)" fill="#fff" /> <g opacity={0.6}> <rect x={572.6} y={559.29} width={12.88} height={9.53} transform="translate(1128.72 865.47) rotate(163.4)" fill={props.primaryColor} /> <rect x={588.18} y={575.12} width={49.44} height={3.09} transform="translate(1198.63 880.49) rotate(163.4)" fill={props.primaryColor} /> <rect x={603.35} y={580.63} width={36.05} height={2.06} transform="translate(1216.66 887.85) rotate(163.4)" fill={props.primaryColor} /> </g> <rect x={834.2} y={370.12} width={64.38} height={104.76} transform="translate(119.67 1118.51) rotate(-78.98)" fill="url(#46920503-58a9-44f5-869a-eb0d6f580dc2)" /> <rect x={835.97} y={371.26} width={60.09} height={101.21} transform="matrix(0.19, -0.98, 0.98, 0.19, 119.98, 1117.63)" fill="#fff" /> <g opacity={0.6}> <rect x={824.48} y={389.18} width={12.88} height={9.53} transform="translate(1404.81 865.82) rotate(-168.98)" fill={props.primaryColor} /> <rect x={830.35} y={419.27} width={49.44} height={3.09} transform="translate(1447.53 923.68) rotate(-168.98)" fill={props.primaryColor} /> <rect x={842.24} y={428.14} width={36.05} height={2.06} transform="translate(1456.23 941.24) rotate(-168.98)" fill={props.primaryColor} /> </g> <rect x={844.2} y={514.16} width={64.38} height={104.76} transform="translate(-319.47 321.88) rotate(-23.45)" fill="url(#5b6c626d-ce2f-4633-b930-0e0ef649b376)" /> <rect x={846.65} y={515.27} width={60.09} height={101.21} transform="translate(-319.18 321.95) rotate(-23.45)" fill="#fff" /> <g opacity={0.6}> <rect x={873.41} y={516.37} width={12.88} height={9.53} transform="translate(585.47 1462.05) rotate(-113.45)" fill="#47e6b1" /> <rect x={846.64} y={554.71} width={49.44} height={3.09} transform="translate(541.39 1503.36) rotate(-113.45)" fill="#47e6b1" /> <rect x={849.39} y={564.23} width={36.05} height={2.06} transform="translate(527.6 1512.34) rotate(-113.45)" fill="#47e6b1" /> </g> <rect x={504.85} y={237.24} width={104.76} height={64.38} transform="translate(-220.16 96.83) rotate(-16.6)" fill="url(#6999a8fe-21a9-4701-b226-ef883076e79f)" /> <rect x={506} y={239} width={101.21} height={60.09} transform="translate(-220.08 96.64) rotate(-16.6)" fill="#fff" /> <g opacity={0.6}> <rect x={506.12} y={255.82} width={12.88} height={9.53} transform="translate(911.8 290.18) rotate(163.4)" fill="#f55f44" /> <rect x={521.69} y={271.65} width={49.44} height={3.09} transform="translate(981.71 305.2) rotate(163.4)" fill="#f55f44" /> <rect x={536.87} y={277.16} width={36.05} height={2.06} transform="translate(999.74 312.56) rotate(163.4)" fill="#f55f44" /> </g> <rect x={767.72} y={66.65} width={64.38} height={104.76} transform="translate(363.77 807.79) rotate(-78.98)" fill="url(#2e4c56eb-c899-4e7c-9ca1-432187ad2299)" /> <rect x={769.49} y={67.8} width={60.09} height={101.21} transform="translate(364.08 806.92) rotate(-78.98)" fill="#fff" /> <g opacity={0.6}> <rect x={758} y={85.71} width={12.88} height={9.53} transform="translate(1331.08 251.77) rotate(-168.98)" fill={props.primaryColor} /> <rect x={763.87} y={115.8} width={49.44} height={3.09} transform="translate(1373.8 309.63) rotate(-168.98)" fill={props.primaryColor} /> <rect x={775.75} y={124.68} width={36.05} height={2.06} transform="translate(1382.49 327.19) rotate(-168.98)" fill={props.primaryColor} /> </g> <rect x={777.71} y={210.69} width={64.38} height={104.76} transform="translate(-204.2 270.36) rotate(-23.45)" fill="url(#92480007-5af8-4fb0-a0fe-f7ce09be329b)" /> <rect x={780.17} y={211.8} width={60.09} height={101.21} transform="translate(-203.91 270.43) rotate(-23.45)" fill="#fff" /> <g opacity={0.6}> <rect x={806.93} y={212.9} width={12.88} height={9.53} transform="translate(770.94 976.83) rotate(-113.45)" fill="#47e6b1" /> <rect x={780.16} y={251.24} width={49.44} height={3.09} transform="translate(726.85 1018.14) rotate(-113.45)" fill="#47e6b1" /> <rect x={782.9} y={260.76} width={36.05} height={2.06} transform="translate(713.06 1027.12) rotate(-113.45)" fill="#47e6b1" /> </g> <rect x={222.82} y={465.65} width={104.76} height={64.38} transform="translate(-297.19 25.76) rotate(-16.6)" fill="url(#91ef2396-2c54-4e76-8182-4a9970397d72)" /> <rect x={223.98} y={467.41} width={101.21} height={60.09} transform="translate(-297.11 25.57) rotate(-16.6)" fill="#fff" /> <g opacity={0.6}> <rect x={224.1} y={484.22} width={12.88} height={9.53} transform="translate(424.79 818.06) rotate(163.4)" fill={props.primaryColor} /> <rect x={239.67} y={500.05} width={49.44} height={3.09} transform="translate(494.7 833.08) rotate(163.4)" fill={props.primaryColor} /> <rect x={254.84} y={505.56} width={36.05} height={2.06} transform="translate(512.73 840.44) rotate(163.4)" fill={props.primaryColor} /> </g> <rect x={485.7} y={295.06} width={64.38} height={104.76} transform="translate(-88.54 715.72) rotate(-78.98)" fill="url(#c20cc891-92ec-4c26-a6a9-c793ae6cdb85)" /> <rect x={487.47} y={296.2} width={60.09} height={101.21} transform="matrix(0.19, -0.98, 0.98, 0.19, -88.23, 714.84)" fill="#fff" /> <g opacity={0.6}> <rect x={475.98} y={314.12} width={12.88} height={9.53} transform="translate(728.57 650.46) rotate(-168.98)" fill="#f55f44" /> <rect x={481.84} y={344.21} width={49.44} height={3.09} transform="translate(771.29 708.32) rotate(-168.98)" fill="#f55f44" /> <rect x={493.73} y={353.08} width={36.05} height={2.06} transform="translate(779.99 725.88) rotate(-168.98)" fill="#f55f44" /> </g> <rect x={495.69} y={439.09} width={64.38} height={104.76} transform="translate(-318.38 177) rotate(-23.45)" fill="url(#e5bd4efc-3d4a-453d-9559-e76160a17bf3)" /> <rect x={498.15} y={440.2} width={60.09} height={101.21} transform="translate(-318.09 177.07) rotate(-23.45)" fill="#fff" /> <g opacity={0.6}> <rect x={524.91} y={441.3} width={12.88} height={9.53} transform="translate(167.15 1037.4) rotate(-113.45)" fill="#47e6b1" /> <rect x={498.14} y={479.64} width={49.44} height={3.09} transform="translate(123.07 1078.7) rotate(-113.45)" fill="#47e6b1" /> <rect x={500.88} y={489.17} width={36.05} height={2.06} transform="translate(109.27 1087.68) rotate(-113.45)" fill="#47e6b1" /> </g> <rect x={234.62} y={284.42} width={104.76} height={64.38} transform="translate(-244.91 21.58) rotate(-16.6)" fill="url(#1f2c304b-4956-4e16-8f36-0a16127bea31)" /> <rect x={235.77} y={286.19} width={101.21} height={60.09} transform="matrix(0.96, -0.29, 0.29, 0.96, -244.83, 21.38)" fill="#fff" /> <g opacity={0.6}> <rect x={235.89} y={303} width={12.88} height={9.53} transform="translate(396.1 459.8) rotate(163.4)" fill={props.primaryColor} /> <rect x={251.47} y={318.83} width={49.44} height={3.09} transform="translate(466.01 474.82) rotate(163.4)" fill={props.primaryColor} /> <rect x={266.64} y={324.34} width={36.05} height={2.06} transform="translate(484.04 482.18) rotate(163.4)" fill={props.primaryColor} /> </g> <rect x={497.49} y={113.83} width={64.38} height={104.76} transform="matrix(0.19, -0.98, 0.98, 0.19, 98.88, 580.71)" fill="url(#132bee92-70bf-4f7a-8946-6baf61115962)" /> <rect x={499.26} y={114.98} width={60.09} height={101.21} transform="translate(99.2 579.84) rotate(-78.98)" fill="#fff" /> <g opacity={0.6}> <rect x={487.77} y={132.89} width={12.88} height={9.53} transform="translate(786.59 293.61) rotate(-168.98)" fill={props.primaryColor} /> <rect x={493.64} y={162.99} width={49.44} height={3.09} transform="translate(829.31 351.47) rotate(-168.98)" fill={props.primaryColor} /> <rect x={505.53} y={171.86} width={36.05} height={2.06} transform="translate(838 369.03) rotate(-168.98)" fill="#f55f44" /> </g> <rect x={507.49} y={257.87} width={64.38} height={104.76} transform="translate(-245.29 166.73) rotate(-23.45)" fill="url(#190d4067-154d-4acf-a3d4-786604031f46)" /> <rect x={509.94} y={258.98} width={60.09} height={101.21} transform="translate(-245 166.8) rotate(-23.45)" fill="#fff" /> <g opacity={0.6}> <rect x={536.7} y={260.08} width={12.88} height={9.53} transform="translate(349.9 794.88) rotate(-113.45)" fill="#47e6b1" /> <rect x={509.93} y={298.42} width={49.44} height={3.09} transform="translate(305.81 836.19) rotate(-113.45)" fill="#47e6b1" /> <rect x={512.68} y={307.95} width={36.05} height={2.06} transform="translate(292.02 845.16) rotate(-113.45)" fill="#47e6b1" /> </g> <circle cx={63.9} cy={61.26} r={5.47} fill="#535461" opacity={0.25} /> <circle cx={634.96} cy={540.36} r={5.47} fill="#535461" opacity={0.25} /> <circle cx={151.79} cy={513.16} r={5.47} fill="#535461" opacity={0.25} /> <circle cx={685.81} cy={437.02} r={5.47} fill="#535461" opacity={0.25} /> <circle cx={737.28} cy={186.1} r={5.47} fill="#535461" opacity={0.25} /> <polygon points="333.44 4.87 328.58 4.87 328.58 0 326.59 0 326.59 4.87 321.73 4.87 321.73 6.85 326.59 6.85 326.59 11.71 328.58 11.71 328.58 6.85 333.44 6.85 333.44 4.87" fill="#535461" opacity={0.25} /> <polygon points="146.29 79.4 141.43 79.4 141.43 74.54 139.44 74.54 139.44 79.4 134.58 79.4 134.58 81.39 139.44 81.39 139.44 86.25 141.43 86.25 141.43 81.39 146.29 81.39 146.29 79.4" fill="#535461" opacity={0.25} /> <polygon points="70.16 357.13 65.3 357.13 65.3 352.27 63.31 352.27 63.31 357.13 58.45 357.13 58.45 359.12 63.31 359.12 63.31 363.98 65.3 363.98 65.3 359.12 70.16 359.12 70.16 357.13" fill="#535461" opacity={0.25} /> <polygon points="59.23 159.07 54.36 159.07 54.36 154.2 52.38 154.2 52.38 159.07 47.51 159.07 47.51 161.05 52.38 161.05 52.38 165.92 54.36 165.92 54.36 161.05 59.23 161.05 59.23 159.07" fill="#535461" opacity={0.25} /> <polygon points="11.71 295.17 6.85 295.17 6.85 290.3 4.87 290.3 4.87 295.17 0 295.17 0 297.15 4.87 297.15 4.87 302.01 6.85 302.01 6.85 297.15 11.71 297.15 11.71 295.17" fill="#535461" opacity={0.25} /> <polygon points="867.19 224.99 862.33 224.99 862.33 220.13 860.34 220.13 860.34 224.99 855.48 224.99 855.48 226.98 860.34 226.98 860.34 231.84 862.33 231.84 862.33 226.98 867.19 226.98 867.19 224.99" fill="#535461" opacity={0.25} /> <polygon points="697.76 288.26 692.9 288.26 692.9 283.39 690.91 283.39 690.91 288.26 686.05 288.26 686.05 290.24 690.91 290.24 690.91 295.11 692.9 295.11 692.9 290.24 697.76 290.24 697.76 288.26" fill="#535461" opacity={0.25} /> <polygon points="553.08 117.62 548.21 117.62 548.21 112.76 546.23 112.76 546.23 117.62 541.36 117.62 541.36 119.61 546.23 119.61 546.23 124.47 548.21 124.47 548.21 119.61 553.08 119.61 553.08 117.62" fill="#535461" opacity={0.25} /> <path d="M440.3,469.38c-3.5,11.36,1.75,24.79,12,30.77,4.29,2.5,9.24,3.77,13.41,6.48,9.05,5.89,12.62,17.19,15.56,27.58,3.37,11.95,6.76,24.58,3.67,36.6-2,7.66-6.45,14.44-9,21.94a45.78,45.78,0,0,0-2.17,19.54c.37,3.5,1.25,7.14,3.64,9.72,3.46,3.73,9,4.29,14,5.19a68.19,68.19,0,0,1,49,38" transform="translate(-166.4 -73.64)" fill="none" strokeMiterlimit={10} strokeWidth={2} stroke="url(#5b6818eb-4255-4703-a8a1-ad450826a32f)" /> <path d="M441.37,469.38c-3.5,11.36,1.75,24.79,12,30.77,4.29,2.5,9.24,3.77,13.41,6.48,9.05,5.89,12.62,17.19,15.56,27.58,3.37,11.95,6.76,24.58,3.67,36.6-2,7.66-6.45,14.44-9,21.94a45.78,45.78,0,0,0-2.17,19.54c.37,3.5,1.25,7.14,3.64,9.72,3.46,3.73,9,4.29,14,5.19a68.19,68.19,0,0,1,49,38" transform="translate(-166.4 -73.64)" fill="none" stroke="#535461" strokeMiterlimit={10} strokeWidth={2} /> <path d="M573.84,384.5c-8.63,12-17.59,25-18.33,39.77-1.13,22.73,17,41.32,25.17,62.58A74.38,74.38,0,0,1,578.18,545c-4,8.19-9.61,16.32-8.92,25.39.42,5.54,3.19,10.57,5.42,15.66a88.29,88.29,0,0,1-5.12,79.72" transform="translate(-166.4 -73.64)" fill="none" strokeMiterlimit={10} strokeWidth={2} stroke="url(#f72680a8-1c69-456c-9139-7d75f0ebc6fd)" /> <path d="M574.91,384.5c-8.63,12-17.59,25-18.33,39.77-1.13,22.73,17,41.32,25.17,62.58A74.38,74.38,0,0,1,579.26,545c-4,8.19-9.61,16.32-8.92,25.39.42,5.54,3.19,10.57,5.42,15.66a88.29,88.29,0,0,1-5.12,79.72" transform="translate(-166.4 -73.64)" fill="none" stroke="#535461" strokeMiterlimit={10} strokeWidth={2} /> <path d="M695,492.76l4.17,34c.55,4.52,1,9.45-1.4,13.3-2.3,3.65-6.61,5.39-10,8.09-11,8.85-10,25.85-6.24,39.48s9.28,28.27,4,41.38c-2.18,5.41-6,10-8.91,15a46.07,46.07,0,0,0-5.51,28.58" transform="translate(-166.4 -73.64)" fill="none" strokeMiterlimit={10} strokeWidth={2} stroke="url(#b4ecf0d7-9b75-430f-acce-e09492370ef4)" /> <path d="M696,492.76l4.17,34c.55,4.52,1,9.45-1.4,13.3-2.3,3.65-6.61,5.39-10,8.09-11,8.85-10,25.85-6.24,39.48s9.28,28.27,4,41.38c-2.18,5.41-6,10-8.91,15a46.07,46.07,0,0,0-5.51,28.58" transform="translate(-166.4 -73.64)" fill="none" stroke="#535461" strokeMiterlimit={10} strokeWidth={2} /> <g opacity={0.7}> <path d="M803.22,352.89A100.9,100.9,0,0,0,671.17,257a121.19,121.19,0,0,0,1.29-17.12A100.84,100.84,0,0,0,471,232.63,100.9,100.9,0,0,0,338.9,328.51c0,50.6,37.26,122.57,85.85,135.32l7.55,4.32-4.1,14.06h24.3l-5.28-14.08,7.52-4.3c37.54-9.85,68.31-55.05,80.37-98.44a73.68,73.68,0,0,0,21.51,9.79l7.55,4.32-4.1,14.06h24.3l-5.28-14.08,7.52-4.3a70.36,70.36,0,0,0,16-6.5c6.49,48.65,41,108.06,84.74,119.53l7.55,4.32-4.1,14.06h24.3l-5.28-14.08,7.52-4.3C766,475.46,803.22,403.49,803.22,352.89Z" transform="translate(-166.4 -73.64)" fill="url(#fe1de1d1-8458-4939-941f-dea050869f88)" /> </g> <polygon points="289.93 403.41 266.42 403.41 270.53 389.3 284.64 389.3 289.93 403.41" fill="#f55f44" /> <path d="M541.57,328.33c0,53.89-43.69,132.85-97.58,132.85s-97.58-79-97.58-132.85a97.58,97.58,0,0,1,195.16,0Z" transform="translate(-166.4 -73.64)" fill="#f55f44" /> <polygon points="284.64 389.89 270.53 389.89 262.3 385.19 292.87 385.19 284.64 389.89" fill="#535461" /> <path d="M408.72,252.5s-41.15,22.34-47,67" transform="translate(-166.4 -73.64)" fill="#fff" opacity={0.1} /> <polygon points="417.54 317.63 394.03 317.63 398.14 303.52 412.25 303.52 417.54 317.63" fill="#4d8af0" /> <path d="M669.18,242.54c0,53.89-43.69,132.85-97.58,132.85S474,296.44,474,242.54a97.58,97.58,0,1,1,195.16,0Z" transform="translate(-166.4 -73.64)" fill="#4d8af0" /> <polygon points="412.25 304.11 398.14 304.11 389.91 299.4 420.48 299.4 412.25 304.11" fill="#535461" /> <path d="M536.33,166.71s-41.15,22.34-47,67" transform="translate(-166.4 -73.64)" fill="#fff" opacity={0.1} /> <polygon points="544.08 427 520.56 427 524.68 412.9 538.78 412.9 544.08 427" fill="#3ad29f" /> <path d="M795.72,351.92c0,53.89-43.69,132.85-97.58,132.85s-97.58-79-97.58-132.85a97.58,97.58,0,0,1,195.16,0Z" transform="translate(-166.4 -73.64)" fill="#3ad29f" /> <polygon points="538.78 413.48 524.68 413.48 516.45 408.78 547.01 408.78 538.78 413.48" fill="#535461" /> <path d="M662.86,276.09s-41.15,22.34-47,67" transform="translate(-166.4 -73.64)" fill="#fff" opacity={0.1} /> <rect x={465.87} y={653.73} width={269.86} height={165.85} transform="matrix(1, -0.05, 0.05, 1, -203.25, -41.98)" fill="url(#b7a7a14d-13e4-460f-98bc-d42561b19638)" /> <rect x={469.12} y={657.92} width={260.71} height={154.78} transform="translate(-203.19 -42.05) rotate(-2.93)" fill="#eee" /> <rect x={477.81} y={675.02} width={33.17} height={24.55} transform="translate(856.85 1274.79) rotate(177.07)" fill={props.primaryColor} /> <rect x={507.77} y={735.5} width={127.37} height={7.96} transform="translate(1013.55 1375.16) rotate(177.07)" fill={props.primaryColor} /> <rect x={543.2} y={754.5} width={92.88} height={5.31} transform="translate(1050.78 1409.55) rotate(177.07)" fill={props.primaryColor} /> </svg> ); UndrawNewMessage.propTypes = { /** * Hex color */ primaryColor: PropTypes.string, /** * percentage */ height: PropTypes.string, /** * custom class for svg */ class: PropTypes.string }; UndrawNewMessage.defaultProps = { primaryColor: "#6c68fb", height: "250px", class: "" }; export default UndrawNewMessage;