Everything here is made with only SVGs, CSS, and HTML.
SVGs allow you to embed CSS stylesheets. Each animation is no more than a series of CSS animations moving around or transforming basic SVG elements.
<svg
preserveAspectRatio="xMidYMid meet"
version="1.1"
viewBox="0 0 100 100"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<style>
/* <![CDATA[ */
.example1-rect {
animation:
example1-animation
2s
ease-in-out
infinite
alternate;
}
@keyframes example1-animation {
from {
transform:
translate(50%, 20%)
rotate(0);
}
to {
transform:
translate(50%, 80%)
rotate(180deg);
}
}
/* ]]> */
</style>
<rect
class="example1-rect"
x="-7.5"
y="-7.5"
height="15"
width="15"
/>
</svg>
In many cases animations are stacked on top of each other using groups of elements to create more complex motions.
<svg
preserveAspectRatio="xMidYMid meet"
version="1.1"
viewBox="-50 -50 100 100"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<style>
/* <![CDATA[ */
.example2-group {
animation:
example2-animation
10s
linear
infinite
reverse;
}
.example2-rect {
animation:
example2-animation
2.5s
linear
infinite;
}
@keyframes example2-animation {
from {
transform: rotate(360deg) translate(20%, 0);
}
to {
transform: rotate(0deg) translate(20%, 0);
}
}
/* ]]> */
</style>
<g class="example2-group">
<rect
class="example2-rect"
x="-7.5"
y="-7.5"
height="15"
width="15"
/>
</g>
</svg>
I also made liberal use animating dash-offsets on paths (see Jake Archibald's fantastic explanation on how this works).
<svg
preserveAspectRatio="xMidYMid meet"
version="1.1"
viewBox="-50 -50 100 100"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<style>
/* <![CDATA[ */
.example3-rect {
stroke: black;
stroke-width: 1%;
stroke-dasharray: 10, 6;
fill: none;
animation:
example3-animation
2.5s
linear
infinite;
}
.example3-rect:nth-of-type(odd) {
animation-direction: reverse;
}
@keyframes example3-animation {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 16%;
}
}
/* ]]> */
</style>
<rect
class="example3-rect"
x="-8"
y="-8"
height="16"
width="16"
/>
<rect
class="example3-rect"
x="-16"
y="-16"
height="32"
width="32"
/>
<rect
class="example3-rect"
x="-24"
y="-24"
height="48"
width="48"
/>
</svg>
For rendering SVGs I wrote my own tiny (read: horrible) renderer as I wanted a chance to play around with proxy objects.
While the majority of the designs underlying the animations are of my own creation, I did find a number of inspirations on places like pinterest and google image search. Any animations that are based on the work of others has attribution included inline, but I also wanted to call them all out in one place: