animar svg con css
Crear una firma con css y svg, Hola a todos hoy vamos a seguir explicando programación web con objetos svg
Hoy vamos a enseñar cómo obtener un gráfico svg personalizado, ósea un gráfico vectorial para incrustarlo en una página web
Quieres crear cientos logotipos online y animaciones web descargar svg online entra en la página de inicio y si sigues nuestro blog te enseñaremos como hacer animaciones en javascript y css y crear fondos con css muy rapidamente con los objetos svg
Para explicar cómo crear un grafico svg de modo practico, que va a ser el método de aprendizaje de nuestro blog, vamos a crear una firma vectorial, la firma la animaremos con css para crear la ilusión de estar escribiéndola Y que quede perfectamente animada para que nuestra web quede con un efecto espectacular, para que puedas firmar tu blog con una animación de tu firma.
Por ahora no he logrado firma svg en sus correos y agregar svg firma outlook como archivo html pero lo lograre, si sabes como hazme un comentario.
Tabla de contenidos
Escanear la firma
Lo primero que haremos será firmar en un folio con rotulador grueso
Escanearemos esa firma para generar una imagen que no servirá de fondo
Abriremos el programa inkscape que es un programa de libre descarga y que es fabuloso para estos casos, también podemos usar Adobe iilustrator
si conoces algún otro software me dices en comentarios
abriremos la imagen de tu firma la podremos en una capa la bloqueamos para que no se mueva y generamos otra capa donde vamos a generar un trazado
y apliaremos la imagen para que ocupe toda pantalla

Crear trazado svg
Vamos a generar un trazado por medio de la línea de nuestro rotulador, tendrás que pensar como querrás la animación, si en un solo trazo o en muchos trazos, por cada trazo deberemos generar una animación css
Hay cientos de tutoriales de cómo crear un trazado vectorizado, por desgracia yo soy muy malo con ello, pero con la herramienta “dibujar curvas becier” que tiene forma de pluma podrás generar un trazado fácilmente, cuando hallas finalizado el trazado dale a la tecla enter para que termine y puedas crear otro trazado vectoriaL,

Con el botón de editar nodos posteriormente podrás modificar un poco tu selección para que quede más perfecta la firma,

