<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;
})
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.