react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
494 lines (489 loc) • 18.3 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawMissionImpossible = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="8de17198-7ae2-47ff-b503-0799787369b4"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 618.02 704"
>
<defs>
<linearGradient
id="22e250b8-7980-4493-9c25-efd9eae1e30e"
x1={252.52}
y1={136}
x2={252.52}
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="02860921-f819-4fa0-a235-2792ab6f3dd6"
x1={557.5}
y1={392.04}
x2={557.52}
y2={251.94}
gradientTransform="matrix(0.99, 0, 0, 1, 5.9, -0.04)"
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<clipPath
id="9cec8c0b-eaa7-452a-a5f1-49a5bc4d5bbf"
transform="translate(-302.98 -117)"
>
<rect
id="f22ed1c3-f8e5-4d7e-b5e7-db648f32c6c2"
data-name="<Rectangle>"
x={421}
y={120}
width={270}
height={135}
fill={props.primaryColor}
/>
</clipPath>
<linearGradient
id="624aa40c-203b-40b3-8925-0c8737dfbe14"
x1={13.84}
y1={244.99}
x2={13.84}
y2={202.99}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="c72946d6-52db-4566-a87a-41d2b0fa7e1a"
x1={487.49}
y1={430.13}
x2={487.49}
y2={121.99}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="4dd1b06c-ba9e-4bd2-8aa6-0de0d6719fdb"
x1={530.91}
y1={303.07}
x2={530.91}
y2={255}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="572af080-1501-4c1e-98a3-e87d60e0bc3f"
x1={573.5}
y1={324.54}
x2={573.5}
y2={254}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="db602a0e-644f-4df6-b04a-9bc289951b65"
x1={466.02}
y1={543}
x2={466.02}
y2={527}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="b9adc037-fb77-4730-aec4-e595a99d094d"
x1={544.27}
y1={659.6}
x2={544.27}
y2={463.87}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="443221de-702a-4a19-b626-757fc614a655"
x1={481.02}
y1={533}
x2={481.02}
y2={408}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="76ffc347-953f-40dc-964c-2e601f491d49"
x1={343.02}
y1={704}
x2={343.02}
y2={540}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
<linearGradient
id="0ab76e49-2bc2-4011-a66c-e420a9c67168"
x1={593.02}
y1={704}
x2={593.02}
y2={540}
xlinkHref="#22e250b8-7980-4493-9c25-efd9eae1e30e"
/>
</defs>
<title>mission impossible</title>
<rect
x={114.02}
width={277}
height={136}
opacity={0.5}
fill="url(#22e250b8-7980-4493-9c25-efd9eae1e30e)"
/>
<g opacity={0.5}>
<path
d="M416.49,254.06l1,138,277-2.07-1-138Zm268.74,127.8L424.64,383.8l-.11-14.31,260.59-1.95Zm-.16-21.46-260.59,1.95L424.38,348,685,346.08Zm-.16-21.46-260.59,1.95-.11-14.31,260.59-1.95Zm-.16-21.46-260.59,1.95-.11-14.31,260.59-1.95ZM684.59,296,424,298l-.11-14.31,260.59-1.95Zm-.16-21.46-260.59,1.95-.11-14.31,260.59-1.95Z"
transform="translate(-302.98 -117)"
fill="url(#02860921-f819-4fa0-a235-2792ab6f3dd6)"
/>
</g>
<path
d="M419.5,253l1,135,270-2-1-135Zm261.94,125-254,1.9-.1-14,254-1.9Zm-.16-21-254,1.9-.1-14,254-1.9Zm-.16-21-254,1.9-.1-14,254-1.9Zm-.16-21L427,317l-.1-14,254-1.9Zm-.16-21-254,1.9-.1-14,254-1.9Zm-.16-21-254,1.9-.1-14,254-1.9Z"
transform="translate(-302.98 -117)"
fill="#f5f5f5"
/>
<rect
id="c2f262c5-432c-497c-b342-014b49715688"
data-name="<Rectangle>"
x={118.02}
y={3}
width={270}
height={135}
fill={props.primaryColor}
/>
<g clipPath="url(#9cec8c0b-eaa7-452a-a5f1-49a5bc4d5bbf)">
<g opacity={0.5}>
<polygon
points="23.21 244.99 27.68 241.74 25.26 214.41 20.01 202.99 0 210.71 23.21 244.99"
fill="url(#624aa40c-203b-40b3-8925-0c8737dfbe14)"
/>
<path
d="M630.75,125.29c-12.16-5.84-21.26-3.1-27.62,1.77-8.83,6.09-12.86,16.57-12.86,16.57l-1.73,4.67h0l-8.23,6-2.68-5.72s-29.16-51.8-115.15,49.35l-.4-.32s-7.33,9-14,19l-.95,1.44-.42.65-.6.94-.44.7-.64,1-.57.94-.62,1-.44.76-.46.79-.44.78-.46.85-.67,1.27-.37.71-.41.82-.3.63-.39.82-.24.55q-.32.73-.61,1.44l-.22.55c-.1.26-.19.52-.28.77l-.18.53q-.2.6-.36,1.17c-.06.2-.12.41-.16.6h0a11.25,11.25,0,0,0-.38,3.79L323,320l5.87,12.78s82.28-32.52,138.36-68.17l-2.36,49.88h0l-.15,3.09s-51.22,42.34-64.55,64l-22.86,13.2,24,35.4,5.59-4.06L410.41,398l94-75.14s17.82-32.56,18.13-59.83l3.85,14.87s8.19,23,14,23.94,5.81-17.86,1.75-23.44-2.08-42.82-2.08-42.82l1-7.58,14.71-10.69.54-.52.77,4.68,3,.26v.21H560l.14,1.36h0l1.89,35.52,10.41,40.17s8.2,23,14,23.94,5.81-17.86,1.76-23.44-2.08-42.82-2.08-42.82l4.29-31h0l.08-.6.1-.69,8.46.73s8.77-30.24-5.94-43.42l-2.68-5.72,5.48-4h0l1.1-.8a24.89,24.89,0,0,0,34.82-.07,17.36,17.36,0,0,0,11.61-3.1c.74-.52,1.46-1,2.14-1.54,3.08-2.21,5.63-4.24,6.14-5.22C653.14,158.46,649.57,134.33,630.75,125.29Z"
transform="translate(-302.98 -117)"
fill="url(#c72946d6-52db-4566-a87a-41d2b0fa7e1a)"
/>
</g>
<path
d="M556.7,205.08l2.89,54.18,10.1,39s8,22.36,13.57,23.24,5.64-17.34,1.7-22.76-2-41.57-2-41.57l6.37-46Z"
transform="translate(-302.98 -117)"
fill="#fda57d"
/>
<path
d="M553.34,214.15l1.47,8.87,40.71,3.52s8.51-29.36-5.76-42.16Z"
transform="translate(-302.98 -117)"
fill="#fff"
/>
<path
d="M462.53,199.87s-25,30.6-23.86,41.34l-111.19,77.5,5.7,12.41s79.88-31.57,134.34-66.18l-2.43,51.43s-49.73,41.11-62.67,62.1l9.94,16,91.27-73S530.7,272,517.72,245Z"
transform="translate(-302.98 -117)"
fill="#3ad29f"
/>
<polygon points="5.08 209.21 24.5 201.71 29.6 212.81 31.95 239.34 27.61 242.49 5.08 209.21" />
<polygon points="99.44 261.46 77.25 274.28 100.57 308.65 105.99 304.7 109.38 277.41 99.44 261.46" />
<path
d="M589.75,184.37l-15-32.11s-28.42-50.52-112.33,48.54L517.72,245l35.81-26Z"
transform="translate(-302.98 -117)"
fill="#fff"
/>
<path
d="M578.45,140h22.76a0,0,0,0,1,0,0V180.2a5.4,5.4,0,0,1-5.4,5.4h-12a5.4,5.4,0,0,1-5.4-5.4V140A0,0,0,0,1,578.45,140Z"
transform="translate(71.77 -527.04) rotate(53.99)"
fill="#fda57d"
/>
<path
d="M586.06,151.46a23.8,23.8,0,0,0,6.41,23.48l13.82-10L592.9,146.49Z"
transform="translate(-302.98 -117)"
opacity={0.05}
/>
<ellipse
cx={610.44}
cy={156.92}
rx={24.15}
ry={24.1}
transform="translate(-278.59 271.87) rotate(-36.01)"
fill="#fda57d"
/>
<path
d="M599.27,142.7l-14,9.32,1.68-4.53s11.47-29.86,38.22-17c18.28,8.77,21.74,32.2,20.36,34.86-.55,1-3.53,3.36-7,5.77a16.8,16.8,0,0,1-22.54-2.84c-4.69-5.58-12.85-17.12-11.34-23.74h0c-1.37-2.49-3.16-3.49-5.47-1.82Z"
transform="translate(-302.98 -117)"
opacity={0.05}
/>
<path
d="M600.35,141.91l-14,9.32,1.68-4.53s11.47-29.86,38.22-17c18.28,8.77,21.74,32.2,20.36,34.86-.55,1-3.53,3.36-7,5.77a16.8,16.8,0,0,1-22.54-2.84c-4.69-5.58-12.85-17.12-11.34-23.74h0c-1.37-2.49-3.16-3.49-5.47-1.82Z"
transform="translate(-302.98 -117)"
fill="#5a2f32"
/>
<ellipse
cx={602.07}
cy={143.14}
rx={5.37}
ry={2.68}
transform="translate(-272.09 264.32) rotate(-36.01)"
fill="#fda57d"
/>
<polygon
points="245.87 101.24 252.26 95.77 252.34 104.41 250.94 101.08 245.87 101.24"
opacity={0.05}
/>
<polygon
points="254.64 106.45 254.78 107.78 284.14 110.07 284.32 108.82 254.64 106.45"
opacity={0.05}
/>
<g opacity={0.05}>
<path
d="M449,218.31c-4.48,6.75-8.63,14-9.91,19.22l3.48-2.43C442.1,231.27,445,224.91,449,218.31Z"
transform="translate(-302.98 -117)"
/>
<path
d="M468.94,310.25l2.43-51.43C416.92,293.43,337,325,337,325l-3.85,6.11s79.88-31.57,134.34-66.18l-2.29,48.43C467.57,311.38,468.94,310.25,468.94,310.25Z"
transform="translate(-302.98 -117)"
/>
</g>
<path
d="M512,184.62l2.89,54.18,10.1,39s8,22.36,13.57,23.24,5.64-17.34,1.7-22.76-2-41.57-2-41.57l6.37-46Z"
transform="translate(-302.98 -117)"
fill="#fda57d"
/>
<path
d="M515.21,158.26s-6.73,18.13-3.87,24.34"
transform="translate(-302.98 -117)"
opacity={0.05}
/>
<polygon
points="209.15 66.68 209.13 70.05 241.38 75.47 241.77 72.77 209.15 66.68"
opacity={0.05}
/>
<polygon
points="216.43 39.04 209 67.62 241.62 73.7 250.24 37.64 216.43 39.04"
fill="#fff"
/>
</g>
<g opacity={0.5}>
<path
d="M518.29,255l6.43,24.31S533,302.14,538.87,303s5.88-17.71,1.78-23.24c-2.16-2.91-2.63-14.47-2.59-24.8Z"
transform="translate(-302.98 -117)"
fill="url(#4dd1b06c-ba9e-4bd2-8aa6-0de0d6719fdb)"
/>
</g>
<path
d="M518.81,255,525,278.8s8,22.36,13.57,23.24,5.64-17.34,1.7-22.76c-2.07-2.85-2.52-14.17-2.48-24.29Z"
transform="translate(-302.98 -117)"
fill="#fda57d"
/>
<g opacity={0.5}>
<path
d="M584.12,254H558.43l.35,6.44,10.69,40.14s8.42,23,14.37,23.92,6-17.85,1.8-23.42-2.14-42.78-2.14-42.78Z"
transform="translate(-302.98 -117)"
fill="url(#572af080-1501-4c1e-98a3-e87d60e0bc3f)"
/>
</g>
<path
d="M583.54,254H559.26l.33,6.26,10.1,39s8,22.36,13.57,23.24,5.64-17.34,1.7-22.76-2-41.57-2-41.57Z"
transform="translate(-302.98 -117)"
fill="#fda57d"
/>
<g opacity={0.5}>
<rect
x={314.02}
y={527}
width={304}
height={16}
fill="url(#db602a0e-644f-4df6-b04a-9bc289951b65)"
/>
</g>
<rect x={319.02} y={527} width={297} height={13} fill={props.primaryColor} />
<g opacity={0.5}>
<path
d="M684.76,605.25l1.21.52h0l38.73,16.66,49.36-58.49s7.47-8.36-1.43-14.08-14.49,9.08-14.49,9.08l-38,40.66L688,583.5l.5-3.38-29.34-17a36,36,0,0,0-1.86-3.11l-.27-1-1.47-1.29c-.28-.3-.56-.58-.84-.83l4.86-5.27A26.12,26.12,0,0,0,694,531.14a18.38,18.38,0,0,0,6.88,0A19,19,0,0,0,714.45,520a1.39,1.39,0,0,1-1,.73,17.78,17.78,0,0,0,1-2c-1,2.43-10.38-.92-11.79-1.67-4.3-2.28-6.51-5.67-8.73-9.81-4.38-8.2-12.48-11.23-21.58-11.94-7-.55-14.12-.07-20.57,2.58s-12.14,7.69-14.48,14.27a18.84,18.84,0,0,0-1,6.95,17,17,0,0,0,5.53,13.56,11.88,11.88,0,0,0,1,.77c.19.76.41,1.5.67,2.24L642.16,537l0,.08-8.33,9-.43-.13-87.84,13.14v.18c-2.92-1.93-16.15-8.65-49.17.48-12.47,3.45-33.25,3.08-55.55,1-15.69-19.47-25.74-79.85-25.74-79.85l-3.93-17.08-51.13,11.82s23.6,5.25,27.53,11.82c6,2,9.71,46.81,11.14,68C368.1,550.74,343,545.32,343,545.32l-18.36-6.57-13.11,46S326,569,339.08,567.65c0,0,65.56,31.53,114.07,25C472,590,490.3,598,505.59,600.49a298.75,298.75,0,0,0,40.49,3.94l.16,14.45s54-2.33,89.45-13.58c2.69,7.29,4.85,12.55,5.6,12.92l6.43-3.15,36.18,44.53,70.8-28.9s10.49-3.94,5.24-13.14-17,1.31-17,1.31l-52.44,18.39-22.13-30.68h0l-.86-1.2,4.64-2.28s-.15-.68-.42-1.86L683.91,611Z"
transform="translate(-302.98 -117)"
fill="url(#b9adc037-fb77-4730-aec4-e595a99d094d)"
/>
</g>
<polygon
points="339 450.66 322.79 435.64 349.62 406.55 365.83 421.57 339 450.66"
fill="#fda57d"
/>
<path
d="M651.32,524.83l-11.84,12.84a25.56,25.56,0,0,0,15.67,15.61l12.39-13.43Z"
transform="translate(-302.98 -117)"
opacity={0.05}
/>
<path
d="M654.8,592.82l65,28,48-56.89s7.27-8.13-1.39-13.69-14.1,8.83-14.1,8.83l-36.92,39.54L668,574.86Z"
transform="translate(-302.98 -117)"
fill="#fda57d"
/>
<polygon
points="348.41 443.46 381.57 462.62 377.11 492.65 345.86 467.74 348.41 443.46"
fill="#3ad29f"
/>
<ellipse cx={361.8} cy={410.88} rx={25.5} ry={25.55} fill="#fda57d" />
<path
d="M643.74,550.24,631,546.4l-85.44,12.78.64,58.14s103.93-4.47,115.41-31.3l-7.65-26.83Z"
transform="translate(-302.98 -117)"
fill="#3ad29f"
/>
<polygon
points="346.85 468.52 377.11 492.65 378.38 482.43 348.41 453.68 346.85 468.52"
opacity={0.05}
/>
<path
d="M546.19,559.82s-11.48-10.22-48.46,0-149.2-14.05-149.2-14.05l-3.83,21.72s63.76,30.67,110.94,24.28c18.37-2.49,36.13,5.28,51,7.67a287.07,287.07,0,0,0,39.53,3.83Z"
transform="translate(-302.98 -117)"
fill="#4d8af0"
/>
<path
d="M348.53,545.76l-17.85-6.39L317.92,584.1s14-15.33,26.78-16.61Z"
transform="translate(-302.98 -117)"
/>
<path
d="M391.88,489.55l26.78-6.39s12.75,76.66,31.88,83.05H403.36S399.53,492.1,391.88,489.55Z"
transform="translate(-302.98 -117)"
fill="#4d8af0"
/>
<path
d="M418.66,483.16l-3.83-16.61L365.1,478s23,5.11,26.78,11.5Z"
transform="translate(-302.98 -117)"
/>
<path
d="M668.84,498.34c-6.76-.53-13.73-.07-20,2.51s-11.8,7.48-14.09,13.88-.81,14.26,4.36,18.67a7.62,7.62,0,0,0,4.49,2c2.71.11,5-1.88,7.08-3.61a59.53,59.53,0,0,1,12.8-8.08c3.91-1.82,8.68-3.16,12.38-.94,1.76,1.06,3,2.77,4.45,4.22a18.1,18.1,0,0,0,29.49-5.91c-1,2.37-10.09-.9-11.46-1.63-4.18-2.22-6.34-5.51-8.49-9.54C685.57,502,677.7,499,668.84,498.34Z"
transform="translate(-302.98 -117)"
opacity={0.05}
/>
<path
d="M668.84,497.06c-6.76-.53-13.73-.07-20,2.51S637,507,634.75,513.45s-.81,14.26,4.36,18.67a7.62,7.62,0,0,0,4.49,2c2.71.11,5-1.88,7.08-3.61a59.53,59.53,0,0,1,12.8-8.08c3.91-1.82,8.68-3.16,12.38-.94,1.76,1.06,3,2.77,4.45,4.22a18.1,18.1,0,0,0,29.49-5.91c-1,2.37-10.09-.9-11.46-1.63-4.18-2.22-6.34-5.51-8.49-9.54C685.57,500.7,677.7,497.75,668.84,497.06Z"
transform="translate(-302.98 -117)"
/>
<ellipse
cx={656.49}
cy={525.32}
rx={3.83}
ry={1.91}
transform="translate(-309.19 925.78) rotate(-76.65)"
fill="#fda57d"
/>
<polygon
points="341.92 496.61 342.77 497.66 361.95 488.36 361.11 487.2 341.92 496.61"
opacity={0.05}
/>
<polygon
points="381.08 465.91 377.95 486.9 379.11 487.56 381.57 466.15 381.08 465.91"
opacity={0.05}
/>
<rect x={264.89} y={412.15} width={15.3} height={103.49} fill="#e0e0e0" />
<rect
x={522.86}
y={239.15}
width={15.3}
height={103.49}
transform="translate(-182.71 -270.81) rotate(18.57)"
fill="#e0e0e0"
/>
<polygon
points="275.09 423.65 269.99 423.65 269.99 173.73 275.02 174 275.09 423.65"
fill="#e0e0e0"
/>
<path
d="M635.45,602l44.63,54.94,68.86-28.11S759.15,625,754,616s-16.58,1.28-16.58,1.28l-51,17.89-31-43Z"
transform="translate(-302.98 -117)"
fill="#fda57d"
/>
<path
d="M617,556.63s19.13,58.77,21.68,60.05l30-14.69s-8.5-39.64-18-45.69S618.24,551.51,617,556.63Z"
transform="translate(-302.98 -117)"
fill="#3ad29f"
/>
<path
d="M622.42,573.12s-1,22.48,5.38,26.31"
transform="translate(-302.98 -117)"
opacity={0.05}
/>
<g opacity={0.5}>
<polygon
points="550.06 408 540.77 417.09 517.07 516.24 516.74 516.19 442 514.32 407.5 527.96 407.5 533 513.33 531.88 520.61 531.88 525.14 530.9 554.54 409.68 550.06 408"
fill="url(#443221de-702a-4a19-b626-757fc614a655)"
/>
</g>
<polygon
points="546.75 411 537.9 419.65 543.77 421.78 551.01 412.6 546.75 411"
fill="#f5f5f5"
/>
<polygon
points="537.9 419.65 543.77 421.78 518.71 528.93 511.78 528.93 537.9 419.65"
fill="#f5f5f5"
/>
<polygon
points="518.71 528.93 523.02 528 551.01 412.6 543.77 421.78 518.71 528.93"
fill="#e0e0e0"
/>
<polygon
points="411.03 525.2 411.03 530 511.78 528.93 513.42 523.76 411.03 525.2"
fill="#e0e0e0"
/>
<polyline
points="515.58 514.08 515.02 514 443.88 512.22 411.03 525.2 513.38 524.14"
fill="#f5f5f5"
/>
<polygon
points="474.02 521 476.02 515 515.02 515 513.02 522 474.02 521"
fill="#e0e0e0"
/>
<polygon
points="441.02 520 455.02 515 465.02 515 460.02 520 441.02 520"
fill={props.primaryColor}
/>
<g opacity={0.5}>
<rect
x={334.02}
y={540}
width={18}
height={164}
fill="url(#76ffc347-953f-40dc-964c-2e601f491d49)"
/>
</g>
<g opacity={0.5}>
<rect
x={584.02}
y={540}
width={18}
height={164}
fill="url(#0ab76e49-2bc2-4011-a66c-e420a9c67168)"
/>
</g>
<rect x={336.02} y={540} width={15} height={161} fill={props.primaryColor} />
<rect x={586.02} y={540} width={15} height={161} fill={props.primaryColor} />
<polygon
points="270.02 174 247 139.99 249.42 132.8 275.02 174 270.02 174"
fill="#e0e0e0"
/>
<rect
x={683.4}
y={535.29}
width={4}
height={10.08}
transform="translate(110.62 -406.04) rotate(33.6)"
/>
<rect
x={657.69}
y={528.39}
width={29.61}
height={2}
transform="translate(102.56 -400.77) rotate(33.62)"
/>
</svg>
);
UndrawMissionImpossible.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawMissionImpossible.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawMissionImpossible;