<form>
  <label for="playback-rate">Increase Playback Rate to Reveal Shape</label>
  <input type="range" id="playback-rate" min="1" max="60" step="1" value="1"/>
</form>
<main>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550.4 509.7"><title>Texas</title><path d="M 277.6 0.2 l 0.7 92.5 c 5.2 2.7 10.5 5.8 16 8.8 c 0.2 0 0.3 -0.2 0.4 -0.3 l 19 5 c 0.8 1.3 1.6 2.5 2.7 3.3 c 8 -0.2 13.7 1 21.7 2.2 c 0.8 1.8 2 3.3 3 5 c 4 -6 9.2 -5 15.2 -3.7 l 49.7 10.6 c 0 -0.5 0.3 -1 0.3 -1.8 c 5.5 -0.4 3.2 9.2 10.3 6 c 1 -0.2 1.6 -1.2 2.3 -2 L 460 123 c 0.8 0 1.5 -0.2 2.3 -0.4 l 38.3 5.7 l 27.7 11 h 0.3 l 0.6 76.8 c 11 11 11 27.7 21 38.3 c -0.3 19.7 -4 38 -6 57 l -0.8 1 l -4.8 13.2 v 0.6 c -13 5.7 -26.6 12 -40 17 c 2 -4 6.5 -5.6 9.5 -8.7 c -3.6 -0.6 -6 1 -9.5 1 c -0.2 -3.8 1.6 -7.8 1.2 -11.7 c -3.7 1.7 -6.8 8.3 -11.6 4 c 2.7 5.8 5.5 11 4.6 18 l -10.7 5.5 c 0 2 -1 4.7 -1 5.6 l 1 -1 c -2.8 5.3 -8.7 11 -14.6 14 c -11 6.5 -22.8 13 -33 19.3 l 2.5 -8.4 c 0.5 -1.7 0.2 -4 0.2 -5.7 c -2 2.6 -7.2 3.5 -6.4 6 c -3 -1.7 -9.2 -0.8 -10 -5.4 c -2.7 0.2 -0.7 2.4 -1.3 4 c 2.5 3.5 8.4 3.6 9 8.2 l -11.2 5.5 c -1 -1.4 -2.3 -4 -4.6 -5 c -1.7 4.3 2.7 8 0.3 13 l -1.3 0.5 l -18.7 24.5 c -1.6 6 -5 11.7 -7.5 17.8 c -3.4 -5 -8.5 4 -11.3 -2.5 c -1.3 7.4 7.5 2.7 11.3 4 c 2.4 6 0 11.3 -4 16 c 3.6 12.8 7.8 25.2 10.4 38.7 l 4.6 0.6 c 2 2.2 1.7 5 2 8.6 c -6.7 0.6 -12.6 0.2 -19.5 0.3 c -18.8 -13.5 -46.2 -7.5 -62.6 -21.7 c -8 -8.5 -6.8 -22.4 -15 -30 l -26.3 -48 c -3 -5 -6 -10 -9.6 -14.3 c -7 -14.8 -12 -31 -21.4 -44.3 c -9.7 -6.8 -21 -12.6 -25.7 -24 c -9.7 -1.3 -19.7 -3.8 -29 -4 c -12 -7 -11 7.7 -23 4 c -8 4.5 -6.3 17 -9 25.5 l -9 11.6 c -6 0.5 -11 -3.2 -16.4 -4 c -10.6 -13.2 -30.2 -12.3 -41.5 -25.4 l -17.5 -47.6 c -5 -7.6 -15.4 -9 -23 -13.7 l -22.8 -26.7 c -2.7 -1.2 -6.6 -0.3 -9.2 -1.5 L 2.6 229.4 c -2.2 -3 -3 -7 -2.6 -11.2 c 49.5 -1 99.2 -0.5 148.8 -1 c 0.8 -72.5 -1.5 -146 2.4 -217 c 42.2 0 84.3 -0.5 126.4 0" /></svg>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <!--div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div-->
</main>
<aside>There's more to see if your browser supports CSS Motion Path (like the latest Chrome or Opera)</aside>
$path: path("M 277.6 0.2 l 0.7 92.5 c 5.2 2.7 10.5 5.8 16 8.8 c 0.2 0 0.3 -0.2 0.4 -0.3 l 19 5 c 0.8 1.3 1.6 2.5 2.7 3.3 c 8 -0.2 13.7 1 21.7 2.2 c 0.8 1.8 2 3.3 3 5 c 4 -6 9.2 -5 15.2 -3.7 l 49.7 10.6 c 0 -0.5 0.3 -1 0.3 -1.8 c 5.5 -0.4 3.2 9.2 10.3 6 c 1 -0.2 1.6 -1.2 2.3 -2 L 460 123 c 0.8 0 1.5 -0.2 2.3 -0.4 l 38.3 5.7 l 27.7 11 h 0.3 l 0.6 76.8 c 11 11 11 27.7 21 38.3 c -0.3 19.7 -4 38 -6 57 l -0.8 1 l -4.8 13.2 v 0.6 c -13 5.7 -26.6 12 -40 17 c 2 -4 6.5 -5.6 9.5 -8.7 c -3.6 -0.6 -6 1 -9.5 1 c -0.2 -3.8 1.6 -7.8 1.2 -11.7 c -3.7 1.7 -6.8 8.3 -11.6 4 c 2.7 5.8 5.5 11 4.6 18 l -10.7 5.5 c 0 2 -1 4.7 -1 5.6 l 1 -1 c -2.8 5.3 -8.7 11 -14.6 14 c -11 6.5 -22.8 13 -33 19.3 l 2.5 -8.4 c 0.5 -1.7 0.2 -4 0.2 -5.7 c -2 2.6 -7.2 3.5 -6.4 6 c -3 -1.7 -9.2 -0.8 -10 -5.4 c -2.7 0.2 -0.7 2.4 -1.3 4 c 2.5 3.5 8.4 3.6 9 8.2 l -11.2 5.5 c -1 -1.4 -2.3 -4 -4.6 -5 c -1.7 4.3 2.7 8 0.3 13 l -1.3 0.5 l -18.7 24.5 c -1.6 6 -5 11.7 -7.5 17.8 c -3.4 -5 -8.5 4 -11.3 -2.5 c -1.3 7.4 7.5 2.7 11.3 4 c 2.4 6 0 11.3 -4 16 c 3.6 12.8 7.8 25.2 10.4 38.7 l 4.6 0.6 c 2 2.2 1.7 5 2 8.6 c -6.7 0.6 -12.6 0.2 -19.5 0.3 c -18.8 -13.5 -46.2 -7.5 -62.6 -21.7 c -8 -8.5 -6.8 -22.4 -15 -30 l -26.3 -48 c -3 -5 -6 -10 -9.6 -14.3 c -7 -14.8 -12 -31 -21.4 -44.3 c -9.7 -6.8 -21 -12.6 -25.7 -24 c -9.7 -1.3 -19.7 -3.8 -29 -4 c -12 -7 -11 7.7 -23 4 c -8 4.5 -6.3 17 -9 25.5 l -9 11.6 c -6 0.5 -11 -3.2 -16.4 -4 c -10.6 -13.2 -30.2 -12.3 -41.5 -25.4 l -17.5 -47.6 c -5 -7.6 -15.4 -9 -23 -13.7 l -22.8 -26.7 c -2.7 -1.2 -6.6 -0.3 -9.2 -1.5 L 2.6 229.4 c -2.2 -3 -3 -7 -2.6 -11.2 c 49.5 -1 99.2 -0.5 148.8 -1 c 0.8 -72.5 -1.5 -146 2.4 -217 c 42.2 0 84.3 -0.5 126.4 0" );


