Toggle de mancha de tinta
Sobre papel de carta pautado, una gota de tinta se derrama y empapa el carril con bordes irregulares y salpicaduras.
Ajustes
Código
<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>Firmar con tinta</label>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 Toggles
Ver todos: TogglesDónde usarlo
Este interruptor está sobre una tira de papel pautado con margen rojo. Al activarlo, la bola con la gota se desliza y detrás se extiende un charco de tinta con bordes ásperos que se corren, más unas pequeñas salpicaduras. Los bordes salen de un filtro SVG de turbulencia aplicado a círculos normales. Encaja en pasos de firma, apps de diario, papelerías y herramientas de escritura.
El color principal es la tinta y el secundario el papel. Funcionan el negro ferrogálico, el sepia o un turquesa de pluma estilográfica, y la semilla del filtro en el SVG cambia la forma de la mancha.