Escritura a mano: animación SVG CodePen Ex: 1
Escritura a mano: animación SVG CodePen Ex: 2
Estoy tratando de aprender cómo se logró el efecto de "escritura a mano" anterior usando rutas SVG y CSS. Estuve mirando el HTML y también lo importé a Illustrator para intentar averiguar qué está sucediendo. Soy nuevo en Illustrator y mi objetivo es recrear esto en Illustrator usando otra fuente.
Mi comprensión hasta ahora: se crearon el texto, las rutas y los contornos. Luego se dibujó algo llamado a clip-patha lo largo de todo el texto. ¿Algo que ver con las máscaras? Cuando animas la strokeruta del clip, llena todos los espacios del texto.
¿Cómo se crea este efecto en Illustrator? ¿Simplemente creo una ruta normal primero con la herramienta Pluma y luego la convierto? Además, ¿cómo organizarías las capas?
Editar: muchos ejemplos de animación de texto SVG en la web están animando los trazos de contorno de una fuente. Aquí lo único que se anima es un trazo que viaja a través de un objeto y llena los espacios a medida que avanza en una animación lineal.
Resuelto...
Paso 1: haga un objeto, texto, cuadrado, círculo, etc. Si es texto, asegúrese de convertirlo en contorno.
Paso 2: en una capa debajo del objeto, dibuja un trazo.
Paso 3: resalte el objeto y el trazo, asegúrese de que el objeto esté en la capa superior. Ir al objeto, ruta de recorte y luego hacer. Ahora debería poder rellenar el objeto con el trazo.
Paso 4: Anima el trazo.
Luciano
Zach Saucier
Luciano
joel hoelting