section
	- for (var x = 0; x < 8; x++)
		svg#Layer_1(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', x='0px', y='0px', viewbox='0 0 64 64')
			g
				path.st0(d='M40.5,40c6.9,0,7.5,0.9,4.6,6.4c-0.5,0.9-1,1.8-1.6,2.5c-1.9,2.1-4.2,4.8-7,4c-2.7-0.9-0.9-4.3-1.3-6.6\
				C34.5,41.4,35.9,38.7,40.5,40z')
				path.st1(d='M30.9,46.6c-0.6,2.3,1,5.3-1.1,6.2c-2.4,1-4.5-1.4-6.4-3c-0.6-0.5-1.2-1.2-1.6-1.9c-1.5-2.2-2.6-4.6-2.2-7.4\
				c0.1-0.5,9.7-0.8,10.3-0.2C31.7,42.2,30,44.7,30.9,46.6z')
				path.st2(d='M30.5,32.2c-0.8,1,2.1,4.2-1.6,4.6c-2.7,0.3-7.7-5.6-7.8-8.9c-0.1-3.9,3-1.9,4.7-2.2\
				C31.1,24.6,31.1,28,30.5,32.2z')
				path.st3(d='M35.2,31.5c0.9-2-1.8-5.9,3-5.8c2.2,0,5.4-1.3,6.4,0.9c1.2,2.5-0.9,5.1-2.7,7c-1.5,1.7-3.4,3.9-5.8,3\
				C34.3,35.9,35.7,33.3,35.2,31.5z')
				path.st4(d='M30.7,18.1c-0.4,1,1.2,3.2-1.3,3.7c-1.9,0.4-6.1-4.6-6.1-7.1c0-2.9,2.3-1.5,3.6-1.8C31.1,12.2,31,15,30.7,18.1\
				z')
				path.st4(d='M35.5,18.1c-0.9-4.2,0.4-5.8,4-5.2c1.2,0.2,3.2-0.9,3.3,1.7c0.1,2.4-4.1,7.6-6,7.2\
				C34,21.3,35.9,18.9,35.5,18.1z')
				path.st5(d='M32.9,103.1')
				path.st6(d='M35.2,60.3c-0.1,1.8,0.6,4.2-2.5,3.8c-3.3-0.4-1.5-3.1-1.8-4.7c-0.2-1.4-0.6-3.5,2.1-3.4\
				C36.5,56.2,34.5,59,35.2,60.3z')
				path.st7(d='M36,7.1c-0.3,1.9-1.4,3-3.4,2.8c-1.7-0.2-2.7-1.4-2.6-3.1c0.1-2,1.4-3,3.3-2.8C35.1,4.1,36,5.3,36,7.1z')
View Compiled
.st0{fill:#08D0E9;}
.st1{fill:#08579A;}
.st2{fill:#088AE8;}
.st3{fill:#157CB3;}
.st4{fill:#0ED1EA;}
.st5{fill:#0C8CE8;}
.st6{fill:#0085E7;}
.st7{fill:#58A6EA;}

body {
	background: #FDFFFC;
}

section{
	height: 250px;
  width: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

svg {
	height: 100px;
	padding-bottom: 25px;
	position: absolute;
	transform-origin: 50% 100%;
	animation: magic 6s linear infinite alternate;
	mix-blend-mode: color;
	will-change: filter;
}

path {
	transform-origin: 50% 130%;
	animation: power 3s infinite cubic-bezier(0.770, 0.000, 0.175, 1.000);
	will-change: transform;
}


@for $i from 1 through 8{
  svg:nth-child(#{$i}) {
    transform: rotate($i * 45deg); 
		animation-delay: $i * 0.1s;
		
		@for $j from 1 through 10{
			path:nth-child(#{$j}) {
				//animation-delay: $j * 0.1s;
			}
		}
  }
}


@keyframes magic {
	50%{filter: hue-rotate(0deg) invert(100%);}
	100%{filter: hue-rotate(90deg) invert(0%);}
}

@keyframes power {
	100%{transform: rotate(360deg);}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.