67 lines
3.6 KiB
XML
67 lines
3.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" role="img" aria-label="Illustration: Campervan und Standort-Analyse">
|
|
<defs>
|
|
<linearGradient id="g1" x1="0" x2="1" y1="0" y2="1">
|
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.95"/>
|
|
<stop offset="1" stop-color="#5eead4" stop-opacity="0.55"/>
|
|
</linearGradient>
|
|
<radialGradient id="glow" cx="30%" cy="25%" r="70%">
|
|
<stop offset="0" stop-color="#7c5cff" stop-opacity="0.35"/>
|
|
<stop offset="1" stop-color="#0b1220" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#000" flood-opacity="0.45"/>
|
|
</filter>
|
|
</defs>
|
|
|
|
<rect width="1200" height="800" rx="28" fill="#0f1a2f"/>
|
|
<rect width="1200" height="800" rx="28" fill="url(#glow)"/>
|
|
|
|
<!-- Road -->
|
|
<path d="M0 640 C 240 600, 420 740, 680 700 C 900 666, 1000 610, 1200 640 L1200 800 L0 800 Z"
|
|
fill="#0b1220" opacity="0.85"/>
|
|
<path d="M0 665 C 260 635, 430 760, 700 730 C 920 707, 1020 650, 1200 675"
|
|
fill="none" stroke="#ffffff" stroke-opacity="0.12" stroke-width="6"/>
|
|
|
|
<!-- Location pin -->
|
|
<g transform="translate(840 210)" filter="url(#shadow)">
|
|
<path d="M120 20c-55 0-100 44-100 98 0 77 100 186 100 186s100-109 100-186c0-54-45-98-100-98z"
|
|
fill="url(#g1)" />
|
|
<circle cx="120" cy="118" r="44" fill="#071022" opacity="0.88"/>
|
|
<circle cx="120" cy="118" r="22" fill="#eaf0ff" opacity="0.95"/>
|
|
</g>
|
|
|
|
<!-- Camper -->
|
|
<g transform="translate(170 430)" filter="url(#shadow)">
|
|
<rect x="0" y="70" rx="26" ry="26" width="620" height="220" fill="#101f3a" stroke="#ffffff" stroke-opacity="0.12" stroke-width="3"/>
|
|
<path d="M40 70h300c40 0 70-30 90-55 30-38 70-55 120-55h30c25 0 45 20 45 45v65H40z"
|
|
fill="#12264a" stroke="#ffffff" stroke-opacity="0.12" stroke-width="3"/>
|
|
<rect x="80" y="110" width="170" height="90" rx="16" fill="#0b1220" stroke="#5eead4" stroke-opacity="0.35" stroke-width="3"/>
|
|
<rect x="270" y="110" width="160" height="90" rx="16" fill="#0b1220" stroke="#7c5cff" stroke-opacity="0.35" stroke-width="3"/>
|
|
<rect x="460" y="115" width="120" height="150" rx="18" fill="#0b1220" stroke="#ffffff" stroke-opacity="0.14" stroke-width="3"/>
|
|
<circle cx="150" cy="300" r="54" fill="#071022" stroke="#ffffff" stroke-opacity="0.14" stroke-width="10"/>
|
|
<circle cx="150" cy="300" r="22" fill="#eaf0ff" opacity="0.9"/>
|
|
<circle cx="490" cy="300" r="54" fill="#071022" stroke="#ffffff" stroke-opacity="0.14" stroke-width="10"/>
|
|
<circle cx="490" cy="300" r="22" fill="#eaf0ff" opacity="0.9"/>
|
|
|
|
<!-- Headlights -->
|
|
<rect x="600" y="210" width="18" height="30" rx="6" fill="#5eead4" opacity="0.6"/>
|
|
</g>
|
|
|
|
<!-- Small UI chips -->
|
|
<g transform="translate(120 120)">
|
|
<rect x="0" y="0" width="380" height="70" rx="18" fill="#0b1220" opacity="0.75" stroke="#ffffff" stroke-opacity="0.12"/>
|
|
<circle cx="40" cy="35" r="14" fill="#5eead4" opacity="0.85"/>
|
|
<rect x="70" y="24" width="260" height="10" rx="5" fill="#eaf0ff" opacity="0.75"/>
|
|
<rect x="70" y="42" width="210" height="10" rx="5" fill="#eaf0ff" opacity="0.45"/>
|
|
</g>
|
|
|
|
<g transform="translate(120 210)">
|
|
<rect x="0" y="0" width="420" height="80" rx="18" fill="#0b1220" opacity="0.70" stroke="#ffffff" stroke-opacity="0.12"/>
|
|
<rect x="26" y="22" width="160" height="14" rx="7" fill="#7c5cff" opacity="0.85"/>
|
|
<rect x="26" y="46" width="320" height="12" rx="6" fill="#eaf0ff" opacity="0.38"/>
|
|
</g>
|
|
|
|
<text x="64" y="708" font-family="Inter, system-ui, Arial" font-size="20" fill="#8ea0bf">
|
|
StaySense • Standort-Check im Browser
|
|
</text>
|
|
</svg>
|