Carta náutica con boyas
Una carta náutica con sondas y boyas que destellan con su ritmo real; cada una explica su luz y por dónde pasar.
Ajustes
Código
<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>Sondas en metros</span></span><button type="button" class="by red up hc" style="left:38%;top:64%;--t:6s" aria-label="Boya de babor" 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>Boya de babor</b><span>Déjala a tu izquierda al entrar</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="Boya de estribor" 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>Boya de estribor</b><span>Déjala a tu derecha al entrar</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="Cardinal norte" 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>Cardinal norte</b><span>Pasa por su lado norte</span><code>Q</code></span></button><button type="button" class="by lh dn hr pk" style="left:84%;top:24%;--t:10s" aria-label="Faro de 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>Faro de Punta Lúa</b><span>Visible a 18 millas</span><code>Fl(3) W 10s</code></span></button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Tooltips
Ver todos: TooltipsDónde usarlo
Una carta de navegación dibujada en SVG con sondas de profundidad, isóbatas discontinuas, un rumbo recomendado y una costa arenosa con su faro. Las boyas de babor y estribor, la cardinal norte y el faro destellan cada uno con su ritmo mediante keyframes de CSS. Pasa o enfoca una y una etiqueta al estilo de la carta la nombra, explica por dónde pasar y muestra el código de su luz.
El color principal define el anillo de foco y el secundario el agua. Cambia los códigos de luz y sus tiempos por los de un puerto real o reutiliza la etiqueta para puntos de buceo, fondeaderos o servicios de playa en un mapa de costa.