<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-8 -8 64 84" shape-rendering="crispEdges">
  
  <defs>
    <pattern id="pattern" width="8" height="8" patternUnits="userSpaceOnUse" x="-4" y="-4">
      <path d="M 0 0 L8 0 8 8 0 8 z" fill="none"></path>
    </pattern>
  </defs>
    
  <g 
     class="snake-group"
     stroke-linejoin="miter" 
     stroke-linecap="square" 
     stroke-width="8"
     fill="none">
    
    <path class="dot dot-1" d="M28,48 l8,0z" />
    <path class="dot dot-2" d="M-4,48 l8,0z" />
    <path class="dot dot-3" d="M4,16 l8,0z" />
    
    <path class="snake"
          d="M0 16 h48 v16 H32 v32 H0 V48 h16 V0 H0 v16"/>
    
  </g>
  
  <rect x="-4.5" y="-4.5" width="57" height="73" fill="url(#pattern)"></rect>
</svg>
@speed: 4s;

html { background: #8D946A; }
pattern path { stroke: #8D946A; }
.snake-group { stroke: #292A18; }

.snake { animation: stroke-anim @speed linear infinite; }
@keyframes stroke-anim {
  to { stroke-dashoffset: 0; }
}

/* Values generated from JS */
.snake {
  stroke-dasharray: 32 224;
  stroke-dashoffset: 256;
  animation-timing-function: steps(32);
}


/* ////////////////////////////////////////////////////////////////////////// */

.dot { animation: dot1 @speed steps(1) infinite; }
@keyframes dot1 { 
  0%, 26%, 91.1% { opacity: 1; }
  26.1%, 91% { opacity: 0; }
}

.dot-2 { animation-name: dot2; }
@keyframes dot2 { 
  0%, 26%, 51%, 100% { opacity: 0; }
  26.1%, 50% { opacity: 1; }
}

.dot-3 { animation-name: dot3; }
@keyframes dot3 { 
  0%, 50%, 92%, 100% { opacity: 0; }
  50.1%, 92% { opacity: 1; }
}



svg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  max-width: 144px;
  max-height: 90vh;
}
View Compiled
// console.clear();

// var path = document.querySelector('.snake');
// var length = path.getTotalLength();
// var step = length/8;

// console.log(length, step);

// // Set a `stroke-dasharray` based on the length to make it look like a snake moving along the whole path.
// path.style.strokeDasharray = step + ' ' + (length - step);

// // Set the offset to length start the animation
// path.style.strokeDashoffset = length;

// // Use steps to making it "jerky"
// path.style.animationTimingFunction = 'steps(' + step + ')';

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/shshaw/pen/epmrgO.js