Comment fonctionne l'effet croquis

Une ligne dessinée à la main n'est pas une ligne tremblante. Si l'on ajoute simplement du bruit aléatoire à un tracé vectoriel, on obtient quelque chose qui paraît cassé plutôt qu'humain. L'effet ne marche que si le tremblé est lisse - la plume vagabonde, mais elle ne casse jamais. Voici ce que fait réellement l'outil.

1. Tout devient un tracé

Rectangles, rectangles arrondis, cercles, ellipses, lignes, polygones et polylignes sont d'abord tous convertis en données de tracé. Un seul type de forme signifie un seul chemin de code pour tout ce qui suit, et un rectangle arrondi conserve ses coins au lieu d'être traité comme quatre points.

2. Échantillonnage à longueur d'arc constante

Chaque tracé est parcouru à intervalles fixes le long de sa longueur, en collectant des points. L'espacement s'adapte aux dimensions propres du dessin, donc une icône de 24 unités et une illustration de 1000 unités produisent une densité de détail comparable plutôt que l'une soit sur-échantillonnée en bouillie.

Cette étape détecte aussi les sauts d'un tracé. Le long d'une courbe continue, la distance en ligne droite entre deux échantillons ne peut jamais dépasser la distance parcourue sur la courbe - donc tout écart plus large que le pas d'échantillonnage doit être un moveto. C'est ainsi que l'extérieur d'un o reste séparé de son anneau intérieur, et pourquoi les trous des glyphes et des icônes multi-parties ne sont pas reliés par une ligne parasite.

3. Jitter à graine

Chaque point échantillonné est décalé d'un petit écart aléatoire. L'aléa vient d'un générateur à graine plutôt que de Math.random(), ce qui veut dire que le même dessin avec la même graine produit toujours exactement le même croquis. C'est ce qui permet à un lien partagé de reproduire le dessin que vous avez vu, et cela évite que toute l'image se réorganise à chaque déplacement d'un curseur.

4. Retissé en courbe continue

Les points décalés sont ensuite reconstruits en tracé de Bézier cubique à continuité C1 : chaque point de contrôle est orienté selon la direction entre les deux voisins d'un point, mise à l'échelle par le réglage de douceur. Comme les segments voisins partagent une direction tangente, la courbe ne fait jamais d'angle brutal - la ligne se lit comme un seul trait assuré plutôt qu'un polygone.

Les lignes à deux points seulement sont traitées à part : elles sont légèrement bombées sur le côté, car une ligne droite tracée à la main n'est jamais tout à fait droite.

5. Dessiné deux fois, en option

Le préréglage Crayon exécute tout le processus deux fois avec un tremblé différent et superpose les résultats. Deux traits presque confondus, c'est à quoi ressemblent la plupart des styles dessinés à la main de près, et cela ne coûte qu'une seconde passe.

À propos des animations

Les modes animés génèrent plusieurs redessins complets et les parcourent en boucle avec une animation CSS steps() - le « boil » des dessins animés faits à la main. L'effet de tracé progressif utilise pathLength="1" sur chaque tracé, ce qui permet à une seule règle stroke-dasharray: 1 d'être exactement correcte pour tous les tracés quelle que soit leur longueur réelle.

L'aperçu applique le CSS exact que vous copiez, au balisage exact que vous copiez. Il n'y a pas d'implémentation d'aperçu séparée qui pourrait diverger du code exporté.

Dessiner le vôtre

L'onglet Dessiner n'est pas une chaîne séparée. Il capture vos traits, réduit chacun aux points qui portent sa forme (Ramer–Douglas–Peucker), et émet du SVG ordinaire — à partir de là, le moteur de croquis le traite exactement comme une icône collée.

Deux choses se passent à la sortie. Le dessin est recadré sur ce que vous avez réellement tracé, pour qu'un gribouillis dans un coin ne s'exporte pas surtout comme du vide ; et il est mis à l'échelle dans une boîte de 24 unités, car l'épaisseur de trait se mesure en unités de viewBox — laissez un dessin à l'échelle du pavé et chaque préréglage de style devient un cheveu.

Chaque trait reste son propre tracé, dans l'ordre où vous l'avez fait. C'est ce qui permet à l'animation de tracé progressif de rejouer votre dessin comme vous l'avez fait, plutôt que dans un ordre arbitraire.

Comment les images diffèrent entre elles

Le jitter de chaque image vient de deux générateurs à graine, pas un. Le premier est indexé sur la seule graine, il produit donc les mêmes décalages dans chaque image ; le second est aussi indexé sur le numéro d'image, il change donc. La variation d'image décide comment le tremblé se répartit entre les deux. Près de zéro, chaque image partage une même ligne qui ne fait que respirer légèrement - la forme reste reconnaissable et le boil se lit comme un dessin vivant. À un, chaque image est redessinée de zéro et la ligne saute partout, ce qui convient à un carton-titre griffonné et pas à un logo.

Cette répartition est ce qui rend un grand nombre d'images utile : seize images d'une ligne redessinée de zéro, c'est du bruit, tandis que seize images d'une ligne qui dérive doucement, c'est un boil fluide.

La vidéo et le fond vert

L'export vidéo dessine la même animation sur un canvas avec Path2D et l'enregistre avec le MediaRecorder du navigateur - toujours aucun serveur, toujours rien d'envoyé. Le minutage est copié image-clé par image-clé depuis le CSS, y compris la courbe ease-in-out et le décalage par tracé, donc le clip correspond à l'aperçu.

Le fond est plein car aucun format vidéo qu'un navigateur peut enregistrer ne gère la transparence. Une couleur d'incrustation plate et saturée est la solution standard : placez le clip dans votre logiciel de montage, incrustez le vert, et le croquis se pose sur vos images. L'enregistrement se fait en temps réel, donc un clip de dix boucles prend dix boucles de secondes.

Essayer