Create Creative Underlines Using SVG Path Animations – Underliner.js

Category: Animation , Javascript | June 24, 2019
Author: shadeed
Views Total: 64
Official Page: Go to website
Last Update: June 24, 2019
License: MIT

Preview:

Create Creative Underlines Using SVG Path Animations – Underliner.js

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);

You Might Be Interested In:


Leave a Reply