HTML + CSSFilters

Herbarium leaf shape filter

Herbarium sheets with pressed leaves: tick a shape and the leaf turns green again while its name gets circled in pencil.

Settings

Main color#3f8f46

Secondary color#f6f0de

Size16px

Speed1x

Text

Code

index.html

<fieldset class="uvq05-hb"><legend>Leaf shape</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">Needle<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">Lanceolate<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">Heart-shaped<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">Lobed<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">Palmate<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">Compound<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>Leaves chosen:</span> <span class="n"></span></p></fieldset>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Filters

See all Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

Plant shops, garden centres and nature guides can filter by leaf shape, and a herbarium shows each shape better than a word. Six taped paper sheets hold pressed leaves drawn in SVG, from needle to compound. Ticking one straightens the sheet, brings the dried leaf back to fresh green and draws a pencil loop around its label with a stroke animation.

The first colour is the fresh green and the second the paper. Swap the leaves for flowers, seeds or mushrooms by editing the SVG paths, and keep the labels short so the pencil loop wraps them neatly.