Oui ou non entouré à la main
Une question et deux mots sur un bloc-notes : un feutre trace une boucle libre autour de la réponse choisie.
Réglages
Code
<label class="uvq03-skt"><input type="checkbox" role="switch"><span class="q">Recevoir la newsletter ?</span><span class="nb"><span class="o y">Oui<svg viewBox="0 0 60 36" aria-hidden="true"><path d="M44 6C30 1 8 4 5 16c-3 12 18 17 33 15 14-2 20-10 15-18C49 6 36 4 26 6" pathLength="1"/></svg></span><span class="o n">Non<svg viewBox="0 0 60 36" aria-hidden="true"><path d="M16 5C30 1 54 5 55 17c1 11-20 16-34 13C8 27 2 20 7 12c4-6 16-8 28-7" pathLength="1"/></svg></span></span></label>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Interrupteurs
Voir tout : InterrupteursOù l’utiliser
Ici, l’interrupteur est un bout de bloc-notes ligné où Oui et Non sont écrits dans une police manuscrite. La réponse en cours est entourée d’une boucle libre au feutre rouge qui se dessine seule, pendant que l’autre s’efface, et le choix se lit comme une note sur papier. Les boucles sont des tracés SVG animés avec stroke-dashoffset. Il convient aux sondages, inscriptions à une newsletter, quiz et formulaires conviviaux.
La couleur principale est le feutre, la seconde les lignes du bloc. Changez la question dans le champ texte en restant bref ; la police manuscrite vient du système et varie donc un peu selon l’appareil.