<p id="text">
  <svg viewBox="0 0 100 20" width="100">
    <path d="M0,2 30,2 50,2 70,2 100,2" stroke="red" stroke-width="2" fill="none" id="path" />
  </svg>
  lorem
</p>

* {
  padding: 0;
  box-sizing: border-box;
}

p svg {
  display: block;
}

p svg path {
  transition: 0.14s linear;
}

p {
  line-height: 0.7;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

text.onmousemove = function () {
  path.setAttribute("d", "M0,2 30,2 50,20 70,2 100,2");
};

text.onmouseout = function () {
  path.setAttribute("d", "M0,2 30,2 50,2 70,2 100,2");
};