SVG Sketcher
SVG Sketcher
Pega un SVG, sube un archivo o escribe texto - recíbelo dibujado a mano. Todo ocurre en tu navegador; nada se sube a ningún sitio.
El archivo se lee localmente en tu navegador. Nada se envía a ningún sitio.
El contorno traza el borde de cada letra. La línea simple dibuja cada letra de un solo trazo de pluma - como con un rotulador.
Los contornos se leen del propio archivo de fuente, así que las letras se convierten en curvas reales que se pueden bocetar.
Un archivo TTF u OTF, leído localmente en tu navegador - nada se envía a ningún sitio. Úsalo para fuentes que no podemos distribuir, como Arial o Helvetica Neue. Funciona en ambos estilos de letra.
Los valores negativos hacen que las letras se solapen.
Dibuja con el ratón, el dedo o un lápiz. Cada trazo se convierte en su propio trazado, así que la animación de Dibujo los redibuja en el orden en que los hiciste.
«Doble» dibuja cada línea dos veces con un temblor distinto - el aspecto de boceto clásico.
La misma semilla redibuja siempre el mismo boceto, así que un enlace compartido se ve idéntico para todo el mundo.
Cuántas versiones redibujadas recorre el bucle. Más fotogramas dan un «boil» más suave - y un fragmento CSS más largo, así que mantenlo bajo para la web y súbelo para el vídeo.
Cuánto se aleja cada fotograma de los demás. Bajo mantiene una línea reconocible que respira; 1 redibuja todo desde cero en cada fotograma.
Detrás del vídeo y del GIF. Ninguno admite transparencia, para eso está el fondo verde: recórtalo con croma en tu editor y el boceto queda sobre tu metraje.
La vista previa de arriba ejecuta exactamente este código - sin una implementación separada que pueda divergir.
Abre el clip retrazando tus trazos una vez - en el orden y a la velocidad con que los hiciste - y luego empieza el bucle. Solo para ilustraciones hechas en la pestaña Dibujar.
La grabación ocurre en tiempo real, así que mantén esta pestaña delante hasta que termine.
SVG Sketcher: SVG y texto dibujados a mano, en tu navegador
Qué hace
SVG Sketcher es una herramienta gratuita y sin cuenta que convierte ilustraciones vectoriales limpias en trazos que parecen dibujados a mano. Pega un SVG, sube un archivo, escribe una palabra o dibuja con el ratón, el dedo o un lápiz; ajusta el temblor, el trazo y el papel, y copia el resultado. Toda la cadena - sanear, muestrear cada trazado a longitud de arco constante, añadir jitter con semilla, retejer los puntos como curvas de Bézier suaves - se ejecuta en JavaScript en tu propia máquina.
Para webs y aplicaciones
Exporta un icono bocetado como SVG optimizado o como componente de React listo para pegar, o todo un logo dibujado a mano que se traza solo con una animación CSS o Lottie. Cada trazado generado lleva pathLength="1", así que el efecto de trazado progresivo es exacto a cualquier tamaño, y la vista previa ejecuta el CSS exacto que copias - el fragmento nunca puede divergir de lo que viste.
Para edición de vídeo
Graba la animación como vídeo sobre un fondo verde uniforme - ningún códec de vídeo de navegador admite transparencia, así que el color de croma plano es la solución. Lleva el clip a Premiere, After Effects, DaVinci Resolve o CapCut, recorta el verde con croma, y el boceto dibujado a mano queda sobre tu metraje. O exporta un GIF animado para una superposición rápida, o JSON de Lottie para una línea de tiempo de motion design.
Todas las exportaciones
SVG estático, archivo .svg independiente, componente React / JSX, animación CSS por fotogramas clave (boil, trazado progresivo, o ambos), JSON de Lottie, GIF animado y vídeo MP4/WebM sobre un fondo apto para croma. El texto escrito se convierte en contornos reales a partir del archivo de fuente - fuentes libres incluidas o un TTF/OTF que subas - con un estilo de línea simple opcional que dibuja cada letra de un solo trazo.
Privado por diseño
No hay servidor. Los archivos que subes, el marcado que pegas y el texto que escribes nunca se transmiten, almacenan ni registran - puedes ver la pestaña de red en silencio mientras trabajas. Sigue funcionando con la pestaña sin conexión una vez cargada la página.
Preguntas frecuentes
- ¿SVG Sketcher es gratis?
- Sí. Es completamente gratis, sin cuenta ni plan de pago. Los anuncios cubren el coste de alojamiento, y no se carga ningún script de anuncios salvo que aceptes el aviso de consentimiento.
- ¿Mis ilustraciones se suben a algún sitio?
- No. No hay backend. Todo lo que pegas, subes, escribes o dibujas se procesa en JavaScript en tu navegador y nunca se envía, almacena ni registra. Cerrar la pestaña lo descarta.
- ¿Puedo usar el boceto en un montaje de vídeo?
- Sí. Exporta la animación como vídeo sobre un fondo verde uniforme, luego recorta el verde con croma en Premiere, After Effects, DaVinci Resolve, CapCut o cualquier editor, y el dibujo a mano queda sobre tu metraje. También hay GIF animado y JSON de Lottie.
- ¿Qué formatos puedo exportar?
- SVG estático, un archivo .svg independiente, un componente React/JSX, una animación CSS por fotogramas clave, JSON de Lottie, un GIF animado y un vídeo MP4 o WebM sobre un fondo apto para croma.
- ¿Puedo bocetar texto escrito o una fuente concreta?
- Sí. Escribe cualquier texto y se convierte en curvas reales a partir del contorno de la fuente - de un conjunto de fuentes libres incluidas, o de un archivo TTF/OTF que subas, que también se queda en tu navegador. Las fuentes propietarias como Arial no vienen incluidas, pero sí equivalentes compatibles, y puedes subir el archivo real.
- ¿Funciona sin conexión?
- Una vez cargada la página, sí. El motor de boceto no hace ninguna petición de red, así que puedes convertir ilustraciones con la pestaña sin conexión.
- ¿Los mismos ajustes producen siempre el mismo dibujo?
- Sí. El temblor viene de un generador aleatorio con semilla, así que un dibujo dado con una semilla dada redibuja siempre exactamente el mismo boceto - que es lo que permite a un enlace compartido reproducir lo que viste.
- ¿Puede dibujar a mano un SVG que contiene texto o usa
- Los
vivos y las referencias