Rutas sobre el mapa
Tres rutas posibles en un pequeño mapa: la elegida se traza en color de punta a punta y las demás quedan punteadas.
Ajustes
Código
<fieldset class="uvq04-map"><legend>Elige una ruta</legend><div class="mp" aria-hidden="true"><svg viewBox="0 0 200 100" preserveAspectRatio="xMidYMid slice"><rect class="ld" width="200" height="100"/><path class="pk" d="M128 60c14-8 34-6 40 6s-8 26-26 24-26-22-14-30z"/><path class="pk" d="M30 18c10-8 28-4 30 6s-12 18-24 14-14-14-6-20z"/><path class="st" d="M0 52H200M0 30H200M62 0V100M112 0V100M150 0V100M0 80H200"/><path class="rv" d="M-5 72C35 52 50 64 72 49S102 24 128 32S166 24 205 8"/><path class="r r1" pathLength="100" d="M22 80C60 98 96 92 122 70S166 42 178 22"/><path class="r r2" pathLength="100" d="M22 80H62V52H112V30H170L178 22"/><path class="r r3" pathLength="100" d="M22 80C40 60 56 70 76 55S106 30 130 37S164 30 178 22"/><circle class="pa" cx="22" cy="80" r="5"/><circle class="pb" cx="178" cy="22" r="6"/><circle class="pc" cx="178" cy="22" r="2.4"/></svg></div><div class="op"><label><input type="radio" name="uvq04-map" checked><span class="cd"><b>18 min</b><span>Por la autovía</span><small>6,2 km</small></span></label><label><input type="radio" name="uvq04-map"><span class="cd"><b>24 min</b><span>Por el centro</span><small>4,8 km</small></span></label><label><input type="radio" name="uvq04-map"><span class="cd"><b>27 min</b><span>Junto al río</span><small>5,5 km</small></span></label></div></fieldset>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 Radio buttons
Ver todos: Radio buttonsDónde usarlo
Tres tarjetas de ruta van unidas a un mapa SVG de calles, parques y un río. Al elegir una tarjeta, su recorrido se dibuja en el color de acento desde la salida hasta la llegada, mientras las otras rutas quedan como líneas finas punteadas. Tierra, parques y agua usan los colores de la página, así que funciona en claro y oscuro para apps de reparto o viajes.
El color principal marca la ruta activa y el destino, y el secundario los parques y el punto de salida. Cambia los tres trazados del SVG para tu propio mapa y deja en cada tarjeta un tiempo, un nombre corto y una distancia.