Synth waveform selector
An analogue synth panel with wooden cheeks: each key lights its LED and draws its waveform on the scope.
Settings
Code
<fieldset class="uvq04-osc"><legend>Oscillator 1</legend><div class="pn"><div class="sc" aria-hidden="true"><svg viewBox="0 0 200 60" preserveAspectRatio="none"><g class="w sin"><path vector-effect="non-scaling-stroke" d="M0 30C8 4 17 4 25 30S42 56 50 30S67 4 75 30S92 56 100 30S117 4 125 30S142 56 150 30S167 4 175 30S192 56 200 30S217 4 225 30S242 56 250 30S267 4 275 30S292 56 300 30"/></g><g class="w tri"><path vector-effect="non-scaling-stroke" d="M0 30L12.5 6L37.5 54L50 30L62.5 6L87.5 54L100 30L112.5 6L137.5 54L150 30L162.5 6L187.5 54L200 30L212.5 6L237.5 54L250 30L262.5 6L287.5 54L300 30"/></g><g class="w saw"><path vector-effect="non-scaling-stroke" d="M0 54L50 6V54L100 6V54L150 6V54L200 6V54L250 6V54L300 6V54"/></g><g class="w sq"><path vector-effect="non-scaling-stroke" d="M0 6H25V54H50V6H75V54H100V6H125V54H150V6H175V54H200V6H225V54H250V6H275V54H300V6"/></g></svg></div><div class="bt"><label><input type="radio" name="uvq04-osc"><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12C5 3 9 3 12 12S19 21 22 12"/></svg></span><span class="nm">Sine</span></label><label><input type="radio" name="uvq04-osc"><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12L7 5L17 19L22 12"/></svg></span><span class="nm">Triangle</span></label><label><input type="radio" name="uvq04-osc" checked><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 18L12 6V18L22 6V18"/></svg></span><span class="nm">Saw</span></label><label><input type="radio" name="uvq04-osc"><i class="led" aria-hidden="true"></i><span class="ky"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2 17V7H12V17H22V7"/></svg></span><span class="nm">Square</span></label></div></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
Built like the front of a vintage analogue synthesiser, this radio group has walnut side cheeks, cream keys with sine, triangle, saw and square icons, and a red LED above each one. The chosen waveform scrolls across a small phosphor oscilloscope drawn with SVG paths, so the choice is both heard in your head and seen. Great for audio tools and music apps.
The main color drives the LEDs and the secondary color the scope trace, so amber and green or red and cyan both read well. Swap the four options for filters, effects or presets and keep the labels to a single short word.