react-undraw-illustrations
Version:
unDraw: MIT licensed illustrations for every project you can imagine and create...for React!
569 lines (564 loc) • 14.4 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
const UndrawGoldenGateBridge = props => (
<svg
style={{height:props.height, width:'100%'}}
className={props.class}
id="404ff4c3-798a-4d7f-af0d-3af2d2926644"
data-name="Layer 1"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 897.13 619.94"
>
<defs>
<linearGradient
id="f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
x1={212.02}
y1={94.83}
x2={212.02}
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="77139c16-33a6-4dfa-8989-da93276af52e"
x1={789.57}
y1={413}
x2={789.57}
y2={198.23}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="c1f90bbd-6146-4ee7-8dcf-9d36f44ef679"
x1={789.57}
y1={209.53}
x2={789.57}
y2={94.44}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="c28052ae-ed0b-41fd-8f79-8e5e5b7fe1eb"
x1={789.57}
y1={110.88}
x2={789.57}
y2={41}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="d21e40ae-c1e5-42b1-bc13-f4e123f15ce0"
x1={107.57}
y1={413}
x2={107.57}
y2={198.23}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="7200f34b-2b30-401a-b9a9-80163e9b6c6b"
x1={107.57}
y1={209.53}
x2={107.57}
y2={94.44}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="e5c8761b-89d8-4d0e-8298-23bf4ff282f6"
x1={107.57}
y1={110.88}
x2={107.57}
y2={41}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="4c3ebaf4-f809-4b12-9ba4-198cb2c9e5a1"
x1={449.07}
y1={320}
x2={449.07}
y2={292}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="fa3bdb70-ddd3-4384-8681-e1e959ecf168"
x1={697.59}
y1={571.53}
x2={822.41}
y2={571.53}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="680c971b-18b3-42eb-b3fe-620c6c656ca0"
x1={548.07}
y1={571}
x2={548.07}
y2={527}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="51e936ee-3820-4ad2-98e1-dde99ed0951f"
x1={710.5}
y1={732.03}
x2={710.5}
y2={680.03}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="6a43d89c-cf4a-4c8b-801f-93cf02c7a71f"
x1={660.33}
y1={668.03}
x2={660.33}
y2={497.03}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
<linearGradient
id="9d954d62-6ebc-4ad3-aace-04154c80b8e0"
x1={557.79}
y1={348.81}
x2={557.79}
y2={339.64}
xlinkHref="#f85ad179-a9e5-43a6-9cd0-6b2f616378fe"
/>
</defs>
<title>Golden Gate Bridge</title>
<path
d="M442.5,549.4s22-7.57,38,0,42,2.52,50-1.51,44,1.51,48,5.55,20,9.09,31,5,33-13.13,42-7.57"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M442.5,549.4s22-7.57,38,0,42,2.52,50-1.51,44,1.51,48,5.55,20,9.09,31,5,33-13.13,42-7.57"
transform="translate(-151.43 -140.03)"
opacity={0.2}
/>
<path
d="M363.5,490s50.42-15,87.09,0,96.26,5,114.59-3,100.84,3,110,11,45.84,18,71,10,75.63-26,96.26-15"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M363.5,490s50.42-15,87.09,0,96.26,5,114.59-3,100.84,3,110,11,45.84,18,71,10,75.63-26,96.26-15"
transform="translate(-151.43 -140.03)"
opacity={0.2}
/>
<ellipse
cx={212.02}
cy={47.41}
rx={48.05}
ry={47.41}
fill="url(#f85ad179-a9e5-43a6-9cd0-6b2f616378fe)"
/>
<circle
cx={212.02}
cy={47.41}
r={41.88}
fill="#ff9800"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<rect
x={771.07}
y={198.23}
width={37}
height={214.77}
fill="url(#77139c16-33a6-4dfa-8989-da93276af52e)"
/>
<rect
x={779.6}
y={94.44}
width={19.92}
height={115.09}
fill="url(#c1f90bbd-6146-4ee7-8dcf-9d36f44ef679)"
/>
<rect
x={785.3}
y={41}
width={8.54}
height={69.88}
fill="url(#c28052ae-ed0b-41fd-8f79-8e5e5b7fe1eb)"
/>
<rect
x={89.07}
y={198.23}
width={37}
height={214.77}
fill="url(#d21e40ae-c1e5-42b1-bc13-f4e123f15ce0)"
/>
<rect
x={97.6}
y={94.44}
width={19.92}
height={115.09}
fill="url(#7200f34b-2b30-401a-b9a9-80163e9b6c6b)"
/>
<rect
x={103.3}
y={41}
width={8.54}
height={69.88}
fill="url(#e5c8761b-89d8-4d0e-8298-23bf4ff282f6)"
/>
<rect
x={6.07}
y={292}
width={886}
height={28}
fill="url(#4c3ebaf4-f809-4b12-9ba4-198cb2c9e5a1)"
/>
<rect x={9.07} y={296} width={879} height={17} fill="#ff5252" />
<rect x={9.07} y={313} width={879} height={3} fill="#ff5252" />
<rect x={9.07} y={313} width={879} height={3} opacity={0.2} />
<rect x={94.57} y={198.5} width={26} height={209} fill="#ff5252" />
<rect x={100.57} y={97.5} width={14} height={112} fill="#ff5252" />
<rect x={104.57} y={45.5} width={6} height={68} fill="#ff5252" />
<rect
x={928}
y={338.53}
width={26}
height={209}
transform="translate(1730.57 746.03) rotate(-180)"
fill="#ff5252"
/>
<rect x={782.57} y={97.5} width={14} height={112} fill="#ff5252" />
<rect x={786.57} y={45.5} width={6} height={68} fill="#ff5252" />
<path
d="M1048.5,280s-61-4-107.5-86.5c-351,476-682,0-682,0C212.5,276,151.5,280,151.5,280"
transform="translate(-151.43 -140.03)"
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
strokeWidth={2}
/>
<line
x1={20.96}
y1={134.71}
x2={20.96}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={52.38}
y1={117.65}
x2={52.38}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={413.1}
y1={261.79}
x2={413.1}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={485.07}
y1={265.06}
x2={485.07}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={340.42}
y1={242.11}
x2={340.42}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={270.92}
y1={206.82}
x2={270.92}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={199.7}
y1={153.5}
x2={199.7}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={557.8}
y1={247}
x2={557.8}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={632.12}
y1={209.5}
x2={632.12}
y2={295.5}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={702.4}
y1={153.5}
x2={702.4}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={162.05}
y1={117.65}
x2={162.05}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={737.36}
y1={117.65}
x2={737.36}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={876.18}
y1={134.71}
x2={876.18}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={844.75}
y1={117.65}
x2={844.75}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={235.91}
y1={182.86}
x2={235.91}
y2={295.5}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={307.39}
y1={227.35}
x2={307.39}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={370.87}
y1={252.5}
x2={370.87}
y2={295.5}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={448.57}
y1={265.06}
x2={448.57}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={524.09}
y1={257.1}
x2={524.09}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={593.81}
y1={231.5}
x2={593.81}
y2={296}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<line
x1={664.01}
y1={186.66}
x2={664.01}
y2={295.5}
fill="none"
stroke="#ff5252"
strokeMiterlimit={10}
/>
<rect x={101.07} y={197} width={13} height={2} opacity={0.2} />
<rect x={105.07} y={96} width={5} height={2} opacity={0.2} />
<rect x={783.07} y={196} width={13} height={2} opacity={0.2} />
<rect x={787.07} y={96} width={5} height={2} opacity={0.2} />
<path
d="M697.59,666V476S755.5,619,822.41,667Z"
transform="translate(-151.43 -140.03)"
fill="url(#fa3bdb70-ddd3-4384-8681-e1e959ecf168)"
/>
<path
d="M699.5,663V479s46,153,118,185Z"
transform="translate(-151.43 -140.03)"
fill="#f5f5f5"
/>
<path
d="M702.5,663V488.32c-2-5.88-3-9.29-3-9.29V663l118,1-.05,0Z"
transform="translate(-151.43 -140.03)"
fill="#ff5252"
opacity={0.2}
/>
<rect
x={500.07}
y={527}
width={96}
height={44}
rx={19}
ry={19}
fill="url(#680c971b-18b3-42eb-b3fe-620c6c656ca0)"
/>
<rect
x={502.07}
y={530}
width={92}
height={38}
rx={19}
ry={19}
fill="#64ffda"
/>
<path
d="M659.5,694h0a19.06,19.06,0,0,1,19-19h54a18.82,18.82,0,0,1,8.86,2.22A19,19,0,0,0,726.5,670h-54a19.06,19.06,0,0,0-19,19h0a19,19,0,0,0,10.14,16.78A18.88,18.88,0,0,1,659.5,694Z"
transform="translate(-151.43 -140.03)"
fill="#ff5252"
opacity={0.2}
/>
<path
d="M562.5,680l35.85,52H858.5l-31.78-42.46A22.83,22.83,0,0,0,808.51,680Z"
transform="translate(-151.43 -140.03)"
fill="url(#51e936ee-3820-4ad2-98e1-dde99ed0951f)"
/>
<path
d="M564.5,683l35,45h254l-31-36.74A23.27,23.27,0,0,0,804.69,683Z"
transform="translate(-151.43 -140.03)"
fill={props.primaryColor}
/>
<path
d="M597.56,668S583.93,521.16,723.45,497c0,0-66.09,93.37-24.13,171Z"
transform="translate(-151.43 -140.03)"
fill="url(#6a43d89c-cf4a-4c8b-801f-93cf02c7a71f)"
/>
<path
d="M600.5,664s-13-140,120-163c0,0-63,89-23,163Z"
transform="translate(-151.43 -140.03)"
fill={props.primaryColor}
/>
<polygon
points="546.51 339.64 569.07 343.95 547.18 348.81 546.51 339.64"
fill="url(#9d954d62-6ebc-4ad3-aace-04154c80b8e0)"
/>
<polygon
points="548.51 340.45 567.07 344 549.07 348 548.51 340.45"
fill="#ff5252"
/>
<path
d="M716.26,507.57c2.59-4.21,4.24-6.54,4.24-6.54-133,23-120,163-120,163h7.77C607.39,641.87,608.76,533.76,716.26,507.57Z"
transform="translate(-151.43 -140.03)"
fill="#ff5252"
opacity={0.2}
/>
<path
d="M807.69,687a23.27,23.27,0,0,1,17.78,8.26L853.12,728h.38l-31-36.74A23.27,23.27,0,0,0,804.69,683H564.5l3.11,4Z"
transform="translate(-151.43 -140.03)"
fill="#ff5252"
opacity={0.2}
/>
<path
d="M362.5,586.4s9.05-7.57,15.64,0,17.28,2.52,20.57-1.51,18.11,1.51,19.75,5.55,8.23,9.09,12.76,5,13.58-13.13,17.28-7.57"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M362.5,586.4s9.05-7.57,15.64,0,17.28,2.52,20.57-1.51,18.11,1.51,19.75,5.55,8.23,9.09,12.76,5,13.58-13.13,17.28-7.57"
transform="translate(-151.43 -140.03)"
opacity={0.2}
/>
<path
d="M257.5,662.4s31.26-7.57,54,0,59.68,2.52,71.05-1.51,62.53,1.51,68.21,5.55,28.42,9.09,44.05,5,46.89-13.13,59.68-7.57"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M164.5,735.64s31.26-8.12,54,0,59.68,2.71,71.05-1.62,62.53,1.62,68.21,6,28.42,9.74,44.05,5.41,46.89-14.07,59.68-8.12"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M502.5,749.4s13.16-7.57,22.73,0,25.12,2.52,29.9-1.51,26.32,1.51,28.71,5.55,12,9.09,18.54,5,19.74-13.13,25.12-7.57"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M864.5,714.4s13.16-7.57,22.73,0,25.12,2.52,29.9-1.51,26.32,1.51,28.71,5.55,12,9.09,18.54,5,19.74-13.13,25.12-7.57"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M785.5,607.4s16.63-7.57,28.73,0,31.75,2.52,37.8-1.51,33.26,1.51,36.29,5.55,15.12,9.09,23.44,5,24.95-13.13,31.75-7.57"
transform="translate(-151.43 -140.03)"
fill="#2196f3"
/>
<path
d="M785.5,607.4s16.63-7.57,28.73,0,31.75,2.52,37.8-1.51,33.26,1.51,36.29,5.55,15.12,9.09,23.44,5,24.95-13.13,31.75-7.57"
transform="translate(-151.43 -140.03)"
opacity={0.2}
/>
</svg>
);
UndrawGoldenGateBridge.propTypes = {
/**
* Hex color
*/
primaryColor: PropTypes.string,
/**
* percentage
*/
height: PropTypes.string,
/**
* custom class for svg
*/
class: PropTypes.string
};
UndrawGoldenGateBridge.defaultProps = {
primaryColor: "#6c68fb",
height: "250px",
class: ""
};
export default UndrawGoldenGateBridge;