w3.unpo<code>todo

Podemos utilizar el atributo stroke-dashoffset para crear una animación de tipo hormigas andadoras ( marching ants ). Básicamente tenemos que animar el valor de stroke-dashoffset como en los siguientes ejemplos.

El SVG

El SVG para los dos siguientes ejemplos es lo mismo: un rectángulo dibujado con polygon, sin relleno (fill:none), con un borde de color negro (stroke:#000) de 3 pixeles (stroke-width:3). El valor del atributo stroke-dasharray: 30,15. Esto quiere decir que el patrón de líneas discontinuas utilizado esta formado por fragmentos de línea de 30, seguidos por espacios de 15. O sea el tamaño del fragmento a repetir es de 45.

<svg width="250" height="250" viewBox="0 0 250 250">
     <polygon points="50,50 200,50 200,200 50 200" 
              style="fill:none;
                     stroke:#000;
                     stroke-width:3;
                     stroke-dasharray: 30,15;
  ></polygon>
  </svg>

Hormigas andadoras con CSS

En el siguiente ejemplo utilizo la librería -prefix-free así que no necesito utilizar prefijos.

En el CSS primero designamos el nombre de la animación: hormigasAndadoras, la duración: .5s, la función temporizador: linear, y el número de iteraciones: infinite.

polygon{
      animation-name: hormigasAndadoras;
      animation-duration: .5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
  }

Que también podemos escribir así:

polygon{
      animation: hormigasAndadoras .5s linear infinite;
  }

A continuación creamos las fotogramas para la animación hormigasAndadoras: prácticamente tenemos que animar el valor de stroke-dashoffset de 0 a 45 (45 es el tamaño del fragmento a repetir ).

@keyframes hormigasAndadoras {   
            0% { stroke-dashoffset: 0;}   
       100% { stroke-dashoffset: 45;} 
  }

Que también podemos escribir así:

@keyframes hormigasAndadoras {   
          to{ stroke-dashoffset: 45;}  
    }

Y ya está.

See the Pen hormigas andadoras CSS by Gabi (@enxaneta) on CodePen.

Hormigas andadoras con javascript

En JavaScript es todavía más fácil. Podemos utilizar el método requestAnimationFrame para animar el valor del atributo stroke-dashoffset de esta manera:
Tenemos una variable llamada dashoffset cuyo valor es 0. Con cada fotograma el valor de dashoffset crece ( dashoffset += 2; ). Al final hacemos al atributo stroked-dashoffset del polygon igual al valor de la variable dashoffset.

polygon.style.strokeDashoffset = dashoffset;

See the Pen hormigas andadoras JS by Gabi (@enxaneta) on CodePen.