SVG SketcherCómo funciona el efecto de boceto
Una línea dibujada a mano no es una línea temblorosa. Si solo añades ruido aleatorio a un trazado vectorial obtienes algo que se lee como roto en vez de humano. El efecto solo funciona si el temblor es suave - la pluma vagabundea, pero nunca se quiebra. Esto es lo que hace realmente la herramienta.
1. Todo se convierte en un trazado
Rectángulos, rectángulos redondeados, círculos, elipses, líneas, polígonos y polilíneas se convierten primero en datos de trazado. Un solo tipo de forma significa un solo camino de código para todo lo que sigue, y un rectángulo redondeado conserva sus esquinas en lugar de tratarse como cuatro puntos.
2. Muestreo a longitud de arco constante
Cada trazado se recorre a intervalos fijos a lo largo de su longitud, recogiendo puntos. El espaciado se adapta a las dimensiones propias del dibujo, así que un icono de 24 unidades y una ilustración de 1000 unidades producen una densidad de detalle comparable en vez de que uno quede sobremuestreado hasta el emborronamiento.
Este paso también detecta dónde salta un trazado. A lo largo de una curva continua, la distancia en línea recta entre dos muestras nunca puede superar la distancia recorrida sobre la curva - así que cualquier hueco más ancho que el paso de muestreo tiene que ser un moveto. Así es como el exterior de una o se mantiene separado de su anillo interior, y por eso los huecos de los glifos y de los iconos de varias partes no se unen con una línea perdida.
3. Jitter con semilla
Cada punto muestreado se desplaza un pequeño valor aleatorio. La aleatoriedad viene de un generador con semilla en vez de Math.random(), lo que significa que el mismo dibujo con la misma semilla produce siempre exactamente el mismo boceto. Eso es lo que hace que un enlace compartido reproduzca el dibujo que viste, y evita que toda la imagen se reordene cada vez que mueves un deslizador.
4. Retejido como curva continua
Los puntos desplazados se reconstruyen luego como un trazado de Bézier cúbico con continuidad C1: cada punto de control se orienta según la dirección entre los dos vecinos de un punto, escalada por el ajuste de suavidad. Como los segmentos vecinos comparten una dirección tangente, la curva nunca gira de forma abrupta - la línea se lee como un solo trazo seguro en vez de un polígono.
Las líneas con solo dos puntos reciben un trato especial: se arquean un poco hacia un lado, porque una línea recta dibujada a mano nunca es del todo recta.
5. Dibujado dos veces, opcionalmente
El preajuste Lápiz ejecuta todo el proceso dos veces con distinto temblor y superpone los resultados. Dos trazos casi coincidentes es a lo que se parecen de cerca la mayoría de estilos dibujados a mano, y solo cuesta una segunda pasada.
Sobre las animaciones
Los modos animados generan varios redibujados completos y alternan entre ellos con una animación CSS steps() - el «boil» que se ve en los dibujos animados hechos a mano. El efecto de trazado progresivo usa pathLength="1" en cada trazado, lo que permite que una sola regla stroke-dasharray: 1 sea exactamente correcta para cada trazado sin importar su longitud real.
La vista previa aplica el CSS exacto que copias, al marcado exacto que copias. No hay una implementación de vista previa separada que pueda alejarse del código exportado.
Dibujar el tuyo
La pestaña Dibujar no es una cadena separada. Captura tus trazos, adelgaza cada uno hasta los puntos que llevan su forma (Ramer–Douglas–Peucker), y emite SVG corriente — a partir de ahí, el motor de boceto lo trata exactamente como un icono pegado.
Dos cosas pasan a la salida. El dibujo se recorta a lo que realmente dibujaste, para que un garabato en una esquina no se exporte como sobre todo espacio vacío; y se escala a una caja de 24 unidades, porque el grosor del trazo se mide en unidades de viewBox — deja un dibujo a la escala del lienzo y cada preajuste de estilo se renderiza como un pelo.
Cada trazo se queda como su propio trazado, en el orden en que lo hiciste. Eso es lo que hace que la animación de trazado progresivo reproduzca tu dibujo como lo hiciste, en vez de en un orden arbitrario.
Cómo difieren los fotogramas entre sí
El jitter de cada fotograma viene de dos generadores con semilla, no uno. El primero se indexa solo por la semilla, así que produce los mismos desplazamientos en cada fotograma; el segundo se indexa también por el número de fotograma, así que cambia. La variación de fotograma decide cómo se reparte el temblor entre ambos. Cerca de cero, cada fotograma comparte una línea que solo respira ligeramente - la forma sigue siendo reconocible y el boil se lee como un dibujo vivo. En uno, cada fotograma se redibuja desde cero y la línea salta por todos lados, que es el aspecto correcto para un cartón de título garabateado y el equivocado para un logo.
Ese reparto es lo que hace útil un número alto de fotogramas: dieciséis fotogramas de una línea redibujada desde cero son ruido, mientras que dieciséis fotogramas de una que deriva suavemente son un boil fluido.
El vídeo y el fondo verde
La exportación de vídeo dibuja la misma animación en un canvas con Path2D y la graba con el propio MediaRecorder del navegador - sigue sin servidor, y sigue sin subir nada. Los tiempos se copian del CSS fotograma clave a fotograma clave, incluida la curva ease-in-out y el escalonado por trazado, así que el clip coincide con la vista previa.
El fondo es sólido porque ningún formato de vídeo que un navegador pueda grabar admite transparencia. Un color de croma plano y saturado es la forma estándar de resolverlo: lleva el clip a tu editor, recorta el verde, y el boceto queda sobre tu metraje. La grabación ocurre en tiempo real, así que un clip de diez bucles tarda diez bucles de segundos.