Ink drop brush picker
On rice paper, a drop of sumi ink falls and spreads on the chosen option and changes the brush stroke width.
Settings
Code
<fieldset class="uvq04-ink"><legend>Stroke width</legend><svg class="fx" width="0" height="0" aria-hidden="true"><filter id="uvq04-ink-f"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="2" seed="4"/><feDisplacementMap in="SourceGraphic" scale="5"/></filter></svg><svg class="pv" viewBox="0 0 200 46" aria-hidden="true"><path pathLength="1" d="M14 32C42 6 64 42 94 22S152 6 186 28"/></svg><span class="hk" aria-hidden="true">墨</span><div class="op"><label><input type="radio" name="uvq04-ink"><span class="dt" aria-hidden="true"></span><span class="tx">Fine brush</span></label><label><input type="radio" name="uvq04-ink" checked><span class="dt" aria-hidden="true"></span><span class="tx">Medium brush</span></label><label><input type="radio" name="uvq04-ink"><span class="dt" aria-hidden="true"></span><span class="tx">Wide brush</span></label></div></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 Radio buttons
See all Radio buttonsWhere to use it
Three brush widths sit on warm rice paper with a small red seal in the corner. Choosing one drops a bead of ink that falls into the circle and blooms into a rough blot, using an SVG turbulence filter for the ragged edge. The sample stroke above redraws itself at the new width, which suits drawing apps, stationery and calm editorial sites.
The main color is the ink and the secondary color the seal, so indigo or sepia ink also look natural. The filter lives inside the block with a prefixed id; keep one per page, and rename the three options to pens, nibs or line weights.