Forma de onda de sintetizador
El panel de un sintetizador analógico con laterales de madera: cada tecla enciende su LED y dibuja su onda en el osciloscopio.
Ajustes
Código
<fieldset class="uvq04-osc"><legend>Oscilador 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">Seno</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">Triángulo</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">Sierra</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">Cuadrada</span></label></div></div></fieldset>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Radio buttons
Ver todos: Radio buttonsDónde usarlo
Hecho como el frontal de un sintetizador analógico antiguo, este grupo de radios lleva laterales de nogal, teclas crema con iconos de seno, triángulo, sierra y cuadrada y un LED sobre cada una. La onda elegida se desplaza por un pequeño osciloscopio de fósforo dibujado con trazos SVG, así que la elección se ve además de imaginarse. Ideal para herramientas de audio y apps de música.
El color principal enciende los LED y el secundario la línea del osciloscopio, así que ámbar con verde o rojo con cian se leen bien. Cambia las cuatro opciones por filtros, efectos o programas y deja las etiquetas en una palabra corta.