Seekarte mit Tonnen
Eine Seekarte mit Tiefenangaben und Tonnen, die in ihrem echten Rhythmus blinken; jede erklärt ihr Feuer und auf welcher Seite man passiert.
Einstellungen
Code
<div class="uvq08-sea" role="group" aria-label="Ría de Lúa"><div class="cht"><svg viewBox="0 0 100 70" aria-hidden="true"><path class="c10" d="M50 0C46 14 56 26 54 36S50 50 62 58S68 66 70 70"/><path class="c5" d="M62 0C58 12 66 22 66 30S60 44 72 50S78 62 80 70"/><path class="ld" d="M72 0H100V70H86C82 60 88 52 80 46S70 36 74 28S68 12 72 0Z"/><path class="tk" d="M8 68L38 59L54 46L66 38"/><text x="12" y="12">24</text><text x="30" y="48">18</text><text x="46" y="30">12</text><text x="60" y="62">7</text><text x="14" y="58">21</text><text x="40" y="8">15</text><text x="60" y="16">6</text><text x="7" y="40">27</text><text x="28" y="22">19</text><text x="48" y="70">9</text></svg><span class="ca" aria-hidden="true"><b>Ría de Lúa</b><span>Tiefen in Metern</span></span><button type="button" class="by red up hc" style="left:38%;top:64%;--t:6s" aria-label="Backbordtonne" aria-describedby="uvq08-sea-0"><i class="sh" aria-hidden="true"></i><i class="lt f2" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-0"><b>Backbordtonne</b><span>Beim Einlaufen links lassen</span><code>Fl(2) R 6s</code></span></button><button type="button" class="by grn up hc" style="left:54%;top:50%;--t:4s" aria-label="Steuerbordtonne" aria-describedby="uvq08-sea-1"><i class="sh" aria-hidden="true"></i><i class="lt f1" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-1"><b>Steuerbordtonne</b><span>Beim Einlaufen rechts lassen</span><code>Fl G 4s</code></span></button><button type="button" class="by car dn hc" style="left:22%;top:34%;--t:1s" aria-label="Nordkardinale" aria-describedby="uvq08-sea-2"><i class="sh" aria-hidden="true"></i><i class="lt q" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-2"><b>Nordkardinale</b><span>Nördlich davon passieren</span><code>Q</code></span></button><button type="button" class="by lh dn hr pk" style="left:84%;top:24%;--t:10s" aria-label="Leuchtturm Punta Lúa" aria-describedby="uvq08-sea-3"><i class="sh" aria-hidden="true"></i><i class="lt f3" aria-hidden="true"></i><span class="tt" role="tooltip" id="uvq08-sea-3"><b>Leuchtturm Punta Lúa</b><span>Sichtbar auf 18 Seemeilen</span><code>Fl(3) W 10s</code></span></button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Eine Seekarte aus SVG mit Tiefenzahlen, gestrichelten Tiefenlinien, einem empfohlenen Kurs und einer sandigen Küste mit Leuchtturm. Backbord- und Steuerbordtonne, Nordkardinale und Leuchtfeuer blinken jeweils in ihrem eigenen Rhythmus per CSS-Keyframes. Beim Hovern oder Fokussieren nennt ein Etikett im Kartenstil das Seezeichen, erklärt die Passage und zeigt die Kennung.
Die Hauptfarbe setzt den Fokusring, die Zweitfarbe das Wasser. Ändere Kennungen und Takte für einen echten Hafen oder nutze das Etikett für Tauchplätze, Liegeplätze oder Strandservices auf einer Küstenkarte.