133 lines
6.2 KiB
HTML
133 lines
6.2 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Pelikan fährt Rad – SVG</title>
|
||
<style>
|
||
html, body { height: 100%; margin: 0; background:#0e1320; color:#e7ecf3; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
|
||
.wrap { display:grid; place-items:center; height:100%; }
|
||
.cap { position: fixed; bottom: 0.75rem; left: 0; right: 0; text-align:center; font-size: 0.9rem; opacity: .8; }
|
||
svg { width: min(92vw, 960px); height: auto; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<!-- Rein vektoriell gezeichneter Pelikan auf einem Fahrrad. -->
|
||
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="t d">
|
||
<title id="t">Pelikan fährt Fahrrad</title>
|
||
<desc id="d">Ein stilisierter Pelikan mit großem Schnabel fährt ein Fahrrad mit zwei Rädern; einfache Formen, klare Farben.</desc>
|
||
|
||
<!-- Hintergrund-Deko -->
|
||
<defs>
|
||
<radialGradient id="sky" cx="50%" cy="40%" r="70%">
|
||
<stop offset="0%" stop-color="#1b2a4a" />
|
||
<stop offset="100%" stop-color="#0e1320" />
|
||
</radialGradient>
|
||
<linearGradient id="beakGrad" x1="0" x2="1" y1="0" y2="0">
|
||
<stop offset="0%" stop-color="#ffb347"/>
|
||
<stop offset="100%" stop-color="#ff7f11"/>
|
||
</linearGradient>
|
||
<linearGradient id="frameGrad" x1="0" x2="1" y1="0" y2="0">
|
||
<stop offset="0%" stop-color="#4bd5ff"/>
|
||
<stop offset="100%" stop-color="#6a5cff"/>
|
||
</linearGradient>
|
||
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#000" flood-opacity="0.35"/>
|
||
</filter>
|
||
</defs>
|
||
<rect width="100%" height="100%" fill="url(#sky)"/>
|
||
|
||
<!-- Bodenlinie -->
|
||
<g opacity="0.35">
|
||
<ellipse cx="400" cy="520" rx="300" ry="40" fill="#000" />
|
||
</g>
|
||
|
||
<!-- Fahrrad -->
|
||
<g id="bike" transform="translate(0,0)" filter="url(#shadow)">
|
||
<!-- Räder -->
|
||
<g id="wheels" stroke="#cfe7ff" stroke-width="6" fill="none">
|
||
<circle cx="260" cy="460" r="90" />
|
||
<circle cx="540" cy="460" r="90" />
|
||
<!-- Speichen -->
|
||
<g stroke="#9fd0ff" stroke-width="3" opacity="0.6">
|
||
<line x1="260" y1="370" x2="260" y2="550" />
|
||
<line x1="170" y1="460" x2="350" y2="460" />
|
||
<line x1="200" y1="400" x2="320" y2="520" />
|
||
<line x1="200" y1="520" x2="320" y2="400" />
|
||
<line x1="540" y1="370" x2="540" y2="550" />
|
||
<line x1="450" y1="460" x2="630" y2="460" />
|
||
<line x1="480" y1="400" x2="600" y2="520" />
|
||
<line x1="480" y1="520" x2="600" y2="400" />
|
||
</g>
|
||
</g>
|
||
|
||
<!-- Rahmen -->
|
||
<g id="frame" stroke="url(#frameGrad)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" fill="none">
|
||
<polyline points="260,460 360,420 450,460 540,460" />
|
||
<line x1="360" y1="420" x2="410" y2="360" />
|
||
<line x1="410" y1="360" x2="520" y2="360" />
|
||
<line x1="520" y1="360" x2="540" y2="460" />
|
||
</g>
|
||
|
||
<!-- Kurbel und Pedale -->
|
||
<g id="crank" transform="translate(405,440)">
|
||
<circle r="16" fill="#b7d8ff" />
|
||
<g stroke="#b7d8ff" stroke-width="6" stroke-linecap="round">
|
||
<line x1="0" y1="0" x2="28" y2="-28" />
|
||
</g>
|
||
<circle cx="28" cy="-28" r="8" fill="#e5f3ff" />
|
||
</g>
|
||
|
||
<!-- Lenker und Sattel -->
|
||
<g stroke="#cfe7ff" stroke-width="10" stroke-linecap="round" fill="none">
|
||
<path d="M520 360 C 555 335, 585 345, 600 360"/>
|
||
</g>
|
||
<rect x="325" y="330" width="70" height="16" rx="8" fill="#cfe7ff" />
|
||
</g>
|
||
|
||
<!-- Pelikan -->
|
||
<g id="pelican" transform="translate(0,0)">
|
||
<!-- Körper -->
|
||
<ellipse cx="360" cy="360" rx="90" ry="70" fill="#f2f6fb" stroke="#e1e8f5" stroke-width="4" />
|
||
<!-- Flügel -->
|
||
<path d="M330 345 C 275 350, 250 395, 270 430 C 295 470, 355 470, 390 440 C 410 420, 400 380, 370 360 Z" fill="#eaf2fb" stroke="#d7e4f6" stroke-width="3" />
|
||
<!-- Hals -->
|
||
<path d="M400 335 C 445 320, 470 300, 500 295 C 520 292, 540 305, 540 325 C 540 345, 520 360, 500 360 C 470 360, 445 350, 415 355" fill="none" stroke="#f2f6fb" stroke-width="20" stroke-linecap="round" />
|
||
<!-- Kopf -->
|
||
<circle cx="520" cy="325" r="28" fill="#f7fbff" stroke="#e1e8f5" stroke-width="3" />
|
||
<!-- Auge -->
|
||
<circle cx="528" cy="322" r="5" fill="#21314f" />
|
||
<circle cx="526" cy="320" r="2" fill="#ffffff" />
|
||
<!-- Schnabel -->
|
||
<path d="M535 330 C 585 330, 630 338, 675 352 C 640 360, 600 368, 555 368 C 545 360, 538 348, 535 330 Z" fill="url(#beakGrad)" stroke="#ff9a2a" stroke-width="3" />
|
||
<!-- Kehlsack angedeutet -->
|
||
<path d="M540 338 C 585 345, 590 352, 552 365" fill="none" stroke="#ffb347" stroke-width="4" opacity="0.7" />
|
||
<!-- Beine -->
|
||
<g stroke="#ffb347" stroke-width="10" stroke-linecap="round">
|
||
<path d="M340 420 L 320 455" />
|
||
<path d="M380 420 L 390 450" />
|
||
</g>
|
||
<!-- Füße auf Pedalen -->
|
||
<g fill="#ffb347">
|
||
<circle cx="320" cy="455" r="8" />
|
||
<circle cx="390" cy="450" r="8" />
|
||
</g>
|
||
<!-- Schwanz -->
|
||
<path d="M280 365 C 255 360, 240 350, 230 340 C 248 368, 260 390, 290 392" fill="#eaf2fb" stroke="#d7e4f6" stroke-width="3" />
|
||
</g>
|
||
|
||
<!-- Sterne / Deko -->
|
||
<g fill="#9fd0ff" opacity="0.8">
|
||
<circle cx="90" cy="80" r="2"/>
|
||
<circle cx="160" cy="120" r="1.5"/>
|
||
<circle cx="720" cy="90" r="2.2"/>
|
||
<circle cx="650" cy="160" r="1.8"/>
|
||
<circle cx="120" cy="200" r="1.6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">SVG Illustration: Pelikan auf Fahrrad. Datei lokal öffnen oder auf einen Webserver legen.</div>
|
||
</body>
|
||
</html>
|