<div class="container">
  <h1>Animated text
    <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
      <path d="M226,24.1C220.8,4.2,115,2.7,96.5,2C77.5,1.3,2.5,5,3,20.8C3.4,33.2,26.2,35.9,36.5,37s134.6,0,150,0s82-2,20-34"/>
    </svg>
  </h1>
</div>
  
<div class="container">
  <h1 id="clickable-header">Click on me!
    <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
      <path d="M226,24.1C220.8,4.2,115,2.7,96.5,2C77.5,1.3,2.5,5,3,20.8C3.4,33.2,26.2,35.9,36.5,37s134.6,0,150,0s82-2,20-34"/>
    </svg>
  </h1>
</div>

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

.container {
  display: flex;
  place-content: center;
}

h1 {
  display: inline;
  position: relative;
  font-family: 'Indie Flower', sans-serif;
  letter-spacing: 3px;
} 

svg {
  min-width: 110%;
  min-height: 100%;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

svg path {
  fill: none;
}

#animated-svg path {
  stroke: rebeccapurple;
  stroke-width: 2px;
}

#clickable-header {
  cursor: pointer;
}

#clickable-svg path {
  stroke: orange;
  stroke-width: 0;
}

const getDrawingParameters = (path) => {
  const length = path.getTotalLength();
  path.style.strokeDasharray = length;
  const drawingProperties = [
    { strokeDashoffset: length, easing: "ease-in"  },
    { strokeDashoffset: 0, offset: 0.15 }
  ];
  return drawingProperties;
};

const animatedPath = document.querySelector("#animated-svg path");

animatedPath.animate(
  getDrawingParameters(animatedPath), 
  {duration: 10000, iterations: Infinity}
);

const clickableHeader = document.querySelector("#clickable-header");

const clickablePath = document.querySelector("#clickable-svg path");

clickableHeader.addEventListener('click', () => {
  clickablePath.style.strokeWidth = "2px";
  clickablePath.animate(
    getDrawingParameters(clickablePath),
    {duration: 10000, iterations: 1}
  );
});