HTML + CSSFilters
Moon phase filter
Eight moons on a night sky: tick the phases that suit your observing and they light up with a halo.
Settings
16px
1x
Code
<fieldset class="uvq05-mo"><legend>Moon phase</legend><div class="gr"><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">New moon</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 1 0 20A14.14 20 0 0 0 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Waxing crescent</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 1 0 20A0.00 20 0 0 1 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">First quarter</span></label><label><input type="checkbox" checked><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 1 0 20A14.14 20 0 0 1 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Waxing gibbous</span></label><label><input type="checkbox" checked><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><circle class="lt" r="20"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Full moon</span></label><label><input type="checkbox" checked><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 0 0 20A14.14 20 0 0 0 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Waning gibbous</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 0 0 20A0.00 20 0 0 0 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Last quarter</span></label><label><input type="checkbox"><span class="mn"><svg viewBox="-22 -22 44 44" aria-hidden="true"><circle class="dk" r="20"/><path class="lt" d="M0 -20A20 20 0 0 0 0 20A14.14 20 0 0 1 0 -20Z"/><g class="cr"><circle cx="-6" cy="-6" r="3.4"/><circle cx="7" cy="3" r="4.2"/><circle cx="-3" cy="10" r="2.4"/></g></svg></span><span class="nm">Waning crescent</span></label></div><p class="ct"><span>Phases 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.
More in Filters
See all FiltersWhere to use it
Stargazing, night photography and fishing apps often filter by lunar phase, and drawing each phase beats a list of names. Every moon is an inline SVG whose lit part is built from two arcs, so crescents and gibbous shapes are exact. Checkboxes switch each one on with a warm halo over a softly twinkling starfield.
The first colour is the moonlight and the second the night sky, so you can go from icy blue to sepia. Rename the phases for your audience, and pair the filter with a calendar that marks the nights that match.