Create Creative Underlines Using SVG Path Animations – Underliner.js

Preview:

Description:

Underliner.js is a small script which applies creative, animated underlines to elements on hover by using JavaScript and SVG path animations.

How to use it:

Create an SVG for the underlines.

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00bc9b" />
      <stop offset="100%" stop-color="#5eaefd" />
    </linearGradient>
    <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#5eaefd" />
      <stop offset="100%" stop-color="#00bc9b" />
    </linearGradient>
  </defs>
</svg>

Load the Underliner.js script right before the closing body tag.

<script src="underliner.js"></script>

Apply the underlines to the target elements. Available parameters:

• selector: target element
• color1: color 1
• color2: color 2
• thickness: thickness 1
• thickness: thickness 2
• strokeLinecap: edges of an SVG path
• rtl: right to left. true of false

// new Underliner(selector, color1, color2, thickness1, thickness2, strokeLinecap, rtl);
new Underliner(".element", "url(#gradient)", "url(#gradient2)", 7, 12, "round", false);