SVG
Viewer
VT5UekbM
N/A
Send feedback
Terms & Conditions
Privacy Policy
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
24.61 KB
17.04 KB
-31%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 800" width="1400" height="800"> <defs> <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#020815"></stop> <stop offset="25%" stop-color="#0a1628"></stop> <stop offset="50%" stop-color="#0f1f3d"></stop> <stop offset="75%" stop-color="#1a1a3e"></stop> <stop offset="100%" stop-color="#2d1b4e"></stop> </linearGradient> <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fffff0" stop-opacity="1"></stop> <stop offset="20%" stop-color="#ffffdd" stop-opacity="0.6"></stop> <stop offset="50%" stop-color="#eeeebb" stop-opacity="0.15"></stop> <stop offset="100%" stop-color="#ddddaa" stop-opacity="0"></stop> </radialGradient> <radialGradient id="moonHalo" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#bbbbff" stop-opacity="0.08"></stop> <stop offset="100%" stop-color="#8888cc" stop-opacity="0"></stop> </radialGradient> <linearGradient id="road" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#181818"></stop> <stop offset="50%" stop-color="#222222"></stop> <stop offset="100%" stop-color="#2e2e2e"></stop> </linearGradient> <linearGradient id="roadWet" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#1a1a2a" stop-opacity="0.5"></stop> <stop offset="100%" stop-color="#222233" stop-opacity="0.3"></stop> </linearGradient> <linearGradient id="beamL" x1="1" y1="0.5" x2="0" y2="0.3"> <stop offset="0%" stop-color="#ffffcc" stop-opacity="0.7"></stop> <stop offset="30%" stop-color="#ffeeaa" stop-opacity="0.3"></stop> <stop offset="60%" stop-color="#ffdd88" stop-opacity="0.08"></stop> <stop offset="100%" stop-color="#ffcc66" stop-opacity="0"></stop> </linearGradient> <linearGradient id="beamR" x1="1" y1="0.5" x2="0" y2="0.7"> <stop offset="0%" stop-color="#ffffcc" stop-opacity="0.5"></stop> <stop offset="40%" stop-color="#ffeeaa" stop-opacity="0.15"></stop> <stop offset="100%" stop-color="#ffcc66" stop-opacity="0"></stop> </linearGradient> <radialGradient id="tailG" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#ff1100" stop-opacity="0.9"></stop> <stop offset="30%" stop-color="#ff0000" stop-opacity="0.4"></stop> <stop offset="100%" stop-color="#cc0000" stop-opacity="0"></stop> </radialGradient> <radialGradient id="cityGlow1" cx="50%" cy="100%" r="70%"> <stop offset="0%" stop-color="#ff8844" stop-opacity="0.12"></stop> <stop offset="100%" stop-color="#ff6622" stop-opacity="0"></stop> </radialGradient> <radialGradient id="cityGlow2" cx="50%" cy="100%" r="50%"> <stop offset="0%" stop-color="#44aaff" stop-opacity="0.06"></stop> <stop offset="100%" stop-color="#2266cc" stop-opacity="0"></stop> </radialGradient> <linearGradient id="aurora1" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#00ff88" stop-opacity="0"></stop> <stop offset="20%" stop-color="#00ff88" stop-opacity="0.06"></stop> <stop offset="50%" stop-color="#00ccaa" stop-opacity="0.09"></stop> <stop offset="80%" stop-color="#0088ff" stop-opacity="0.05"></stop> <stop offset="100%" stop-color="#4444ff" stop-opacity="0"></stop> </linearGradient> <linearGradient id="aurora2" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#44ffaa" stop-opacity="0"></stop> <stop offset="30%" stop-color="#22ddaa" stop-opacity="0.04"></stop> <stop offset="60%" stop-color="#00aacc" stop-opacity="0.07"></stop> <stop offset="100%" stop-color="#2266ff" stop-opacity="0"></stop> </linearGradient> <radialGradient id="vignette" cx="50%" cy="48%" r="65%"> <stop offset="0%" stop-color="#000" stop-opacity="0"></stop> <stop offset="70%" stop-color="#000" stop-opacity="0.15"></stop> <stop offset="100%" stop-color="#000" stop-opacity="0.65"></stop> </radialGradient> <radialGradient id="dustGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#ffffcc" stop-opacity="0.5"></stop> <stop offset="100%" stop-color="#ffffaa" stop-opacity="0"></stop> </radialGradient> <radialGradient id="oncomingHL" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"></stop> <stop offset="30%" stop-color="#ccddff" stop-opacity="0.4"></stop> <stop offset="100%" stop-color="#8899ff" stop-opacity="0"></stop> </radialGradient> <linearGradient id="signReflect" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#446688" stop-opacity="0.8"></stop> <stop offset="100%" stop-color="#223344" stop-opacity="0.6"></stop> </linearGradient> <filter id="f1"><feGaussianBlur stdDeviation="1.2"></feGaussianBlur></filter> <filter id="f2"><feGaussianBlur stdDeviation="2.5"></feGaussianBlur></filter> <filter id="f4"><feGaussianBlur stdDeviation="4"></feGaussianBlur></filter> <filter id="f8"><feGaussianBlur stdDeviation="8"></feGaussianBlur></filter> <filter id="f12"><feGaussianBlur stdDeviation="12"></feGaussianBlur></filter> <filter id="f20"><feGaussianBlur stdDeviation="20"></feGaussianBlur></filter> <filter id="f30"><feGaussianBlur stdDeviation="30"></feGaussianBlur></filter> <filter id="noise"> <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"></feTurbulence> <feColorMatrix type="saturate" values="0"></feColorMatrix> </filter> <clipPath id="roadClip"> <path d="M400 480 L-50 800 L1450 800 L1000 480 Z"></path> </clipPath> </defs> <rect width="1400" height="800" fill="url(#sky)"></rect> <rect width="1400" height="800" filter="url(#noise)" opacity="0.02"></rect> <g> <path d="M200 80 Q400 40 600 70 Q800 30 1000 60 Q1150 45 1300 80 L1300 200 Q1100 150 900 180 Q700 140 500 170 Q300 145 200 200 Z" fill="url(#aurora1)" opacity="0.7"> </path> <path d="M100 100 Q350 60 550 90 Q750 50 950 80 Q1100 60 1250 100 L1250 180 Q1050 140 850 160 Q650 125 450 150 Q250 130 100 180 Z" fill="url(#aurora2)" opacity="0.5"> </path> </g> <g opacity="0.06"> <ellipse cx="700" cy="130" rx="550" ry="65" fill="#99aadd" transform="rotate(-12 700 130)" filter="url(#f30)"></ellipse> </g> <g opacity="0.04"> <ellipse cx="720" cy="140" rx="400" ry="35" fill="#bbaaee" transform="rotate(-12 720 140)" filter="url(#f20)"></ellipse> </g> <g fill="#fff"> <circle cx="45" cy="25" r="0.8" opacity="0.6"></circle> <circle cx="130" cy="70" r="0.7" opacity="0.5"></circle> <circle cx="210" cy="18" r="1" opacity="0.7"></circle> <circle cx="295" cy="105" r="0.6" opacity="0.5"></circle> <circle cx="365" cy="42" r="0.9" opacity="0.6"></circle> <circle cx="440" cy="125" r="0.7" opacity="0.4"></circle> <circle cx="515" cy="55" r="1" opacity="0.65"></circle> <circle cx="590" cy="22" r="0.8" opacity="0.5"></circle> <circle cx="665" cy="88" r="0.9" opacity="0.55"></circle> <circle cx="745" cy="35" r="0.6" opacity="0.4"></circle> <circle cx="815" cy="115" r="1.1" opacity="0.6"></circle> <circle cx="898" cy="48" r="0.7" opacity="0.5"></circle> <circle cx="975" cy="80" r="0.9" opacity="0.55"></circle> <circle cx="1045" cy="30" r="0.8" opacity="0.45"></circle> <circle cx="1120" cy="65" r="1" opacity="0.6"></circle> <circle cx="1190" cy="120" r="0.6" opacity="0.4"></circle> <circle cx="1270" cy="42" r="0.8" opacity="0.5"></circle> <circle cx="1350" cy="90" r="0.7" opacity="0.45"></circle> <circle cx="80" cy="155" r="0.8" opacity="0.5"></circle> <circle cx="175" cy="185" r="0.9" opacity="0.55"></circle> <circle cx="320" cy="168" r="0.7" opacity="0.4"></circle> <circle cx="465" cy="195" r="1" opacity="0.6"></circle> <circle cx="575" cy="160" r="0.6" opacity="0.35"></circle> <circle cx="710" cy="175" r="0.8" opacity="0.5"></circle> <circle cx="855" cy="190" r="0.7" opacity="0.4"></circle> <circle cx="985" cy="150" r="1" opacity="0.55"></circle> <circle cx="1095" cy="170" r="0.8" opacity="0.45"></circle> <circle cx="1230" cy="160" r="0.6" opacity="0.35"></circle> <circle cx="1320" cy="185" r="0.9" opacity="0.5"></circle> <circle cx="60" cy="240" r="0.5" opacity="0.3"></circle> <circle cx="260" cy="230" r="0.7" opacity="0.4"></circle> <circle cx="410" cy="250" r="0.6" opacity="0.35"></circle> <circle cx="630" cy="225" r="0.8" opacity="0.45"></circle> <circle cx="790" cy="245" r="0.5" opacity="0.3"></circle> <circle cx="1010" cy="215" r="0.7" opacity="0.4"></circle> <circle cx="1155" cy="235" r="0.6" opacity="0.35"></circle> <circle cx="1300" cy="248" r="0.8" opacity="0.4"></circle> <circle cx="55" cy="310" r="0.4" opacity="0.25"></circle> <circle cx="185" cy="295" r="0.6" opacity="0.35"></circle> <circle cx="340" cy="305" r="0.5" opacity="0.3"></circle> <circle cx="540" cy="280" r="0.7" opacity="0.4"></circle> <circle cx="920" cy="275" r="0.5" opacity="0.3"></circle> <circle cx="1060" cy="290" r="0.6" opacity="0.35"></circle> <circle cx="1250" cy="300" r="0.4" opacity="0.25"></circle> </g> <g> <g transform="translate(160,48)" opacity="0.85"> <line x1="-6" y1="0" x2="6" y2="0" stroke="#aaccff" stroke-width="0.8" filter="url(#f1)"></line> <line x1="0" y1="-6" x2="0" y2="6" stroke="#aaccff" stroke-width="0.8" filter="url(#f1)"></line> <circle r="1.8" fill="#ddeeff"></circle> <circle r="6" fill="#aaccff" opacity="0.08" filter="url(#f4)"></circle> </g> <g transform="translate(490,85)" opacity="0.95"> <line x1="-8" y1="0" x2="8" y2="0" stroke="#fff" stroke-width="0.6" filter="url(#f1)"></line> <line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.6" filter="url(#f1)"></line> <line x1="-5" y1="-5" x2="5" y2="5" stroke="#fff" stroke-width="0.4" filter="url(#f1)"></line> <line x1="5" y1="-5" x2="-5" y2="5" stroke="#fff" stroke-width="0.4" filter="url(#f1)"></line> <circle r="2.2" fill="#ffffff"></circle> <circle r="10" fill="#ffffff" opacity="0.06" filter="url(#f4)"></circle> </g> <g transform="translate(780,55)" opacity="0.8"> <line x1="-5" y1="0" x2="5" y2="0" stroke="#ffeedd" stroke-width="0.7" filter="url(#f1)"></line> <line x1="0" y1="-5" x2="0" y2="5" stroke="#ffeedd" stroke-width="0.7" filter="url(#f1)"></line> <circle r="1.6" fill="#fff5ee"></circle> </g> <g transform="translate(1100,95)" opacity="0.75"> <line x1="-5" y1="0" x2="5" y2="0" stroke="#aaddff" stroke-width="0.6" filter="url(#f1)"></line> <line x1="0" y1="-5" x2="0" y2="5" stroke="#aaddff" stroke-width="0.6" filter="url(#f1)"></line> <circle r="1.5" fill="#ccebff"></circle> </g> <g transform="translate(345,205)" opacity="0.85"> <line x1="-6" y1="0" x2="6" y2="0" stroke="#fff" stroke-width="0.5" filter="url(#f1)"></line> <line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.5" filter="url(#f1)"></line> <circle r="1.8" fill="#ffffff"></circle> </g> </g> <circle cx="1100" cy="110" r="120" fill="url(#moonHalo)"></circle> <circle cx="1100" cy="110" r="60" fill="url(#moonGlow)"></circle> <circle cx="1100" cy="110" r="28" fill="#f0f0e0"></circle> <circle cx="1090" cy="100" r="5" fill="#ddddc8" opacity="0.5"></circle> <circle cx="1108" cy="115" r="3.5" fill="#d8d8c0" opacity="0.4"></circle> <circle cx="1095" cy="118" r="2.5" fill="#dbdbc5" opacity="0.35"></circle> <circle cx="1112" cy="98" r="2" fill="#d6d6c2" opacity="0.3"></circle> <circle cx="1103" cy="107" r="1.5" fill="#d4d4c0" opacity="0.25"></circle> <ellipse cx="1100" cy="110" r="180" ry="200" fill="#bbbbff" opacity="0.015" filter="url(#f30)"></ellipse> <g opacity="0.06"> <ellipse cx="300" cy="280" rx="180" ry="15" fill="#445577" filter="url(#f12)"> </ellipse> <ellipse cx="800" cy="320" rx="220" ry="12" fill="#445577" filter="url(#f12)"> </ellipse> <ellipse cx="1200" cy="260" rx="150" ry="10" fill="#445577" filter="url(#f12)"> </ellipse> </g> <ellipse cx="950" cy="470" rx="350" ry="120" fill="url(#cityGlow1)"></ellipse> <ellipse cx="400" cy="470" rx="250" ry="90" fill="url(#cityGlow2)"></ellipse> <path d="M0 460 L50 430 L120 445 L200 410 L290 435 L380 400 L460 420 L550 390 L640 415 L730 385 L820 405 L900 375 L980 395 L1060 370 L1140 390 L1220 380 L1300 400 L1400 385 L1400 470 L0 470 Z" fill="#0b0b22" opacity="0.85"></path> <path d="M0 472 L70 448 L160 460 L260 435 L360 455 L440 430 L530 450 L630 428 L720 445 L810 425 L900 442 L980 420 L1070 438 L1160 422 L1250 440 L1340 425 L1400 440 L1400 475 L0 475 Z" fill="#0f0f2a"></path> <path d="M0 478 L110 462 L220 475 L340 458 L460 472 L580 455 L700 468 L820 452 L940 465 L1060 450 L1180 463 L1300 455 L1400 460 L1400 485 L0 485 Z" fill="#131335"></path> <g fill="#0c0c24"> <path d="M0 478 L5 460 L12 470 L18 455 L25 465 L32 450 L38 462 L45 448 L52 458 L60 445 L68 455 L75 442 L82 454 L90 465 L98 455 L105 468 L115 458 L125 470 L135 462 L145 475 L145 480 L0 480 Z"></path> <path d="M200 478 L205 458 L212 468 L220 452 L228 462 L235 448 L242 460 L250 445 L258 455 L265 440 L272 452 L280 465 L290 455 L300 468 L310 475 L310 480 L200 480 Z"></path> <path d="M480 478 L485 462 L492 470 L500 455 L508 465 L515 450 L522 460 L530 445 L538 458 L545 442 L555 455 L565 465 L575 458 L585 470 L590 478 L590 480 L480 480 Z"></path> <path d="M1050 478 L1055 458 L1062 468 L1070 450 L1078 462 L1085 445 L1092 458 L1100 440 L1108 452 L1115 438 L1122 450 L1130 462 L1140 455 L1150 468 L1160 458 L1170 470 L1180 462 L1190 472 L1200 465 L1210 475 L1210 480 L1050 480 Z"></path> <path d="M1280 478 L1285 465 L1292 455 L1300 445 L1308 458 L1315 448 L1322 460 L1330 470 L1340 462 L1350 472 L1360 465 L1370 475 L1380 468 L1400 470 L1400 480 L1280 480 Z"></path> </g> <g fill="#080818"> <polygon points="20,480 35,420 38,440 42,410 46,435 50,395 54,425 58,445 65,480"></polygon> <polygon points="0,480 8,440 12,425 16,405 20,420 24,435 30,480"></polygon> <polygon points="55,480 65,435 68,450 72,420 76,440 80,410 84,435 88,448 95,480"></polygon> <polygon points="1300,480 1315,430 1318,445 1322,415 1326,438 1330,400 1334,428 1338,445 1350,480"></polygon> <polygon points="1340,480 1350,440 1355,425 1360,410 1365,428 1370,440 1380,480"></polygon> <polygon points="1370,480 1378,445 1382,430 1386,415 1390,432 1395,445 1400,480"></polygon> </g> <rect x="0" y="480" width="1400" height="320" fill="#0c0c15"></rect> <path d="M400 480 L-50 800 L1450 800 L1000 480 Z" fill="url(#road)"></path> <path d="M400 480 L-50 800 L1450 800 L1000 480 Z" fill="url(#roadWet)" opacity="0.3"></path> <g fill="#0d0d18" opacity="0.7"> <path d="M0 480 L400 480 L-50 800 L0 800 Z"></path> <path d="M1000 480 L1400 480 L1400 800 L1450 800 Z"></path> </g> <path d="M400 480 L-50 800" stroke="#3a3a3a" stroke-width="3"></path> <path d="M1000 480 L1450 800" stroke="#3a3a3a" stroke-width="3"></path> <path d="M405 480 L-40 800" stroke="#666655" stroke-width="1.5" stroke-dasharray="20,30" opacity="0.4"></path> <path d="M995 480 L1440 800" stroke="#666655" stroke-width="1.5" stroke-dasharray="20,30" opacity="0.4"></path> <g clip-path="url(#roadClip)"> <g> <line x1="700" y1="470" x2="650" y2="800" stroke="#cccc44" stroke-width="2" stroke-dasharray="15,12" opacity="0.7"> </line> <line x1="700" y1="470" x2="650" y2="800" stroke="#cccc44" stroke-width="4" stroke-dasharray="15,12" opacity="0.1" filter="url(#f2)"> </line> </g> </g> <g> <circle cx="735" cy="478" r="2" fill="#ffffff" opacity="0.9"></circle> <circle cx="745" cy="478" r="2" fill="#ffffff" opacity="0.9"></circle> <circle cx="740" cy="478" r="15" fill="url(#oncomingHL)" opacity="0.3" filter="url(#f4)"></circle> <circle cx="740" cy="478" r="30" fill="#aabbff" opacity="0.04" filter="url(#f8)"></circle> <ellipse cx="740" cy="490" rx="20" ry="8" fill="#aabbff" opacity="0.04" filter="url(#f4)"></ellipse> </g> <g clip-path="url(#roadClip)"> <ellipse cx="830" cy="620" rx="280" ry="110" fill="#ffffaa" opacity="0.06" filter="url(#f20)"></ellipse> <ellipse cx="850" cy="570" rx="180" ry="60" fill="#ffffcc" opacity="0.04" filter="url(#f12)"></ellipse> </g> <ellipse cx="700" cy="495" rx="550" ry="25" fill="#667788" opacity="0.05" filter="url(#f20)"></ellipse> <ellipse cx="500" cy="530" rx="350" ry="18" fill="#556677" opacity="0.03" filter="url(#f20)"></ellipse> <ellipse cx="900" cy="510" rx="300" ry="20" fill="#556688" opacity="0.04" filter="url(#f20)"></ellipse> <g clip-path="url(#roadClip)"> <polygon points="880,590 850,570 620,480 900,480" fill="url(#beamL)" opacity="0.2"></polygon> <polygon points="880,590 850,570 620,482 900,482" fill="#ffffcc" opacity="0.03" filter="url(#f8)"></polygon> <polygon points="900,590 870,565 650,478 950,478" fill="url(#beamR)" opacity="0.15"></polygon> </g> <g clip-path="url(#roadClip)"> <circle cx="820" cy="530" r="1.5" fill="url(#dustGlow)" opacity="0.6"> </circle> <circle cx="780" cy="510" r="1" fill="url(#dustGlow)" opacity="0.4"> </circle> <circle cx="850" cy="550" r="1.2" fill="url(#dustGlow)" opacity="0.5"> </circle> <circle cx="760" cy="505" r="0.8" fill="url(#dustGlow)" opacity="0.3"> </circle> <circle cx="870" cy="560" r="1.3" fill="url(#dustGlow)" opacity="0.45"> </circle> <circle cx="800" cy="520" r="0.9" fill="url(#dustGlow)" opacity="0.35"> </circle> </g> <g> <rect x="1010" y="460" width="3" height="28" fill="#444444" rx="1"></rect> <rect x="998" y="450" width="28" height="18" rx="2" fill="url(#signReflect)" stroke="#667788" stroke-width="0.5"></rect> <text x="1012" y="463" font-family="Arial" font-size="8" fill="#ccddee" text-anchor="middle" font-weight="bold">E12</text> <rect x="998" y="450" width="28" height="18" rx="2" fill="#ffffcc" opacity="0.04" filter="url(#f2)"></rect> </g> <g> <rect x="330" y="470" width="2.5" height="13" fill="#555" rx="0.5"></rect> <circle cx="331.25" cy="470" r="2.2" fill="#ff4400" opacity="0.8"></circle> <circle cx="331.25" cy="470" r="5" fill="#ff4400" opacity="0.15" filter="url(#f4)"></circle> <rect x="230" y="498" width="3" height="16" fill="#555" rx="0.5"></rect> <circle cx="231.5" cy="498" r="2.8" fill="#ff4400" opacity="0.8"></circle> <circle cx="231.5" cy="498" r="6" fill="#ff4400" opacity="0.15" filter="url(#f4)"></circle> <rect x="110" y="535" width="3.5" height="20" fill="#555" rx="0.5"></rect> <circle cx="111.75" cy="535" r="3.2" fill="#ff4400" opacity="0.8"></circle> <circle cx="111.75" cy="535" r="7" fill="#ff4400" opacity="0.12" filter="url(#f4)"></circle> <rect x="1065" y="470" width="2.5" height="13" fill="#555" rx="0.5"></rect> <circle cx="1066.25" cy="470" r="2.2" fill="#ff8800" opacity="0.8"></circle> <circle cx="1066.25" cy="470" r="5" fill="#ff8800" opacity="0.15" filter="url(#f4)"></circle> <rect x="1170" y="498" width="3" height="16" fill="#555" rx="0.5"></rect> <circle cx="1171.5" cy="498" r="2.8" fill="#ff8800" opacity="0.8"></circle> <circle cx="1171.5" cy="498" r="6" fill="#ff8800" opacity="0.15" filter="url(#f4)"></circle> <rect x="1290" y="535" width="3.5" height="20" fill="#555" rx="0.5"></rect> <circle cx="1291.75" cy="535" r="3.2" fill="#ff8800" opacity="0.8"></circle> <circle cx="1291.75" cy="535" r="7" fill="#ff8800" opacity="0.12" filter="url(#f4)"></circle> </g> <g transform="translate(770, 555)"> <ellipse cx="55" cy="72" rx="85" ry="10" fill="#000" opacity="0.7" filter="url(#f8)"></ellipse> <path d="M-5 42 L0 28 L10 18 L25 10 L40 5 L75 5 L90 10 L100 18 L110 28 L115 42 L118 48 L118 62 L-8 62 L-8 48 Z" fill="#12122a"></path> <path d="M5 35 L15 22 L30 14 L48 8 L72 8 L88 14 L100 24 L108 38 L100 40 L12 40 Z" fill="#1a1a3a" opacity="0.5"></path> <path d="M8 44 L108 44 L110 48 L6 48 Z" fill="#222244" opacity="0.3"></path> <path d="M25 10 L32 -10 L42 -18 L70 -18 L80 -10 L88 10 Z" fill="#0e0e24"></path> <path d="M28 8 L34 -8 L44 -15 L55 -15 L50 8 Z" fill="#152040" opacity="0.75"></path> <path d="M55 8 L60 -15 L72 -15 L80 -8 L84 8 Z" fill="#152040" opacity="0.75"></path> <path d="M30 5 L36 -6 L40 -6 L35 5 Z" fill="#3366aa" opacity="0.15"></path> <path d="M72 -12 L76 -6 L82 5 L78 5 L70 -8 Z" fill="#5588cc" opacity="0.12"></path> <rect x="22" y="12" width="6" height="4" rx="1" fill="#0e0e24"></rect> <rect x="84" y="12" width="6" height="4" rx="1" fill="#0e0e24"></rect> <path d="M100 32 L120 38 L122 42 L122 56 L115 58 L100 55 Z" fill="#101028"></path> <line x1="115" y1="42" x2="115" y2="54" stroke="#1a1a35" stroke-width="0.5"></line> <line x1="118" y1="41" x2="118" y2="55" stroke="#1a1a35" stroke-width="0.5"></line> <path d="M12 32 L-8 38 L-10 42 L-10 56 L-3 58 L12 55 Z" fill="#101028"></path> <ellipse cx="118" cy="42" rx="5" ry="5" fill="#ffffdd" opacity="0.95"></ellipse> <ellipse cx="118" cy="42" rx="4" ry="4" fill="#ffffff"></ellipse> <ellipse cx="118" cy="42" rx="10" ry="8" fill="#ffffaa" opacity="0.4" filter="url(#f4)"></ellipse> <ellipse cx="118" cy="50" rx="3" ry="3" fill="#ffffcc" opacity="0.7"></ellipse> <line x1="112" y1="36" x2="120" y2="36" stroke="#aaddff" stroke-width="1" opacity="0.6"></line> <ellipse cx="-5" cy="42" rx="4" ry="4.5" fill="#ff1100" opacity="0.95"></ellipse> <ellipse cx="-5" cy="42" rx="14" ry="12" fill="url(#tailG)" opacity="0.6"></ellipse> <ellipse cx="-5" cy="50" rx="3" ry="2.5" fill="#ff3300" opacity="0.6"></ellipse> <rect x="42" y="-18" width="25" height="2" rx="1" fill="#ff2200" opacity="0.5"></rect> <rect x="42" y="-18" width="25" height="2" rx="1" fill="#ff2200" opacity="0.15" filter="url(#f2)"></rect> <g> <ellipse cx="32" cy="62" rx="14" ry="7" fill="#050505"></ellipse> <ellipse cx="32" cy="62" rx="12" ry="6" fill="#1a1a1a"></ellipse> <ellipse cx="32" cy="62" rx="5" ry="2.5" fill="#2a2a2a"></ellipse> <ellipse cx="32" cy="62" rx="2" ry="1" fill="#444"></ellipse> <line x1="28" y1="60" x2="36" y2="64" stroke="#333" stroke-width="0.5"></line> <line x1="28" y1="64" x2="36" y2="60" stroke="#333" stroke-width="0.5"></line> </g> <g> <ellipse cx="92" cy="62" rx="14" ry="7" fill="#050505"></ellipse> <ellipse cx="92" cy="62" rx="12" ry="6" fill="#1a1a1a"></ellipse> <ellipse cx="92" cy="62" rx="5" ry="2.5" fill="#2a2a2a"></ellipse> <ellipse cx="92" cy="62" rx="2" ry="1" fill="#444"></ellipse> <line x1="88" y1="60" x2="96" y2="64" stroke="#333" stroke-width="0.5"></line> <line x1="88" y1="64" x2="96" y2="60" stroke="#333" stroke-width="0.5"></line> </g> <ellipse cx="60" cy="-14" rx="12" ry="3" fill="#ffffee" opacity="0.05"></ellipse> <ellipse cx="95" cy="12" rx="8" ry="4" fill="#aaaacc" opacity="0.04"></ellipse> <line x1="38" y1="-18" x2="32" y2="-35" stroke="#444466" stroke-width="0.8"></line> <circle cx="32" cy="-35" r="0.8" fill="#666688"></circle> </g> <ellipse cx="768" cy="630" rx="35" ry="18" fill="#ff2200" opacity="0.06" filter="url(#f8)"></ellipse> <ellipse cx="768" cy="625" rx="20" ry="10" fill="#ff1100" opacity="0.04" filter="url(#f4)"></ellipse> <g opacity="0.5"> <line x1="345" y1="478" x2="0" y2="620" stroke="#333340" stroke-width="2"></line> <line x1="345" y1="482" x2="0" y2="624" stroke="#222230" stroke-width="1.5"></line> <rect x="300" y="475" width="2" height="12" fill="#333340"></rect> <rect x="200" y="500" width="2.5" height="14" fill="#333340"></rect> <rect x="90" y="530" width="3" height="16" fill="#333340"></rect> </g> <g> <line x1="250" y1="60" x2="290" y2="78" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"> </line> <line x1="260" y1="64" x2="290" y2="78" stroke="#aaccff" stroke-width="3" stroke-linecap="round" filter="url(#f2)"> </line> </g> <g> <line x1="1050" y1="180" x2="1080" y2="195" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round"> </line> <line x1="1060" y1="184" x2="1080" y2="195" stroke="#aaddff" stroke-width="2.5" stroke-linecap="round" filter="url(#f2)"> </line> </g> <rect width="1400" height="800" fill="url(#vignette)"></rect> <rect width="1400" height="800" filter="url(#noise)" opacity="0.015"></rect> </svg>
Upload
Copy
Download
Share
E12
Preview
React
React Native
PNG
Data URI
E12
100%
Download
SVG
Viewer
Edit
Export
Rotate
Flip Y
Flip X
-1px x -1px
Change dimensions
Optimize
24.61 KB
17.04 KB
-31%
Prettify
Preferences
Clear
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 800" width="1400" height="800"> <defs> <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#020815"></stop> <stop offset="25%" stop-color="#0a1628"></stop> <stop offset="50%" stop-color="#0f1f3d"></stop> <stop offset="75%" stop-color="#1a1a3e"></stop> <stop offset="100%" stop-color="#2d1b4e"></stop> </linearGradient> <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fffff0" stop-opacity="1"></stop> <stop offset="20%" stop-color="#ffffdd" stop-opacity="0.6"></stop> <stop offset="50%" stop-color="#eeeebb" stop-opacity="0.15"></stop> <stop offset="100%" stop-color="#ddddaa" stop-opacity="0"></stop> </radialGradient> <radialGradient id="moonHalo" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#bbbbff" stop-opacity="0.08"></stop> <stop offset="100%" stop-color="#8888cc" stop-opacity="0"></stop> </radialGradient> <linearGradient id="road" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#181818"></stop> <stop offset="50%" stop-color="#222222"></stop> <stop offset="100%" stop-color="#2e2e2e"></stop> </linearGradient> <linearGradient id="roadWet" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#1a1a2a" stop-opacity="0.5"></stop> <stop offset="100%" stop-color="#222233" stop-opacity="0.3"></stop> </linearGradient> <linearGradient id="beamL" x1="1" y1="0.5" x2="0" y2="0.3"> <stop offset="0%" stop-color="#ffffcc" stop-opacity="0.7"></stop> <stop offset="30%" stop-color="#ffeeaa" stop-opacity="0.3"></stop> <stop offset="60%" stop-color="#ffdd88" stop-opacity="0.08"></stop> <stop offset="100%" stop-color="#ffcc66" stop-opacity="0"></stop> </linearGradient> <linearGradient id="beamR" x1="1" y1="0.5" x2="0" y2="0.7"> <stop offset="0%" stop-color="#ffffcc" stop-opacity="0.5"></stop> <stop offset="40%" stop-color="#ffeeaa" stop-opacity="0.15"></stop> <stop offset="100%" stop-color="#ffcc66" stop-opacity="0"></stop> </linearGradient> <radialGradient id="tailG" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#ff1100" stop-opacity="0.9"></stop> <stop offset="30%" stop-color="#ff0000" stop-opacity="0.4"></stop> <stop offset="100%" stop-color="#cc0000" stop-opacity="0"></stop> </radialGradient> <radialGradient id="cityGlow1" cx="50%" cy="100%" r="70%"> <stop offset="0%" stop-color="#ff8844" stop-opacity="0.12"></stop> <stop offset="100%" stop-color="#ff6622" stop-opacity="0"></stop> </radialGradient> <radialGradient id="cityGlow2" cx="50%" cy="100%" r="50%"> <stop offset="0%" stop-color="#44aaff" stop-opacity="0.06"></stop> <stop offset="100%" stop-color="#2266cc" stop-opacity="0"></stop> </radialGradient> <linearGradient id="aurora1" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#00ff88" stop-opacity="0"></stop> <stop offset="20%" stop-color="#00ff88" stop-opacity="0.06"></stop> <stop offset="50%" stop-color="#00ccaa" stop-opacity="0.09"></stop> <stop offset="80%" stop-color="#0088ff" stop-opacity="0.05"></stop> <stop offset="100%" stop-color="#4444ff" stop-opacity="0"></stop> </linearGradient> <linearGradient id="aurora2" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#44ffaa" stop-opacity="0"></stop> <stop offset="30%" stop-color="#22ddaa" stop-opacity="0.04"></stop> <stop offset="60%" stop-color="#00aacc" stop-opacity="0.07"></stop> <stop offset="100%" stop-color="#2266ff" stop-opacity="0"></stop> </linearGradient> <radialGradient id="vignette" cx="50%" cy="48%" r="65%"> <stop offset="0%" stop-color="#000" stop-opacity="0"></stop> <stop offset="70%" stop-color="#000" stop-opacity="0.15"></stop> <stop offset="100%" stop-color="#000" stop-opacity="0.65"></stop> </radialGradient> <radialGradient id="dustGlow" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#ffffcc" stop-opacity="0.5"></stop> <stop offset="100%" stop-color="#ffffaa" stop-opacity="0"></stop> </radialGradient> <radialGradient id="oncomingHL" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"></stop> <stop offset="30%" stop-color="#ccddff" stop-opacity="0.4"></stop> <stop offset="100%" stop-color="#8899ff" stop-opacity="0"></stop> </radialGradient> <linearGradient id="signReflect" x1="0" y1="0" x2="0" y2="1"> <stop offset="0%" stop-color="#446688" stop-opacity="0.8"></stop> <stop offset="100%" stop-color="#223344" stop-opacity="0.6"></stop> </linearGradient> <filter id="f1"><feGaussianBlur stdDeviation="1.2"></feGaussianBlur></filter> <filter id="f2"><feGaussianBlur stdDeviation="2.5"></feGaussianBlur></filter> <filter id="f4"><feGaussianBlur stdDeviation="4"></feGaussianBlur></filter> <filter id="f8"><feGaussianBlur stdDeviation="8"></feGaussianBlur></filter> <filter id="f12"><feGaussianBlur stdDeviation="12"></feGaussianBlur></filter> <filter id="f20"><feGaussianBlur stdDeviation="20"></feGaussianBlur></filter> <filter id="f30"><feGaussianBlur stdDeviation="30"></feGaussianBlur></filter> <filter id="noise"> <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"></feTurbulence> <feColorMatrix type="saturate" values="0"></feColorMatrix> </filter> <clipPath id="roadClip"> <path d="M400 480 L-50 800 L1450 800 L1000 480 Z"></path> </clipPath> </defs> <rect width="1400" height="800" fill="url(#sky)"></rect> <rect width="1400" height="800" filter="url(#noise)" opacity="0.02"></rect> <g> <path d="M200 80 Q400 40 600 70 Q800 30 1000 60 Q1150 45 1300 80 L1300 200 Q1100 150 900 180 Q700 140 500 170 Q300 145 200 200 Z" fill="url(#aurora1)" opacity="0.7"> </path> <path d="M100 100 Q350 60 550 90 Q750 50 950 80 Q1100 60 1250 100 L1250 180 Q1050 140 850 160 Q650 125 450 150 Q250 130 100 180 Z" fill="url(#aurora2)" opacity="0.5"> </path> </g> <g opacity="0.06"> <ellipse cx="700" cy="130" rx="550" ry="65" fill="#99aadd" transform="rotate(-12 700 130)" filter="url(#f30)"></ellipse> </g> <g opacity="0.04"> <ellipse cx="720" cy="140" rx="400" ry="35" fill="#bbaaee" transform="rotate(-12 720 140)" filter="url(#f20)"></ellipse> </g> <g fill="#fff"> <circle cx="45" cy="25" r="0.8" opacity="0.6"></circle> <circle cx="130" cy="70" r="0.7" opacity="0.5"></circle> <circle cx="210" cy="18" r="1" opacity="0.7"></circle> <circle cx="295" cy="105" r="0.6" opacity="0.5"></circle> <circle cx="365" cy="42" r="0.9" opacity="0.6"></circle> <circle cx="440" cy="125" r="0.7" opacity="0.4"></circle> <circle cx="515" cy="55" r="1" opacity="0.65"></circle> <circle cx="590" cy="22" r="0.8" opacity="0.5"></circle> <circle cx="665" cy="88" r="0.9" opacity="0.55"></circle> <circle cx="745" cy="35" r="0.6" opacity="0.4"></circle> <circle cx="815" cy="115" r="1.1" opacity="0.6"></circle> <circle cx="898" cy="48" r="0.7" opacity="0.5"></circle> <circle cx="975" cy="80" r="0.9" opacity="0.55"></circle> <circle cx="1045" cy="30" r="0.8" opacity="0.45"></circle> <circle cx="1120" cy="65" r="1" opacity="0.6"></circle> <circle cx="1190" cy="120" r="0.6" opacity="0.4"></circle> <circle cx="1270" cy="42" r="0.8" opacity="0.5"></circle> <circle cx="1350" cy="90" r="0.7" opacity="0.45"></circle> <circle cx="80" cy="155" r="0.8" opacity="0.5"></circle> <circle cx="175" cy="185" r="0.9" opacity="0.55"></circle> <circle cx="320" cy="168" r="0.7" opacity="0.4"></circle> <circle cx="465" cy="195" r="1" opacity="0.6"></circle> <circle cx="575" cy="160" r="0.6" opacity="0.35"></circle> <circle cx="710" cy="175" r="0.8" opacity="0.5"></circle> <circle cx="855" cy="190" r="0.7" opacity="0.4"></circle> <circle cx="985" cy="150" r="1" opacity="0.55"></circle> <circle cx="1095" cy="170" r="0.8" opacity="0.45"></circle> <circle cx="1230" cy="160" r="0.6" opacity="0.35"></circle> <circle cx="1320" cy="185" r="0.9" opacity="0.5"></circle> <circle cx="60" cy="240" r="0.5" opacity="0.3"></circle> <circle cx="260" cy="230" r="0.7" opacity="0.4"></circle> <circle cx="410" cy="250" r="0.6" opacity="0.35"></circle> <circle cx="630" cy="225" r="0.8" opacity="0.45"></circle> <circle cx="790" cy="245" r="0.5" opacity="0.3"></circle> <circle cx="1010" cy="215" r="0.7" opacity="0.4"></circle> <circle cx="1155" cy="235" r="0.6" opacity="0.35"></circle> <circle cx="1300" cy="248" r="0.8" opacity="0.4"></circle> <circle cx="55" cy="310" r="0.4" opacity="0.25"></circle> <circle cx="185" cy="295" r="0.6" opacity="0.35"></circle> <circle cx="340" cy="305" r="0.5" opacity="0.3"></circle> <circle cx="540" cy="280" r="0.7" opacity="0.4"></circle> <circle cx="920" cy="275" r="0.5" opacity="0.3"></circle> <circle cx="1060" cy="290" r="0.6" opacity="0.35"></circle> <circle cx="1250" cy="300" r="0.4" opacity="0.25"></circle> </g> <g> <g transform="translate(160,48)" opacity="0.85"> <line x1="-6" y1="0" x2="6" y2="0" stroke="#aaccff" stroke-width="0.8" filter="url(#f1)"></line> <line x1="0" y1="-6" x2="0" y2="6" stroke="#aaccff" stroke-width="0.8" filter="url(#f1)"></line> <circle r="1.8" fill="#ddeeff"></circle> <circle r="6" fill="#aaccff" opacity="0.08" filter="url(#f4)"></circle> </g> <g transform="translate(490,85)" opacity="0.95"> <line x1="-8" y1="0" x2="8" y2="0" stroke="#fff" stroke-width="0.6" filter="url(#f1)"></line> <line x1="0" y1="-8" x2="0" y2="8" stroke="#fff" stroke-width="0.6" filter="url(#f1)"></line> <line x1="-5" y1="-5" x2="5" y2="5" stroke="#fff" stroke-width="0.4" filter="url(#f1)"></line> <line x1="5" y1="-5" x2="-5" y2="5" stroke="#fff" stroke-width="0.4" filter="url(#f1)"></line> <circle r="2.2" fill="#ffffff"></circle> <circle r="10" fill="#ffffff" opacity="0.06" filter="url(#f4)"></circle> </g> <g transform="translate(780,55)" opacity="0.8"> <line x1="-5" y1="0" x2="5" y2="0" stroke="#ffeedd" stroke-width="0.7" filter="url(#f1)"></line> <line x1="0" y1="-5" x2="0" y2="5" stroke="#ffeedd" stroke-width="0.7" filter="url(#f1)"></line> <circle r="1.6" fill="#fff5ee"></circle> </g> <g transform="translate(1100,95)" opacity="0.75"> <line x1="-5" y1="0" x2="5" y2="0" stroke="#aaddff" stroke-width="0.6" filter="url(#f1)"></line> <line x1="0" y1="-5" x2="0" y2="5" stroke="#aaddff" stroke-width="0.6" filter="url(#f1)"></line> <circle r="1.5" fill="#ccebff"></circle> </g> <g transform="translate(345,205)" opacity="0.85"> <line x1="-6" y1="0" x2="6" y2="0" stroke="#fff" stroke-width="0.5" filter="url(#f1)"></line> <line x1="0" y1="-6" x2="0" y2="6" stroke="#fff" stroke-width="0.5" filter="url(#f1)"></line> <circle r="1.8" fill="#ffffff"></circle> </g> </g> <circle cx="1100" cy="110" r="120" fill="url(#moonHalo)"></circle> <circle cx="1100" cy="110" r="60" fill="url(#moonGlow)"></circle> <circle cx="1100" cy="110" r="28" fill="#f0f0e0"></circle> <circle cx="1090" cy="100" r="5" fill="#ddddc8" opacity="0.5"></circle> <circle cx="1108" cy="115" r="3.5" fill="#d8d8c0" opacity="0.4"></circle> <circle cx="1095" cy="118" r="2.5" fill="#dbdbc5" opacity="0.35"></circle> <circle cx="1112" cy="98" r="2" fill="#d6d6c2" opacity="0.3"></circle> <circle cx="1103" cy="107" r="1.5" fill="#d4d4c0" opacity="0.25"></circle> <ellipse cx="1100" cy="110" r="180" ry="200" fill="#bbbbff" opacity="0.015" filter="url(#f30)"></ellipse> <g opacity="0.06"> <ellipse cx="300" cy="280" rx="180" ry="15" fill="#445577" filter="url(#f12)"> </ellipse> <ellipse cx="800" cy="320" rx="220" ry="12" fill="#445577" filter="url(#f12)"> </ellipse> <ellipse cx="1200" cy="260" rx="150" ry="10" fill="#445577" filter="url(#f12)"> </ellipse> </g> <ellipse cx="950" cy="470" rx="350" ry="120" fill="url(#cityGlow1)"></ellipse> <ellipse cx="400" cy="470" rx="250" ry="90" fill="url(#cityGlow2)"></ellipse> <path d="M0 460 L50 430 L120 445 L200 410 L290 435 L380 400 L460 420 L550 390 L640 415 L730 385 L820 405 L900 375 L980 395 L1060 370 L1140 390 L1220 380 L1300 400 L1400 385 L1400 470 L0 470 Z" fill="#0b0b22" opacity="0.85"></path> <path d="M0 472 L70 448 L160 460 L260 435 L360 455 L440 430 L530 450 L630 428 L720 445 L810 425 L900 442 L980 420 L1070 438 L1160 422 L1250 440 L1340 425 L1400 440 L1400 475 L0 475 Z" fill="#0f0f2a"></path> <path d="M0 478 L110 462 L220 475 L340 458 L460 472 L580 455 L700 468 L820 452 L940 465 L1060 450 L1180 463 L1300 455 L1400 460 L1400 485 L0 485 Z" fill="#131335"></path> <g fill="#0c0c24"> <path d="M0 478 L5 460 L12 470 L18 455 L25 465 L32 450 L38 462 L45 448 L52 458 L60 445 L68 455 L75 442 L82 454 L90 465 L98 455 L105 468 L115 458 L125 470 L135 462 L145 475 L145 480 L0 480 Z"></path> <path d="M200 478 L205 458 L212 468 L220 452 L228 462 L235 448 L242 460 L250 445 L258 455 L265 440 L272 452 L280 465 L290 455 L300 468 L310 475 L310 480 L200 480 Z"></path> <path d="M480 478 L485 462 L492 470 L500 455 L508 465 L515 450 L522 460 L530 445 L538 458 L545 442 L555 455 L565 465 L575 458 L585 470 L590 478 L590 480 L480 480 Z"></path> <path d="M1050 478 L1055 458 L1062 468 L1070 450 L1078 462 L1085 445 L1092 458 L1100 440 L1108 452 L1115 438 L1122 450 L1130 462 L1140 455 L1150 468 L1160 458 L1170 470 L1180 462 L1190 472 L1200 465 L1210 475 L1210 480 L1050 480 Z"></path> <path d="M1280 478 L1285 465 L1292 455 L1300 445 L1308 458 L1315 448 L1322 460 L1330 470 L1340 462 L1350 472 L1360 465 L1370 475 L1380 468 L1400 470 L1400 480 L1280 480 Z"></path> </g> <g fill="#080818"> <polygon points="20,480 35,420 38,440 42,410 46,435 50,395 54,425 58,445 65,480"></polygon> <polygon points="0,480 8,440 12,425 16,405 20,420 24,435 30,480"></polygon> <polygon points="55,480 65,435 68,450 72,420 76,440 80,410 84,435 88,448 95,480"></polygon> <polygon points="1300,480 1315,430 1318,445 1322,415 1326,438 1330,400 1334,428 1338,445 1350,480"></polygon> <polygon points="1340,480 1350,440 1355,425 1360,410 1365,428 1370,440 1380,480"></polygon> <polygon points="1370,480 1378,445 1382,430 1386,415 1390,432 1395,445 1400,480"></polygon> </g> <rect x="0" y="480" width="1400" height="320" fill="#0c0c15"></rect> <path d="M400 480 L-50 800 L1450 800 L1000 480 Z" fill="url(#road)"></path> <path d="M400 480 L-50 800 L1450 800 L1000 480 Z" fill="url(#roadWet)" opacity="0.3"></path> <g fill="#0d0d18" opacity="0.7"> <path d="M0 480 L400 480 L-50 800 L0 800 Z"></path> <path d="M1000 480 L1400 480 L1400 800 L1450 800 Z"></path> </g> <path d="M400 480 L-50 800" stroke="#3a3a3a" stroke-width="3"></path> <path d="M1000 480 L1450 800" stroke="#3a3a3a" stroke-width="3"></path> <path d="M405 480 L-40 800" stroke="#666655" stroke-width="1.5" stroke-dasharray="20,30" opacity="0.4"></path> <path d="M995 480 L1440 800" stroke="#666655" stroke-width="1.5" stroke-dasharray="20,30" opacity="0.4"></path> <g clip-path="url(#roadClip)"> <g> <line x1="700" y1="470" x2="650" y2="800" stroke="#cccc44" stroke-width="2" stroke-dasharray="15,12" opacity="0.7"> </line> <line x1="700" y1="470" x2="650" y2="800" stroke="#cccc44" stroke-width="4" stroke-dasharray="15,12" opacity="0.1" filter="url(#f2)"> </line> </g> </g> <g> <circle cx="735" cy="478" r="2" fill="#ffffff" opacity="0.9"></circle> <circle cx="745" cy="478" r="2" fill="#ffffff" opacity="0.9"></circle> <circle cx="740" cy="478" r="15" fill="url(#oncomingHL)" opacity="0.3" filter="url(#f4)"></circle> <circle cx="740" cy="478" r="30" fill="#aabbff" opacity="0.04" filter="url(#f8)"></circle> <ellipse cx="740" cy="490" rx="20" ry="8" fill="#aabbff" opacity="0.04" filter="url(#f4)"></ellipse> </g> <g clip-path="url(#roadClip)"> <ellipse cx="830" cy="620" rx="280" ry="110" fill="#ffffaa" opacity="0.06" filter="url(#f20)"></ellipse> <ellipse cx="850" cy="570" rx="180" ry="60" fill="#ffffcc" opacity="0.04" filter="url(#f12)"></ellipse> </g> <ellipse cx="700" cy="495" rx="550" ry="25" fill="#667788" opacity="0.05" filter="url(#f20)"></ellipse> <ellipse cx="500" cy="530" rx="350" ry="18" fill="#556677" opacity="0.03" filter="url(#f20)"></ellipse> <ellipse cx="900" cy="510" rx="300" ry="20" fill="#556688" opacity="0.04" filter="url(#f20)"></ellipse> <g clip-path="url(#roadClip)"> <polygon points="880,590 850,570 620,480 900,480" fill="url(#beamL)" opacity="0.2"></polygon> <polygon points="880,590 850,570 620,482 900,482" fill="#ffffcc" opacity="0.03" filter="url(#f8)"></polygon> <polygon points="900,590 870,565 650,478 950,478" fill="url(#beamR)" opacity="0.15"></polygon> </g> <g clip-path="url(#roadClip)"> <circle cx="820" cy="530" r="1.5" fill="url(#dustGlow)" opacity="0.6"> </circle> <circle cx="780" cy="510" r="1" fill="url(#dustGlow)" opacity="0.4"> </circle> <circle cx="850" cy="550" r="1.2" fill="url(#dustGlow)" opacity="0.5"> </circle> <circle cx="760" cy="505" r="0.8" fill="url(#dustGlow)" opacity="0.3"> </circle> <circle cx="870" cy="560" r="1.3" fill="url(#dustGlow)" opacity="0.45"> </circle> <circle cx="800" cy="520" r="0.9" fill="url(#dustGlow)" opacity="0.35"> </circle> </g> <g> <rect x="1010" y="460" width="3" height="28" fill="#444444" rx="1"></rect> <rect x="998" y="450" width="28" height="18" rx="2" fill="url(#signReflect)" stroke="#667788" stroke-width="0.5"></rect> <text x="1012" y="463" font-family="Arial" font-size="8" fill="#ccddee" text-anchor="middle" font-weight="bold">E12</text> <rect x="998" y="450" width="28" height="18" rx="2" fill="#ffffcc" opacity="0.04" filter="url(#f2)"></rect> </g> <g> <rect x="330" y="470" width="2.5" height="13" fill="#555" rx="0.5"></rect> <circle cx="331.25" cy="470" r="2.2" fill="#ff4400" opacity="0.8"></circle> <circle cx="331.25" cy="470" r="5" fill="#ff4400" opacity="0.15" filter="url(#f4)"></circle> <rect x="230" y="498" width="3" height="16" fill="#555" rx="0.5"></rect> <circle cx="231.5" cy="498" r="2.8" fill="#ff4400" opacity="0.8"></circle> <circle cx="231.5" cy="498" r="6" fill="#ff4400" opacity="0.15" filter="url(#f4)"></circle> <rect x="110" y="535" width="3.5" height="20" fill="#555" rx="0.5"></rect> <circle cx="111.75" cy="535" r="3.2" fill="#ff4400" opacity="0.8"></circle> <circle cx="111.75" cy="535" r="7" fill="#ff4400" opacity="0.12" filter="url(#f4)"></circle> <rect x="1065" y="470" width="2.5" height="13" fill="#555" rx="0.5"></rect> <circle cx="1066.25" cy="470" r="2.2" fill="#ff8800" opacity="0.8"></circle> <circle cx="1066.25" cy="470" r="5" fill="#ff8800" opacity="0.15" filter="url(#f4)"></circle> <rect x="1170" y="498" width="3" height="16" fill="#555" rx="0.5"></rect> <circle cx="1171.5" cy="498" r="2.8" fill="#ff8800" opacity="0.8"></circle> <circle cx="1171.5" cy="498" r="6" fill="#ff8800" opacity="0.15" filter="url(#f4)"></circle> <rect x="1290" y="535" width="3.5" height="20" fill="#555" rx="0.5"></rect> <circle cx="1291.75" cy="535" r="3.2" fill="#ff8800" opacity="0.8"></circle> <circle cx="1291.75" cy="535" r="7" fill="#ff8800" opacity="0.12" filter="url(#f4)"></circle> </g> <g transform="translate(770, 555)"> <ellipse cx="55" cy="72" rx="85" ry="10" fill="#000" opacity="0.7" filter="url(#f8)"></ellipse> <path d="M-5 42 L0 28 L10 18 L25 10 L40 5 L75 5 L90 10 L100 18 L110 28 L115 42 L118 48 L118 62 L-8 62 L-8 48 Z" fill="#12122a"></path> <path d="M5 35 L15 22 L30 14 L48 8 L72 8 L88 14 L100 24 L108 38 L100 40 L12 40 Z" fill="#1a1a3a" opacity="0.5"></path> <path d="M8 44 L108 44 L110 48 L6 48 Z" fill="#222244" opacity="0.3"></path> <path d="M25 10 L32 -10 L42 -18 L70 -18 L80 -10 L88 10 Z" fill="#0e0e24"></path> <path d="M28 8 L34 -8 L44 -15 L55 -15 L50 8 Z" fill="#152040" opacity="0.75"></path> <path d="M55 8 L60 -15 L72 -15 L80 -8 L84 8 Z" fill="#152040" opacity="0.75"></path> <path d="M30 5 L36 -6 L40 -6 L35 5 Z" fill="#3366aa" opacity="0.15"></path> <path d="M72 -12 L76 -6 L82 5 L78 5 L70 -8 Z" fill="#5588cc" opacity="0.12"></path> <rect x="22" y="12" width="6" height="4" rx="1" fill="#0e0e24"></rect> <rect x="84" y="12" width="6" height="4" rx="1" fill="#0e0e24"></rect> <path d="M100 32 L120 38 L122 42 L122 56 L115 58 L100 55 Z" fill="#101028"></path> <line x1="115" y1="42" x2="115" y2="54" stroke="#1a1a35" stroke-width="0.5"></line> <line x1="118" y1="41" x2="118" y2="55" stroke="#1a1a35" stroke-width="0.5"></line> <path d="M12 32 L-8 38 L-10 42 L-10 56 L-3 58 L12 55 Z" fill="#101028"></path> <ellipse cx="118" cy="42" rx="5" ry="5" fill="#ffffdd" opacity="0.95"></ellipse> <ellipse cx="118" cy="42" rx="4" ry="4" fill="#ffffff"></ellipse> <ellipse cx="118" cy="42" rx="10" ry="8" fill="#ffffaa" opacity="0.4" filter="url(#f4)"></ellipse> <ellipse cx="118" cy="50" rx="3" ry="3" fill="#ffffcc" opacity="0.7"></ellipse> <line x1="112" y1="36" x2="120" y2="36" stroke="#aaddff" stroke-width="1" opacity="0.6"></line> <ellipse cx="-5" cy="42" rx="4" ry="4.5" fill="#ff1100" opacity="0.95"></ellipse> <ellipse cx="-5" cy="42" rx="14" ry="12" fill="url(#tailG)" opacity="0.6"></ellipse> <ellipse cx="-5" cy="50" rx="3" ry="2.5" fill="#ff3300" opacity="0.6"></ellipse> <rect x="42" y="-18" width="25" height="2" rx="1" fill="#ff2200" opacity="0.5"></rect> <rect x="42" y="-18" width="25" height="2" rx="1" fill="#ff2200" opacity="0.15" filter="url(#f2)"></rect> <g> <ellipse cx="32" cy="62" rx="14" ry="7" fill="#050505"></ellipse> <ellipse cx="32" cy="62" rx="12" ry="6" fill="#1a1a1a"></ellipse> <ellipse cx="32" cy="62" rx="5" ry="2.5" fill="#2a2a2a"></ellipse> <ellipse cx="32" cy="62" rx="2" ry="1" fill="#444"></ellipse> <line x1="28" y1="60" x2="36" y2="64" stroke="#333" stroke-width="0.5"></line> <line x1="28" y1="64" x2="36" y2="60" stroke="#333" stroke-width="0.5"></line> </g> <g> <ellipse cx="92" cy="62" rx="14" ry="7" fill="#050505"></ellipse> <ellipse cx="92" cy="62" rx="12" ry="6" fill="#1a1a1a"></ellipse> <ellipse cx="92" cy="62" rx="5" ry="2.5" fill="#2a2a2a"></ellipse> <ellipse cx="92" cy="62" rx="2" ry="1" fill="#444"></ellipse> <line x1="88" y1="60" x2="96" y2="64" stroke="#333" stroke-width="0.5"></line> <line x1="88" y1="64" x2="96" y2="60" stroke="#333" stroke-width="0.5"></line> </g> <ellipse cx="60" cy="-14" rx="12" ry="3" fill="#ffffee" opacity="0.05"></ellipse> <ellipse cx="95" cy="12" rx="8" ry="4" fill="#aaaacc" opacity="0.04"></ellipse> <line x1="38" y1="-18" x2="32" y2="-35" stroke="#444466" stroke-width="0.8"></line> <circle cx="32" cy="-35" r="0.8" fill="#666688"></circle> </g> <ellipse cx="768" cy="630" rx="35" ry="18" fill="#ff2200" opacity="0.06" filter="url(#f8)"></ellipse> <ellipse cx="768" cy="625" rx="20" ry="10" fill="#ff1100" opacity="0.04" filter="url(#f4)"></ellipse> <g opacity="0.5"> <line x1="345" y1="478" x2="0" y2="620" stroke="#333340" stroke-width="2"></line> <line x1="345" y1="482" x2="0" y2="624" stroke="#222230" stroke-width="1.5"></line> <rect x="300" y="475" width="2" height="12" fill="#333340"></rect> <rect x="200" y="500" width="2.5" height="14" fill="#333340"></rect> <rect x="90" y="530" width="3" height="16" fill="#333340"></rect> </g> <g> <line x1="250" y1="60" x2="290" y2="78" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"> </line> <line x1="260" y1="64" x2="290" y2="78" stroke="#aaccff" stroke-width="3" stroke-linecap="round" filter="url(#f2)"> </line> </g> <g> <line x1="1050" y1="180" x2="1080" y2="195" stroke="#ffffff" stroke-width="1.2" stroke-linecap="round"> </line> <line x1="1060" y1="184" x2="1080" y2="195" stroke="#aaddff" stroke-width="2.5" stroke-linecap="round" filter="url(#f2)"> </line> </g> <rect width="1400" height="800" fill="url(#vignette)"></rect> <rect width="1400" height="800" filter="url(#noise)" opacity="0.015"></rect> </svg>
Upload
Copy
Download
Share
E12
Preview
React
React Native
PNG
Data URI
E12
100%
Download