HFA animations

by Grzegorz Matyszewski

HTML

<svg class="zoom" width="220px" height="140px" viewBox="0 0 220 140">
<polygon points="107.5,136 6,70 107.5,4 214,70 "/>
<polygon points="107.9,124 24,70 107.9,16 196,70 "/>
<polygon points="108.4,112 42,70 108.4,28 178,70 "/>
<polygon points="108.8,100 60,70 108.8,40 160,70 "/>
<polygon points="109.2,88 78,70 109.2,52 142,70 "/>
<polygon points="109.7,77 96,70 109.7,63 124,70 "/>
<polygon points="109.7,77 96,70 109.7,63 124,70 "/>
<g>
	<path fill="#232323" d="M82.8,45.2c0-0.2,0.2-0.3,0.3-0.3h0.4l10.6,13.8c0,0,0,0,0,0V45.5c0-0.2,0.1-0.3,0.3-0.3h0.4
		c0.2,0,0.3,0.1,0.3,0.3v15.1c0,0.2-0.2,0.3-0.4,0.3h-0.3c0,0-0.2-0.1-10.7-13.9h0v13.4c0,0.2-0.1,0.3-0.3,0.3h-0.4
		c-0.2,0-0.3-0.1-0.3-0.3V45.2z"/>
	<path fill="#232323" d="M106.6,44.9c4.4,0,8,3.5,8,8c0,4.4-3.5,7.9-8,7.9c-4.4,0-7.9-3.5-7.9-7.9C98.7,48.5,102.2,44.9,106.6,44.9z
		 M106.6,59.8c3.9,0,7-3.1,7-6.9s-3.1-7-7-7s-7,3.1-7,7S102.7,59.8,106.6,59.8z"/>
	<path fill="#232323" d="M116.6,45.5c0-0.2,0-0.3,0.2-0.3h0.5c0.1,0,0.2,0.1,0.3,0.2l3.7,12.9c0,0,0,0,0,0l3.9-13.2
		c0-0.1,0.2-0.2,0.3-0.2h0c0.1,0,0.3,0.1,0.3,0.2l3.9,13.2c0,0,0,0,0,0l3.7-12.9c0-0.1,0.1-0.2,0.3-0.2h0.5c0.2,0,0.3,0.1,0.2,0.3
		l-4.4,15.2c0,0.1-0.1,0.2-0.2,0.2h-0.2c-0.1,0-0.2,0-0.2-0.2l-4-13.4h0l-4,13.4c0,0.1-0.1,0.2-0.2,0.2h-0.2c-0.1,0-0.2-0.1-0.2-0.2
		L116.6,45.5z"/>
	<path fill="#232323" d="M65.6,70.5c0-0.2,0.1-0.3,0.3-0.3h4.7c2.7,0,5,2.2,5,4.9c0,2.8-2.2,5-5,5h-4v5.2c0,0.2-0.1,0.3-0.4,0.3
		h-0.4c-0.2,0-0.3-0.1-0.3-0.3V70.5z M70.6,79.1c2.2,0,4-1.8,4-4c0-2.2-1.8-3.9-4-3.9h-3.9v7.9H70.6z"/>
	<path fill="#232323" d="M78.7,70.5c0-0.2,0.1-0.3,0.3-0.3h0.5c0.1,0,0.3,0.1,0.3,0.3v14.2h7c0.3,0,0.3,0.1,0.3,0.3v0.4
		c0,0.2-0.1,0.2-0.3,0.2H79c-0.2,0-0.3-0.1-0.3-0.3V70.5z"/>
	<path fill="#232323" d="M88,85.4L94.8,70c0-0.1,0.2-0.2,0.3-0.2h0.1c0.1,0,0.2,0,0.3,0.2l6.7,15.3c0,0.1,0,0.3-0.2,0.3h-0.6
		c-0.2,0-0.3-0.1-0.3-0.2l-1.8-4.1h-8.4l-1.8,4.1c0,0.1-0.2,0.2-0.3,0.2h-0.6C88,85.6,87.9,85.5,88,85.4z M98.9,80.5l-3.8-8.9h0
		l-3.8,8.9H98.9z"/>
	<path fill="#232323"...

SCSS

svg polygon {
  fill: none;
  stroke: #232323;
  stroke-miterlimit: 10;
  transform-origin: 110px 70px;
}

svg.zoomblack polygon,
svg.zoom polygon {
  vector-effect: non-scaling-stroke;
  &:nth-of-type(2) { animation: zoomBiggest 0.5s infinite linear; }
  &:nth-of-type(3) { animation: zoomBig 0.5s infinite linear; }
  &:nth-of-type(4) { animation: zoomMedium 0.5s infinite linear; }
  &:nth-of-type(5) { animation: zoomSmall 0.5s infinite linear; }
  &:nth-of-type(6) { animation: zoomSmallest 0.5s infinite linear; }
}

@keyframes zoomBiggest {
  from { transform: scaleX(1) scaleY(1); }
   to { transform: scaleX(208 / 172 * 1) scaleY(132 / 108 * 1); }
}
@keyframes zoomBig {
  from { transform: scaleX(1) scaleY(1); }
  to { transform: scaleX(172 / 136 * 1) scaleY(108 / 84 * 1); }
}
@keyframes zoomMedium {
  from { transform: scaleX(1) scaleY(1); }
  to { transform: scaleX(136 / 100 * 1) scaleY(84 / 60 * 1); }
}
@keyframes zoomSmall {
  from { transform: scaleX(1) scaleY(1); }
  to { transform: scaleX(100 / 64 * 1) scaleY(60 / 36 * 1); }
}
@keyframes zoomSmallest {
  from { transform: scaleX(1) scaleY(1); }
  to { transform: scaleX(64 / 28 * 1) scaleY(36 / 12 * 1); }
}

svg.antz {
  overflow: visible;
  polygon:first-child { fill: #232323; }
  polygon:last-child { stroke-dasharray: 4; animation: antz 0.4s linear infinite; transform: scale(1.06); }
  g path { fill: #fff; }
}

@keyframes antz {
  from { stroke-dashoffset: 8px; }
  to { stroke-dashoffset: 0; }
}

svg.zoomblack {
  polygon {
    stroke: rgba(white, 0.3);
    /* stroke-dasharray: 1px 6px; */
    &:first-child { fill: #232323; }
  }
  g path { fill: #fff; }
}