Crear grafico svg
Cuando tengas ya creado todos los trazados de tu firma ya sea de un solo trazo o de varios, es la hora de exportarlo o guardarlos a formato SVG
Ventajas del gráfico svg
El formato svg tienes unas cuantas ventajas como son:
- Se puede abrir directamente desde el explorador de internet con solo arrastrar el archivo a la pestaña del explorador
- Se puede abrir y modificar con un editor de texto cualquiera , yo usare Visual estudio code, pero te vale el que tu uses incluso el blog de notas
- Es una archivo independiente que representa un gráfico o una animación y no necesita de ningún plugin ni biblioteca anexa
- Se puede incluir en el, propiedades css , javascript incluir imágenes videos fuentes tipográficas etc
Todo ello lo iremos estudiando en los tutoriales con ejemplos
Quieres crear tu logotipo vectorial o una animacion web online entra en nuestra página principal
Limpiar un gràfico svg
Toca ahora hacer limpieza del grafico o mejor dicho eliminar del archivo todo el texto que no vamos a usar ,para que se nos quede un código sin ninguna línea que no se vaya a usar y que podamos entender al 100%
- Abrimos el archivo svg generado por el programa de edición e gráficos vectoriales con un editor de texto
- Dependiendo del programa con la que hemos realizado el grafico svg con nuestra firma se nos abrá generado diferentes tipos de código
- Empezaremos limpiando la cabecera que es la etiqueta <svg></svg> podemos sustituir la etiqueta por este código o dejar lo que viene en tu código simpre respetando las medidas de ancho y alto
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>.......</svg>
En el cuerpo del archivo svg deberemos apreciar cada etiqueta <path ></path> que son los trazados realizados con tu dibujo abra una etiqueta «path » por cada trazado realizado
<path
d="m 46.336804,112.273 v 1.5875 l -3.291793,1.17045 -2.347885,2.94499 -0.304845,5.48725 2.896049,1.21939 6.554219,-3.04847 3.963016,-5.02998 0.304848,-4.11544 c 0,0 -2.591207,-1.67666 -3.200897,-0.91455 -0.346184,0.43273 -4.572712,0.69886 -4.572712,0.69886"
id="ojoi"
/>
Aquí solo deberemos quedarnos como esta el ejemplo con los puntos del recorrido de tu trazado y un id o identificador con el nombre que queramos preferiblemente un nombre que identifique la zona de trazo de que se trata ,borraremos todos los estilos, colores etc que lleve el codigo por defecto
Css animado dentro de un gráfico svg
Para añadir estilos css a un grafico svg ,solo debemos añadir como hacemos en una pagina HTML la etiqueta de estilos
<style type="text/css"> …...</style>
Y dentro aplicar las reglas css como si se tratase de una página normal de estilos
Animaciones css
Enseñar todo lo que se puede crear con css en el tema de animaciones nos llevaría realizar un libro, no obstante os dejo el código y la explicación de cada línea del código css para que sepáis que es cada línea
#nombreIndentificador{ //inicion de llamada a las propiedades css por el nombre de su indicador
timing-function:linear; //Un efecto de transición con la misma velocidad de principio a fin
animation-duration:8s; //Duración de la animación
animation-delay:2s; // Tiempo de espera ntes de que se ejecute la animación
animation-iteration-count: 1; // Número de ciclos que va a realizar la aniamcion
animation-play-state:running; // Estado de la animacion en marcha
animation-name:animacionojos; // Nombre de la animacion , nombre que se le dara a los keyframes
animation-direction: normal; // Direcion en la que quieres la animacion normal marcha a tras....etc
animation-fill-mode:forwards; //Despues de que acabe la animacion que se quede con los valores finales
stroke:BLUE ; //Propiedad ccs de color de grosor
} //Fin de la propiedad css
@keyframes animacionojos // nombre de la animacion por keyframes
{
0% { // propiedades estado al inicio de la animación
stroke-width:3; // grosor del trazo
stroke-dasharray: 100 3000; // medida de trazo y medida del hueco de una linea discontinua de tu trazo
stroke-dashoffset:100; //ubicación a lo largo de una ruta SVG donde stroke comenzará el guión
}
100% { // propiedadesestado al final de la animación
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
Añadir mas clases css a animación del gráfico svg
Si deseamos podemos colocar más clases css dentro de nuestra etiqueta de estilos
En este caso vamos a modificar propiedades de todos los <path> o caminos de trazado
path //elemento a aplicar las propiedades css
{
fill:none; // color de los path ninguno ( no del contorno que se aplica con la animación)
stroke:blue; //color del contorno
stroke-width:0; // grosor del contorno, luego se anima
}
Código final de la animación css de una gráfico svg
<svg width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<style type="text/css">
path
{
fill:none;
stroke:blue;
stroke-width:0;
}
#j{
timing-function:linear;
animation-duration:8s;
animation-delay:0s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:j;
animation-direction: normal;
animation-fill-mode:forwards;
stroke:BLUE ;
}
@keyframes j
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
stroke-width:3;
}
}
#m{
timing-function:linear;
animation-duration:8s;
animation-delay:2s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:m;
animation-direction: normal;
animation-fill-mode:forwards;
stroke:BLUE ;
}
@keyframes m
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#tt{
timing-function:linear;
animation-duration:8s;
animation-delay:4s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:tt;
animation-direction: normal;
animation-fill-mode:forwards;
stroke:BLUE ;
}
@keyframes tt
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#eo{
stroke:BLUE ; ;
timing-function:linear;
animation-duration:8s;
animation-delay:4s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:eo;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes eo
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#s{
stroke:BLUE ; ;
timing-function:linear;
animation-duration:8s;
animation-delay:5s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:s;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes s
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#ojoi{
stroke:red ;
timing-function:linear;
animation-duration:8s;
animation-delay:7s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:ojoi;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes ojoi
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#ojod{
stroke:red;
timing-function:linear;
animation-duration:8s;
animation-delay:7.5s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:ojod;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes ojod
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#boca{
stroke:red ;
timing-function:linear;
animation-duration:8s;
animation-delay:10s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:boca;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes boca
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#nariz{
stroke:red ;
timing-function:linear;
animation-duration:8s;
animation-delay:8s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:nariz;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes nariz
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#cabeza{
stroke:red ;
timing-function:linear;
animation-duration:8s;
animation-delay:8.5s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:cabeza;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes cabeza
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#irisd{
stroke:red;
timing-function:linear;
animation-duration:8s;
animation-delay:11s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:irisd;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes irisd
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#irisi{
stroke:red ;
timing-function:linear;
animation-duration:12s;
animation-delay:11s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:irisi;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes irisi
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
#pelo1 ,#pelo2, #pelo3 , #pelo4 , #pelo5{
stroke:red ;
timing-function:linear;
animation-duration:12s;
animation-delay:12s;
animation-iteration-count: 1;
animation-play-state:running;
animation-name:pelo;
animation-direction: normal;
animation-fill-mode:forwards;
}
@keyframes pelo
{
0% {
stroke-width:3;
stroke-dasharray: 100 3000;
stroke-dashoffset:100;
}
100% {
stroke-width:3;
stroke-dasharray: 2000;
stroke-dashoffset: 1110;
}
}
</style>
<g id="layer2">
<path d="m 2.2863554,132.91346 8.5357266,-1.67666 11.12693,-4.72514 9.145422,-5.33483 c 6.44858,-11.64447 2.924756,4.42029 3.048473,1.98152 l -1.829083,5.94452 -4.11544,24.08295 -2.896052,12.80359 -4.267862,14.48025 -3.200898,15.08994 -6.401795,10.51724 -4.1154396,3.04847 -1.0669659,-1.52424 c 0,0 2.2863555,-2.74362 2.8960503,-3.20089 0.6096947,-0.45727 17.2238772,-6.09695 17.2238772,-6.09695 l 14.632674,-5.02998 22.406285,-6.85907 31.704128,-7.31634 30.484734,-6.09694 25.14991,-4.26787 6.09696,-0.76211" id="j"></path>
<path d="m 71.334291,180.62208 c 7.782111,-19.14607 16.321347,-37.53502 23.015977,-57.76857 l 7.926032,-17.22389 -4.267863,29.41778 -2.133933,20.11993 v 0 l 3.963018,-3.35333 c 9.450298,-16.1569 10.508538,-16.88442 11.584198,-18.59569 l 3.35333,-5.33483 c 4.21705,-6.14775 12.45727,-18.33024 12.65116,-18.44326 l 3.81059,-3.65817 3.50575,-2.89605 0.45727,3.2009 -4.72514,10.9745 -4.42029,8.84058 -6.09694,13.10844 -4.72514,10.9745 -2.13393,6.4018 v 4.87755 4.26787 l 0.30485,1.9815 0.76212,0.30485 4.72513,-3.04847 2.74363,-5.33483 5.7921,-2.74363 -6.55422,2.43878 -1.82908,4.57271 0.45727,3.65817 c 0,0 0.51793,2.01447 1.67666,1.21939 4.27895,-2.93609 7.60052,-6.76291 3.65816,-4.57271 0,0 1.37182,0.76212 1.67667,-1.82908 0.30484,-2.59121 0.91454,-4.42029 0.91454,-4.42029 l -1.06697,6.24937 c 0,0 1.82909,1.37181 3.35332,1.37181 1.52424,0 3.2009,-0.60969 5.02999,-1.52423 1.82908,-0.91454 3.65817,-1.52424 4.11543,-2.74363 0.45728,-1.21939 2.13394,-4.72513 2.13394,-5.48725 0,-0.76212 4.11544,-16.76661 4.11544,-16.76661 l 3.50574,-10.05996 -10.21239,35.51471" id="m"></path>
<path d="m 139.6201,140.8395 17.68115,-7.01149" id="tt"></path>
<path d="m 148.6131,157.14883 3.50575,-0.76212 c 3.73032,-0.13819 4.14385,-2.48758 5.63967,-4.11544 v 0 l -2.13393,-3.35332 -4.66019,1.9072 -1.58918,3.12278 -0.76212,3.2009 0.6097,3.35332 2.5912,1.21939 5.02998,-0.45727 c 0,0 2.89605,-1.06696 3.65817,-1.52424 0.76212,-0.45727 3.35332,-1.67666 3.35332,-1.67666 0,0 2.89605,-3.35332 3.96302,-4.57271 1.06697,-1.21939 3.81059,-3.65817 3.81059,-3.65817 l -4.26786,3.65817 c 0,0 -2.13393,4.87756 -0.91454,4.87756 1.21938,0 2.43878,0.15242 2.43878,0.15242 l 4.72513,-2.13393 c 0,0 2.4321,-0.61597 3.37835,-1.50708 1.12202,-1.05664 1.34678,-2.9132 1.34678,-2.9132 l -1.67666,-2.59121 h -4.11544 v 0 l -1.82908,0.6097 v 0" id="eo"></path>
<path d="m 193.88294,146.63159 -0.78136,-0.40767 -2.72438,-1.42141 -4.87756,0.60969 -1.52424,3.50575 c 0,0 0.60969,3.04848 1.21939,3.2009 0.60969,0.15242 5.63968,1.67666 5.63968,1.67666 l 7.31634,1.21939 1.37181,-0.30485 c 0,0 1.21939,1.37182 0.60969,1.52424 -0.60969,0.15242 -11.73662,1.67666 -12.34632,1.98151 -0.60969,0.30484 -25.7596,5.48725 -26.3693,5.63967 -0.60969,0.15243 -20.72962,3.2009 -20.72962,3.2009 l -9.29784,1.98151 -16.46176,1.98151 -21.33932,3.04847 -12.803591,2.74363 c 0,0 -2.438779,1.06696 -0.457272,-1.52424 1.98151,-2.5912 12.124945,-11.16405 15.394793" id="s"></path>
</g>
<g id="layer3">
<path d="m 46.336804,112.273 v 1.5875 l -3.291793,1.17045 -2.347885,2.94499 -0.304845,5.48725 2.896049,1.21939 6.554219,-3.04847 3.963016,-5.02998 0.304848,-4.11544 c 0,0 -2.591207,-1.67666 -3.200897,-0.91455 -0.346184,0.43273 -4.572712,0.69886 -4.572712,0.69886" id="ojoi"></path>
<path d="m 46.031956,155.77702 c -0.609695,0 -5.792099,0.60969 -5.792099,0.60969 l -6.401798,4.26786 -5.573322,3.57756 -6.468148,7.54937 c 0,0 -3.353322,6.55422 -3.353322,7.16392 0,0.60969 -1.981508,10.66966 -1.981508,10.66966 0,0 2.286356,8.07845 2.438779,8.84057 0.152424,0.76212 7.163914,10.82209 7.163914,10.82209 l 11.736624,6.70664 c 0,0 16.309337,2.28635 20.272353,2.28635 3.963014,0 24.692639,-3.81059 24.692639,-3.81059 l 22.711132,-6.40179 23.77809,-10.82209 19.05297,-14.63267 c 0,0 4.72513,-6.55422 5.1824,-7.16392 0.45727,-0.60969 3.35333,-7.46875 3.35333,-7.46875 l 0.76211,-10.05997 c 1.77165,-6.6459 -1.32101,-5.99533 -1.98151,-8.993 l -8.993,-2.43878 -6.55421,-0.91454 -6.09695,1.82908 -2.51714,3.12054 0.38321,3.58611" id="cabeza"></path>
<path d="m 58.98797,119.19533 c -0.695621,-0.65676 1.422621,-1.52424 0,0 l -4.382921,3.49711 -1.104333,3.20953 3.505747,4.72514 6.859066,-0.45727 6.706642,-4.72514 4.055844,-3.60618 0.21202,-4.015 v 0 c 0,0 -0.918748,-2.02844 -3.708599,-2.80513 -1.101472,-0.30665 -3.395256,0.61113 -4.674705,0.36635 l -3.658169,1.82908 -3.810592,1.98151" id="ojod"></path>
<path d="m 59.292817,180.01238 -4.730615,-0.76872 c -1.624025,0.56109 -3.598804,2.03672 -4.56723,2.59781 l -0.266252,3.80779 -0.495866,3.2037 c 0,0 1.979464,3.95631 1.978633,5.40098 l 1.527112,3.59202 c 0,0 3.810592,5.02998 5.487252,5.94452 1.676662,0.91454 8.840575,3.2009 9.755118,3.50575 0.91454,0.30484 12.041471,-0.30485 12.041471,-0.30485 l 17.833572,-7.77361 7.687708,-4.2673 3.57439,-4.6538 2.55989,-3.92369 2.48735,-3.92182 2.13393,-8.53572" id="boca"></path>
<path d="m 51.519209,141.29677 -4.57271,-1.37182 v 0 0 0 l -3.038018,1.86029 -0.467727,2.56 -1.371814,3.81059 1.066967,1.67666 3.200897,1.06697 h 2.591202 l 0.609695,-0.45727 v 0 l 0.304848,-1.52424" id="nariz"></path>
<path d="m 46.336804,121.48169 0.182703,-2.39482 0.822504,-1.13598 0.993999,-0.13583 1.069376,0.63151 c 0,0 0.451519,-0.61789 0.06182,1.30705 l -0.35217,1.44937 -1.956281,1.01032 -0.82195,-0.73162 v 0 0" id="irisd"></path>
<path d="m 56.20122,126.10948 0.182703,-2.39482 0.822504,-1.13598 0.993999,-0.13583 1.231046,0.65845 c -0.159027,0.3279 -0.01704,1.1185 -0.207635,2.08846 l -0.24439,0.64102 -1.956281,1.01032 -0.82195,-0.73162 v 0 0" id="irisi"></path>
<path d="m 57.006463,103.80054 1.981507,-3.04848" id="pelo1"></path>
<path d="m 73.773069,105.17235 c 0.304847,-4.26786 0.609695,-5.7921 0.609695,-5.7921" id="pelo2"></path>
<path d="m 86.881506,103.80054 6.09695,-6.859068" id="pelo3"></path>
<path d="m 119.19533,103.80054 8.07846,-6.554223" id="patpelo4"></path>
<path d="m 146.63159,108.83052 6.24938,-4.87756" id="pelo5"></path>
</g>
</svg>
CREAR UNA FIRMA CON CSS Y SVG
video como generar una firma con css con gráficos svg
