SVG animation

by Grzegorz Matyszewski

HTML

<svg class="wind" width="147" height="100" viewBox="0 0 147 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M143.561 1C143.561 1 146 30.8409 146 50C146 69.1591 143.561 99 143.561 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M114.282 1C114.282 1 116.722 30.8409 116.722 50C116.722 69.1591 114.282 99 114.282 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M95.667 1C95.667 1 98.1069 30.8409 98.1069 50C98.1069 69.1591 95.667 99 95.667 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M70.292 1C70.292 1 72.7319 30.8409 72.7319 50C72.7319 69.1591 70.292 99 70.292 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M41.9893 1C41.9893 1 44.4291 30.8409 44.4291 50C44.4291 69.1591 41.9893 99 41.9893 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M13.6873 1C13.6873 1 16.1271 30.8409 16.1271 50C16.1271 69.1591 13.6873 99 13.6873 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M1 1C1 1 3.43986 30.8409 3.43986 50C3.43986 69.1591 1.00001 99 1.00001 99" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M120.407 26.5424C120.407 26.5424 121.597 48.5195 121.601 62.6139C121.605 76.831 120.407 98.9998 120.407 98.9998" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M77.3936 26.5424C77.3936 26.5424 78.5837 48.5195 78.5878 62.6139C78.5918 76.831 77.3936 98.9998 77.3936 98.9998" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M54.3535 26.7235C54.3535 26.7235 52.9379 48.6874 51.2761 62.6847C49.5998 76.8038 45.7897 98.679 45.7897 98.679" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M37.3799 26.5424C37.3799 26.5424 38.5701 48.5195 38.5741 62.6139C38.5781 76.831 37.3799 98.9998 37.3799 98.9998" stroke="#341210" stroke-width="2" stroke-linecap="round"/>
<path d="M12.3877 26.7235C12.3877 26.7235 10.9721 48.6874 9.31029 62.6847C7.63399 76.8038...

SCSS

svg { margin: 40px; overflow: visible; }
svg path { stroke-width: 1.5px; }
.wave path { fill: none; stroke: #341210; stroke-linecap: round; stroke-linejoin: round; }

TypeScript

const waves = function() {
  const lines = document.querySelectorAll('.wave path');
  const tl = gsap.timeline();
  [...lines].forEach((line, i) => {
    tl.fromTo(line, { scaleY: 0.8, transformOrigin: 'bottom' }, { scaleY: 1.4, duration: 0.6, repeat: -1, yoyo: true, ease: 'sine.inOut' }, i * 0.1);
  });
  return tl;
};

waves();


const wind = function() {
  const lines = document.querySelectorAll('.wind path');
  const tl = gsap.timeline();
  [...lines].forEach((line, i) => {
    tl.fromTo(line, { rotate: -10, transformOrigin: 'bottom center' }, { rotate: 10, duration: 1.5, repeat: -1, yoyo: true, ease: 'sine.inOut' }, i * 0.03);
  });
  return tl;
};

wind();