“Spinning wheels” - Animated spinner with SVG and Sass-CSS

Question

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.

Answer 1

I totaly refactored your code (CSS and HTML). I wont address all the modifications and focus on the main ones :

Browser support

The is an issue in firefox when a percentage transform-origin is set on an svg element.If you test your code in FFF, you will see the circles are rotating around the center of the SVG element. To get around this, I put each circle in a seperate svg element and set the rotation on the svg element itself.

Horizontal and vertical centering

I changed the absolute positionning technique to flexbox as it is more flexible espacialy as you plan on making this responsive.

Responsive

I use the first svg to set the size of the .wrap element. The other ones adapt their size according to the first one with absolute positioning and percentage sizes.

I also tidied up the code

• remove positioning on the circle element
• removed the z-index as the layers are set with the order of the elements in the markup

html, body { height: 100%; }
body { 
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #efefef; 
}
.wrap{
  position:relative;
  width:100%;
  max-width:500px;
  overflow:hidden;
  padding:10% 0;
 }
svg {
  width: 70%;
  height:auto;
  position: absolute;
  animation: turn-circle 5s linear infinite;
  fill: transparent;
  stroke-width: 50;
  stroke-dasharray: 31.5;
}
svg:nth-of-type(1){
  position:static;
  margin:-15% 0 0 -5%;
  stroke: #00aadd;
}
svg:nth-of-type(2) {
  stroke: #00ab02;
  top:0;
  right:-5%;
  animation-duration:4s;
}
svg:nth-of-type(3) {
  stroke: #0053FF;
  top:20%; left:15%;
  animation-duration:3s;
}
@keyframes turn-circle {
  to { -weblit-transform: rotate3d(0,0,1,360deg);
               transform: rotate3d(0,0,1,360deg);}
}

<div class="wrap">
  <svg version="1.1" viewbox="0 0 300 300">
    <circle cx="150" cy="150" r="100" />
  </svg>
  <svg version="1.1" viewbox="0 0 300 300">
    <circle cx="150" cy="150" r="100" />
  </svg>
  <svg version="1.1" viewbox="0 0 300 300">
    <circle cx="150" cy="150" r="100" />
  </svg>  
</div>