I've made this little animation using SVG, CSS-keyframes and a bit of Sass.
html,
body,
.wrap {
height: 100%;
}
body {
background-color: #efefef;
}
svg {
max-width: 500px;
width: 100%;
height: 400px;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
circle {
position: absolute;
fill: transparent;
stroke-width: 50px;
stroke-dasharray: 31.5;
transform-origin: 50% 50%;
}
circle:nth-of-type(1) {
stroke: #00aadd;
z-index: 0;
animation: turn-circle 5s linear infinite;
}
circle:nth-of-type(2) {
stroke: #00ab02;
z-index: 1;
animation: turn-circle 4s linear infinite;
}
circle:nth-of-type(3) {
stroke: #0053FF;
z-index: 2;
animation: turn-circle 3s linear infinite;
}
@keyframes turn-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="wrap">
<?xml version="1.0" encoding="utf-8" ?>
<svg version="1.1">
<circle cx="150" cy="150" r="100" />
<circle cx="330" cy="150" r="100" />
<circle cx="240" cy="220" r="100" />
</svg>
</div>
Here's the uncompiled Sass-code:
$backgroundColor:#efefef;
$blue:#0053FF;
$green:#00ab02;
$cyan:#00aadd;
@mixin setCircle ($i:1,
$color:blue,
$zIndex:0,
$animationDuration:3s) {
circle: nth-of-type(# {
$i
}
) {
stroke: $color;
z-index: $zIndex;
animation: turn-circle # {
$animationDuration
}
s linear infinite;
}
}
html,
body,
.wrap {
height: 100%;
}
body {
background-color: $backgroundColor;
}
svg {
max-width: 500px;
width: 100%;
height: 400px;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
circle {
position: absolute;
fill: transparent;
stroke-width: 50px;
stroke-dasharray: 31.5;
transform-origin: 50% 50%;
}
@include setCircle (1,
$cyan,
0,
5);
@include setCircle (2,
$green,
1,
4);
@include setCircle (3,
$blue,
2,
3);
@keyframes turn-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
It works and looks alright but could surely be improved.
Therefore my questions:
Could one improve the movement of the wheels in a way that it looks better? More natural?
How could the responsiveness be improved? Currently my main issue.
Suggestions concerning the design? I'm an amateur in that field.