main {
  width: 550px;
  height: 510px;
}
div {
  display: none;
  position: absolute;
  will-change: motion-offset, offset-distance;
  //border-radius: 50%;
  width: 5px;
  height: 20px;
  background: rgb(80, 180, 250);
  motion-path: $path; //old spec
  offset-path: $path; //October 2016 spec
  
  &:nth-of-type(3n+2) {
    background: rgb(250,120,80);
  }
  &:nth-of-type(3n+3) {
    background: rgb(250,250,255);
  }
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  background: #16161c;
  background: radial-gradient(circle, #46465c, #16161c);
  color: #efefff;
  font-family: -apple-system, "Segoe UI", "Roboto", sans-serif;
}
main {
  transform: scale(.5);
  transform-origin: 50% 25%;
  animation: spin 10s 0s infinite alternate ease-in-out;
}

@keyframes spin {
  0% {
    transform: scale(.5) rotateZ(-12deg);
  }
  100% {
    transform: scale(.5) rotateZ(12deg);
  }
}

svg {
  width: 100%;
  opacity: .2;
  mix-blend-mode: additive;
  fill: none;
  stroke: #efefff;
  stroke-width: 3;
  position: absolute;
}
aside {
  color: #efefff;
  position: absolute;
  bottom: 0;
  padding: .5rem 1rem;
  line-height: 1.4;
  left: 0;
  text-align: center;
  width: 100%;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}
label {
  padding-bottom: .5rem;
}
input {
  width: 15rem;
  position: relative;
  &::before {
    content: '1x';
    position: absolute;
    left: -1rem;
    color: #efefff;
    opacity: .8;
  }
  &::after {
    content: attr(max) 'x';
    position: absolute;
    right: -1.6rem;
    color: #efefff;
    opacity: .8;
  }
}
@supports (motion-offset: 100%) or (offset-distance: 100%) {
  svg, aside {
    display: none;
  }
  div {
    display: block;
  }
  form {
    display: flex;
  }
}

* {
  box-sizing: border-box;
}
View Compiled
var rateRange = document.getElementById('playback-rate');
var shapers = [].slice.call(document.querySelectorAll('div'));
var DURATION = 100000;
var animations = [];

shapers.forEach(function(s, i) {
  var animation = s.animate([
    {motionOffset: 0, offsetDistance: 0},
    {motionOffset: '100%',offsetDistance: '100%'}
  ], {
    duration: DURATION,
    delay: -i / shapers.length * DURATION,
    iterations: Infinity
  });
  animations.push(animation);
});

rateRange.addEventListener('input', function(e) {
  var rate = parseFloat(e.currentTarget.value);
  console.log(rate);
  animations.forEach(function(animation) {
    animation.playbackRate = rate;
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.