Polylion: SVG polygon animation


Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>.

@keyframes polyonlion-animation {
  to {
    transform: scale(1);
    opacity: 1;

.polyonlion > g polygon {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;

@for $i from 1 through $polyonlion-count-face {
  .polyonloaded .polyonlion > g#polyonlion-face polygon:nth-of-type(#{$i}) {
    animation: polyonlion-animation 100ms linear 1 forwards;
    animation-delay: 0.0275s * $i; // 0.0275s * 1, 0.0275s * 2, etc.

Polylion →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.