SVG Sketcher
SVG Sketcher
Collez un SVG, importez un fichier ou saisissez du texte - récupérez-le dessiné à la main. Tout se passe dans votre navigateur ; rien n'est envoyé ailleurs.
Le fichier est lu localement dans votre navigateur. Rien n'est envoyé où que ce soit.
Le contour suit le pourtour de chaque lettre. La ligne simple dessine chaque lettre d'un seul trait de plume - comme au feutre.
Les contours sont lus directement dans le fichier de police, donc les lettres deviennent de vraies courbes que l'on peut croquer.
Un fichier TTF ou OTF, lu localement dans votre navigateur - rien n'est envoyé ailleurs. Utilisez ceci pour les polices que nous ne pouvons pas fournir, comme Arial ou Helvetica Neue. Fonctionne dans les deux styles de lettre.
Les valeurs négatives font se chevaucher les lettres.
Dessinez à la souris, au doigt ou au stylet. Chaque trait devient son propre tracé, et l'animation Dessin les redessine dans l'ordre où vous les avez faits.
« Double » dessine chaque ligne deux fois avec un tremblé différent - le rendu croquis classique.
La même graine redessine toujours le même croquis, donc un lien partagé s'affiche à l'identique pour tout le monde.
Nombre de redessins que la boucle parcourt. Plus d'images donnent un « boil » plus fluide - et un extrait CSS plus long, alors gardez-le bas pour le web et montez-le pour la vidéo.
À quel point chaque image s'écarte des autres. Bas : une même ligne reconnaissable qui respire ; 1 : tout est redessiné de zéro à chaque image.
Derrière la vidéo et le GIF. Ni l'un ni l'autre ne gère la transparence, d'où le fond vert : incrustez-le dans votre logiciel de montage et le croquis se pose sur vos images.
L'aperçu ci-dessus exécute exactement ce code - aucune implémentation séparée qui pourrait diverger.
Ouvre le clip en retraçant vos traits une fois - dans l'ordre et à la vitesse où vous les avez faits - puis la boucle démarre. Uniquement pour les illustrations faites dans l'onglet Dessiner.
L'enregistrement se fait en temps réel, gardez donc cet onglet au premier plan jusqu'à la fin.
SVG Sketcher : SVG et texte dessinés à la main, dans votre navigateur
Ce qu'il fait
SVG Sketcher est un outil gratuit et sans compte qui convertit des illustrations vectorielles nettes en traits qui semblent dessinés à la main. Collez un SVG, importez un fichier, saisissez un mot, ou dessinez à la souris, au doigt ou au stylet ; réglez le tremblé, le trait et le papier, et récupérez le résultat. Toute la chaîne - assainir, échantillonner chaque tracé à longueur d'arc constante, ajouter un jitter à graine, retisser les points en courbes de Bézier lisses - s'exécute en JavaScript sur votre machine.
Pour les sites et applications
Exportez une icône croquée en SVG optimisé ou en composant React prêt à coller, ou tout un logo dessiné à la main qui se trace lui-même avec une animation CSS ou Lottie. Chaque tracé généré porte pathLength="1", donc l'effet de tracé progressif est exact à n'importe quelle taille, et l'aperçu exécute le CSS exact que vous copiez - l'extrait ne peut jamais diverger de ce que vous avez vu.
Pour le montage vidéo
Enregistrez l'animation en vidéo sur un fond vert uni - aucun codec vidéo de navigateur ne gère la transparence, la couleur d'incrustation à plat est la solution. Placez le clip dans Premiere, After Effects, DaVinci Resolve ou CapCut, incrustez le vert, et le croquis dessiné à la main se pose sur vos images. Ou exportez un GIF animé pour une incrustation rapide, ou du JSON Lottie pour une timeline de motion design.
Tous les exports
SVG statique, fichier .svg autonome, composant React / JSX, animation CSS par images-clés (boil, tracé progressif, ou les deux), JSON Lottie, GIF animé et vidéo MP4/WebM sur fond incrustable. Le texte saisi est transformé en vrais contours à partir du fichier de police - polices libres fournies ou TTF/OTF que vous importez - avec un style ligne simple optionnel qui dessine chaque lettre d'un seul trait.
Confidentiel par conception
Il n'y a aucun serveur. Les fichiers importés, le balisage collé et le texte saisi ne sont jamais transmis, stockés ni journalisés - vous pouvez regarder l'onglet réseau rester silencieux pendant que vous travaillez. L'outil continue de fonctionner hors ligne une fois la page chargée.
Questions fréquentes
- SVG Sketcher est-il gratuit ?
- Oui. Il est entièrement gratuit, sans compte ni offre payante. Les publicités couvrent l'hébergement, et aucun script publicitaire ne se charge tant que vous n'acceptez pas la bannière de consentement.
- Mes illustrations sont-elles envoyées quelque part ?
- Non. Il n'y a aucun backend. Tout ce que vous collez, importez, saisissez ou dessinez est traité en JavaScript dans votre navigateur et n'est jamais envoyé, stocké ni journalisé. Fermer l'onglet l'efface.
- Puis-je utiliser le croquis dans un montage vidéo ?
- Oui. Exportez l'animation en vidéo sur un fond vert uni, puis incrustez le vert par chroma key dans Premiere, After Effects, DaVinci Resolve, CapCut ou n'importe quel logiciel, et le dessin à la main se pose sur vos images. Un GIF animé et du JSON Lottie sont aussi disponibles.
- Quels formats puis-je exporter ?
- SVG statique, fichier .svg autonome, composant React/JSX, animation CSS par images-clés, JSON Lottie, GIF animé, et vidéo MP4 ou WebM sur fond incrustable.
- Puis-je croquer du texte saisi ou une police précise ?
- Oui. Saisissez du texte et il est converti en vraies courbes à partir du contour de la police - parmi un jeu de polices libres fournies, ou un fichier TTF/OTF que vous importez et qui reste dans votre navigateur. Les polices propriétaires comme Arial ne sont pas fournies, mais des équivalents compatibles le sont, et vous pouvez importer le vrai fichier.
- Fonctionne-t-il hors ligne ?
- Une fois la page chargée, oui. Le moteur de croquis ne fait aucune requête réseau, vous pouvez donc convertir des illustrations avec l'onglet hors ligne.
- Les mêmes réglages produisent-ils toujours le même dessin ?
- Oui. Le tremblé provient d'un générateur aléatoire à graine, donc un dessin donné avec une graine donnée redessine toujours exactement le même croquis - c'est ce qui permet à un lien de partage de reproduire ce que vous avez vu.
- Peut-il dessiner à la main un SVG contenant du texte ou utilisant
- Les
vivants et les références