Ink blot toggle
On ruled letter paper, a drop of ink spills and soaks the track with ragged edges and a few splatters.
Settings
Code
<label class="uvq03-ink"><input type="checkbox" role="switch"><span class="pp"><svg width="0" height="0" aria-hidden="true"><filter id="uvq03-ink-f"><feTurbulence type="fractalNoise" baseFrequency="0.07" numOctaves="2" seed="4"/><feDisplacementMap in="SourceGraphic" scale="10"/></filter></svg><span class="bl"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i></span><span class="kn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3c3 4 6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 3-7 6-11z"/></svg></span></span>Sign in ink</label>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 Toggles
See all TogglesWhere to use it
This switch sits on a strip of ruled paper with a red margin line. When it turns on, the drop knob slides across and a pool of ink spreads behind it with rough, bleeding edges and a few small splatters. The edges come from an SVG turbulence filter applied to plain circles. It fits signature steps, journaling apps, stationery shops and writing tools.
The main color is the ink and the second one is the paper. Iron gall black, sepia or a bright fountain pen turquoise all work, and the filter seed in the SVG changes the shape of the blot.