Mesmerising mandalas – CSS animation examples

Once again, to realize this we have a tendency to communicate SVG to form our shapes, patterns and masks. Once we’ve our SVG, we have a tendency to target the cloaked darker circle with CSS and prepare it for animation.

.masking {
  transform: scale(0);
  transform-origin: 50% 50%;
  will-change: transform;
}

Next, we have a tendency to produce our keyframe animation. we have a tendency to solely ought to modification 2 properties here: the opacity and also the scale.

@keyframes scale {
  0%, 50% {
  opacity: 1;
  }
  80% {
  opacity: 0;
  }
  100% {
  transform: scale(1.4);
  opacity: 0;
  }
}

Lastly we’d like to use the animation to the mask;

.masking {
  ...
  animation: scale 4s linear infinite;
}

Demo | Download