Skip to content
Underliner is a simple script that can help in creating custom link underline effects with SVG paths.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
styles
.gitignore
README.md
index.html

README.md

Underliner.js

Underliner is a simple script that can help in creating custom link underline effects with SVG paths. I wrote an article about it.

Usage

var underliner = new Underliner(
	selector, 
	path1_color, 
	path2_color, 
	path1_thickness, 
	path2_thickness, 
	strokeLinecap, 
	RTL);

selector: an array of links.

path1_color, path2_color: a single color, or a gradient with SVG.

path1_thickness, path2_thickness: the stroke width of a path

strokeLinecap: controlling how edges of a path are shown

RTL: a boolean variable to change the direction of the animation

When assigning Underline to a list of links, it will add an SVG with two paths. Each path will have an ID to style it with CSS.

.c-nav__item {
	svg {
		pointer-events: none;
        transition: 0.5s;
	}

	path {
        transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s, opacity 0.5s;
        
        &:last-child {
            opacity: 0.2;
        }
	}

	a:hover + svg,
	a:focus + svg {
		opacity: 1;

		path {
			stroke-dashoffset: 0;	
		}
	}
}

#path1 {
	opacity: 0.25;
}

Checkout this Codepen demo.

You can’t perform that action at this time.