Wellenform-Wahl am Synthesizer
Ein analoges Synthesizer-Panel mit Holzwangen: Jede Taste schaltet ihre LED ein und zeichnet ihre Welle aufs Oszilloskop.
Einstellungen
Code
<fieldset class="uvq04-osc"><legend>Oszillator 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">Sinus</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">Dreieck</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">Sägezahn</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">Rechteck</span></label></div></div></fieldset>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Radiobuttons
Alle ansehen: RadiobuttonsWofür du ihn nutzen kannst
Gebaut wie die Front eines alten Analogsynthesizers, hat diese Radiogruppe Seitenwangen aus Nussbaum, cremefarbene Tasten mit Sinus-, Dreieck-, Sägezahn- und Rechtecksymbol und über jeder eine rote LED. Die gewählte Welle läuft über ein kleines Phosphor-Oszilloskop aus SVG-Pfaden, man sieht die Auswahl also sofort. Ideal für Audio-Tools und Musik-Apps.
Die Hauptfarbe steuert die LEDs, die Zweitfarbe die Spur des Oszilloskops, Bernstein mit Grün oder Rot mit Cyan sind gut lesbar. Tausche die vier Optionen gegen Filter, Effekte oder Presets und halte die Beschriftung bei einem kurzen Wort.