Herbario por forma de hoja
Pliegos de herbario con hojas prensadas: marca una forma y la hoja recupera el verde y su nombre queda rodeado a lápiz.
Ajustes
Código
<fieldset class="uvq05-hb"><legend>Forma de la hoja</legend><div class="gr"><label style="--r:-2deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="s" d="M20 49V10"/><path class="v" style="stroke-width:1.6" d="M20 14l-8-7M20 14l8-7M20 21l-10-6M20 21l10-6M20 28l-10-6M20 28l10-6M20 35l-9-6M20 35l9-6M20 42l-7-5M20 42l7-5"/></svg><span class="nm">Acicular<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:1.5deg"><input type="checkbox" checked><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 3C29 13 29 30 20 42C11 30 11 13 20 3Z"/><path class="v" d="M20 6V42M20 16l-4-3M20 16l4-3M20 24l-5-4M20 24l5-4M20 32l-4-3M20 32l4-3"/><path class="s" d="M20 42v7"/></svg><span class="nm">Lanceolada<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:-1deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 4C31 12 37 22 33 31c-3 6-10 6-13 1-3 5-10 5-13-1C3 22 9 12 20 4Z"/><path class="v" d="M20 7V32M20 16l-6-4M20 16l6-4M20 24l-8-4M20 24l8-4"/><path class="s" d="M20 32v17"/></svg><span class="nm">Acorazonada<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:2deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 3c4 2 2 6 6 7s5 4 3 7 5 3 4 7-4 3-2 6-3 5-7 4-3 5-4 6c-1-1 0-5-4-6s-5-2-7-4 2-4-2-6-1-6 4-7-2-5 3-7 4-4 6-7Z"/><path class="v" d="M20 5V40M20 13l4-3M20 13l-4-3M20 21l6-3M20 21l-6-3M20 29l6-2M20 29l-6-2"/><path class="s" d="M20 40v9"/></svg><span class="nm">Lobulada<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:-1.5deg"><input type="checkbox" checked><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="b" d="M20 36l-11 4 2-6-9-5 7-3-4-9 8 3 1-9 6 6 0-11 0 0 4 11 3-7 4 8 6-4-2 9 7 3-8 5 2 6-11-4z"/><path class="v" d="M20 36V8M20 36L8 22M20 36l12-14M20 36L5 31M20 36l15-5"/><path class="s" d="M20 36v13"/></svg><span class="nm">Palmeada<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label><label style="--r:1deg"><input type="checkbox"><span class="sh"><i class="tp" aria-hidden="true"></i><svg class="lf" viewBox="0 0 40 50" aria-hidden="true"><path class="s" d="M20 49V5"/><ellipse class="b" cx="13" cy="10" rx="5" ry="2.6" transform="rotate(-25 13 10)"/><ellipse class="b" cx="27" cy="10" rx="5" ry="2.6" transform="rotate(25 27 10)"/><ellipse class="b" cx="13" cy="18" rx="5" ry="2.6" transform="rotate(-25 13 18)"/><ellipse class="b" cx="27" cy="18" rx="5" ry="2.6" transform="rotate(25 27 18)"/><ellipse class="b" cx="13" cy="26" rx="5" ry="2.6" transform="rotate(-25 13 26)"/><ellipse class="b" cx="27" cy="26" rx="5" ry="2.6" transform="rotate(25 27 26)"/><ellipse class="b" cx="13" cy="34" rx="5" ry="2.6" transform="rotate(-25 13 34)"/><ellipse class="b" cx="27" cy="34" rx="5" ry="2.6" transform="rotate(25 27 34)"/><ellipse class="b" cx="20" cy="4" rx="2.6" ry="4.5"/></svg><span class="nm">Compuesta<svg class="pc" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path d="M8 17C9 6 52 3 88 8c12 3 10 14-4 17-30 5-70 4-78-4C2 17 8 10 22 7" pathLength="1"/></svg></span></span></label></div><p class="ct"><span>Hojas elegidas:</span> <span class="n"></span></p></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 Filtros
Ver todos: FiltrosDónde usarlo
Los viveros, centros de jardinería y guías de naturaleza pueden filtrar por forma de hoja, y un herbario la enseña mejor que una palabra. Seis pliegos de papel con cinta guardan hojas prensadas dibujadas en SVG, de la acicular a la compuesta. Al marcar una, el pliego se endereza, la hoja seca recupera el verde y un trazo de lápiz rodea su nombre con una animación.
El primer color es el verde fresco y el segundo el papel. Cambia las hojas por flores, semillas o setas editando los trazados SVG y deja nombres cortos para que el círculo de lápiz los rodee bien.