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.

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%

1. Abrimos el archivo svg generado por el programa de edición e gráficos vectoriales con un editor de texto
2. Dependiendo del programa con la que hemos realizado el grafico svg con nuestra firma se nos abrá generado  diferentes tipos de código
3. 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