Modus Underline - Animated SVG Underline Library

A lightweight, dependency-free library for creating beautiful animated SVG underlines with multiple trigger options.

Demo

Features

- 9 unique underline styles that are randomly selected
- Lightweight with no dependencies - pure vanilla JavaScript
- Multiple trigger options: hover, scroll, click, focus, and load
- Smooth CSS-powered draw-in animations
- Keyboard accessible with focus support
- Simple HTML data attributes for easy setup
- Underlines persist after being drawn (except click triggers)
- Staggered animations with configurable delays

Installation

$3

Install via npm:
``

bash

npm install modus-underline-js





Or via yarn:

bash

yarn add modus-underline-js





Or via pnpm:

bash

pnpm add modus-underline-js





$3



Include directly from a CDN (unpkg or jsDelivr):

html





Or using jsDelivr:

html





Requirements



- Modern browser with ES6+ support

- CSS Custom Properties (CSS Variables) support

- Intersection Observer API (for scroll triggers)

- Fetch API (for loading SVG symbols - though embedded symbols are used by default)



All modern browsers (Chrome, Firefox, Safari, Edge) are supported.



Quick Start



$3



Include the CSS and JavaScript files in your HTML:

html







  





  

    True creativity thrives when 

    expression guides the vision.





The library auto-initializes when loaded as a script tag.



$3



Import in your JavaScript:

javascript

import { initRandomUnderlines } from 'modus-underline-js';

import 'modus-underline-js/dist/underline.css';



// Initialize (optional - auto-initializes if script tag is used)

initRandomUnderlines();





$3



Works with any modern bundler:

javascript

// In your main JS file

import { initRandomUnderlines } from 'modus-underline-js';

import 'modus-underline-js/dist/underline.css';



// Initialize when DOM is ready

document.addEventListener('DOMContentLoaded', () => {

  initRandomUnderlines();

});





$3



TypeScript definitions are included:

typescript

import { initRandomUnderlines } from 'modus-underline-js';

import 'modus-underline-js/dist/underline.css';



initRandomUnderlines();





$3



Add the

data-draw-line

 attribute to any element you want to underline:

html



  True creativity thrives when 

  expression guides the vision.





That's it! The library automatically:

- Injects SVG symbols into the DOM

- Creates the inner span element (

data-draw-line-box

)

- Initializes all underline functionality



No manual setup required!



Triggers



$3



The simplest trigger - underlines appear on mouse hover and stay visible:

html

hover me





Note: When no

data-triggers

 attribute is specified, hover is the default behavior.



$3



Animate underlines sequentially on page load with custom delays:

html



  First appears immediately,

  second after 300ms,

  third after 600ms.





Attributes:

-

data-triggers="load"

 - Triggers on page load

-

data-load-delay="300"

 - Delay in milliseconds (0 = immediate)



Tip: Combine with

hover to allow re-triggering on hover: data-triggers="load,hover"





$3



Animate underlines when elements scroll into view:

html



  

    Scroll down to see 

    animated underlines





Advanced Scroll Options:

html



first

second

third





instant appearance





clears on scroll out





Attributes:

-

data-scroll-delay - Delay in milliseconds before animating on scroll (default: 0

)

-

data-scroll-animate="false"

 - Show immediately without animation

-

data-scroll-clear="true"

 - Remove underline when element leaves viewport



Scroll Threshold: Elements trigger when 30% visible in viewport.



$3



Trigger underlines on click:

html

click me





Behavior: Underline appears on click and auto-clears after 2 seconds.



$3



Keyboard-accessible underlines for better accessibility:

html

focusable element





Usage: Use Tab key to navigate and see underlines appear on focus.



Note: The library automatically adds

tabindex="0"

 if not present.



$3



Combine multiple triggers for flexible interactions:

html



multiple triggers





load then hover





scroll or focus





$3



Programmatically trigger underlines from JavaScript:

html





This word will be underlined when you click the button.





Using ES Modules:

javascript

import { triggerUnderline, clearUnderline } from 'modus-underline-js';



// Trigger with animation (default)

triggerUnderline('#target-word');



// Trigger without animation

triggerUnderline('#target-word', { animate: false });



// Clear underline

clearUnderline('#target-word');





API:

-

triggerUnderline(selector, options)

 - Trigger underline on an element

  -

selector

: CSS selector string or DOM element

  -

options.animate: Boolean (default: true

) - Whether to animate

-

clearUnderline(selector)

 - Clear underline from an element



Complete Example



Here's a complete example showcasing multiple features:

html







  





  

  

    

      True creativity thrives when 

      expression guides the vision, but imagination shapes the 

      journey.

    

  



  

  

    

      Scroll to see 

      scroll-triggered underlines

    

    

      These words animate when entering viewport: 

      amazing, 

      beautiful, 

      creative

    

  



  

  

    

      Hover or click to trigger





Configuration



$3



Customize SVG path and container selector:

javascript

import { initRandomUnderlines } from 'modus-underline-js';



// Use custom SVG file from URL (optional)

initRandomUnderlines({

  svgPath: '/custom/path/to/underlines.svg',

  containerSelector: '.my-symbol-container'

});



// Default configuration (auto-initializes)

// Uses embedded SVG symbols - no file needed!

// Automatically creates container if it doesn't exist





$3



Customize animation timing, easing, and offset:

css

:root {

  / Animation speed (doubled for draw-in duration) /

  --underline-speed: 0.24s;

  

  / Easing function /

  --underline-easing: ease-in-out;

  

  / Distance from text baseline /

  --underline-offset: 12px;

}



/ Customize underline appearance /

.underline-svg path {

  stroke-width: 8; / Thinner line /

  stroke: #ff6b6b; / Custom color /

}





$3



Create your own underline styles by editing or replacing

underlines.svg

html





Then reference your custom file:

javascript

initRandomUnderlines({

  svgPath: '/path/to/your/custom-underlines.svg'

});





API Reference



$3



Initialize the underline system.



Parameters:

-

options.svgPath (string, optional) - Path to SVG symbols file. If not provided, uses embedded SVG symbols (no file needed). Default: null

options.containerSelector (string, optional) - CSS selector for symbol container. Automatically created if it doesn't exist. Default: '.symbol-library'





Returns:

Promise





$3



Manually load SVG symbol library. Automatically creates container if it doesn't exist.



Parameters:

-

svgPath (string, optional) - Path to SVG symbols file. If not provided, uses embedded SVG symbols. Default: null

containerSelector (string, optional) - CSS selector for symbol container. Default: '.symbol-library'





Returns:

Promise





Data Attributes Reference



| Attribute | Values | Description |

|-----------|--------|-------------|

|

data-draw-line

 | (required) | Marks element as underline target. Inner span is auto-generated. |

|

data-triggers | hover, scroll, click, focus, load (comma-separated) | Trigger types. Default: hover

 |

|

data-load-delay | number (milliseconds) | Delay for load trigger. Default: 0

 |

|

data-scroll-delay | number (milliseconds) | Delay before animating on scroll. Default: 0

 |

|

data-scroll-animate | true, false | Animate on scroll. Default: true

 |

|

data-scroll-clear | true, false | Clear when leaving viewport. Default: false` |

Behavior Notes

- Persistent Underlines: Once drawn, underlines remain visible (except for click triggers which auto-clear)
- Random Selection: Each trigger randomly selects from available underline styles
- Sequential Selection: Styles cycle through variants to ensure variety
- Scroll Threshold: Scroll triggers activate when element is 30% visible
- Auto-initialization: Library auto-initializes when loaded as a script tag

Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Modern mobile browsers

Requires:
- ES6+ support
- CSS Custom Properties (CSS Variables)
- Intersection Observer API (for scroll triggers)
- Fetch API (for loading SVG symbols)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Modus Underline - Animated SVG Underline Library

A lightweight, dependency-free library for creating beautiful animated SVG underlines with multiple trigger options.

Demo

View Live Demo →

Features

Installation

$3

Install via npm:
``

bash

npm install modus-underline-js





Or via yarn:

bash

yarn add modus-underline-js





Or via pnpm:

bash

pnpm add modus-underline-js





$3



Include directly from a CDN (unpkg or jsDelivr):

html





Or using jsDelivr:

html





Requirements



- Modern browser with ES6+ support

- CSS Custom Properties (CSS Variables) support

- Intersection Observer API (for scroll triggers)

- Fetch API (for loading SVG symbols - though embedded symbols are used by default)



All modern browsers (Chrome, Firefox, Safari, Edge) are supported.



Quick Start



$3



Include the CSS and JavaScript files in your HTML:

html







  





  

    True creativity thrives when 

    expression guides the vision.





The library auto-initializes when loaded as a script tag.



$3



Import in your JavaScript:

javascript

import { initRandomUnderlines } from 'modus-underline-js';

import 'modus-underline-js/dist/underline.css';



// Initialize (optional - auto-initializes if script tag is used)

initRandomUnderlines();





$3



Works with any modern bundler:

javascript

// In your main JS file

import { initRandomUnderlines } from 'modus-underline-js';

import 'modus-underline-js/dist/underline.css';



// Initialize when DOM is ready

document.addEventListener('DOMContentLoaded', () => {

  initRandomUnderlines();

});





$3



TypeScript definitions are included:

typescript

import { initRandomUnderlines } from 'modus-underline-js';

import 'modus-underline-js/dist/underline.css';



initRandomUnderlines();





$3



Add the

data-draw-line

 attribute to any element you want to underline:

html



  True creativity thrives when 

  expression guides the vision.





That's it! The library automatically:

- Injects SVG symbols into the DOM

- Creates the inner span element (

data-draw-line-box

)

- Initializes all underline functionality



No manual setup required!



Triggers



$3



The simplest trigger - underlines appear on mouse hover and stay visible:

html

hover me





Note: When no

data-triggers

 attribute is specified, hover is the default behavior.



$3



Animate underlines sequentially on page load with custom delays:

html



  First appears immediately,

  second after 300ms,

  third after 600ms.





Attributes:

-

data-triggers="load"

 - Triggers on page load

-

data-load-delay="300"

 - Delay in milliseconds (0 = immediate)



Tip: Combine with

hover to allow re-triggering on hover: data-triggers="load,hover"





$3



Animate underlines when elements scroll into view:

html



  

    Scroll down to see 

    animated underlines





Advanced Scroll Options:

html



first

second

third





instant appearance





clears on scroll out





Attributes:

-

data-scroll-delay - Delay in milliseconds before animating on scroll (default: 0

)

-

data-scroll-animate="false"

 - Show immediately without animation

-

data-scroll-clear="true"

 - Remove underline when element leaves viewport



Scroll Threshold: Elements trigger when 30% visible in viewport.



$3



Trigger underlines on click:

html

click me





Behavior: Underline appears on click and auto-clears after 2 seconds.



$3



Keyboard-accessible underlines for better accessibility:

html

focusable element





Usage: Use Tab key to navigate and see underlines appear on focus.



Note: The library automatically adds

tabindex="0"

 if not present.



$3



Combine multiple triggers for flexible interactions:

html



multiple triggers





load then hover





scroll or focus





$3



Programmatically trigger underlines from JavaScript:

html





This word will be underlined when you click the button.





Using ES Modules:

javascript

import { triggerUnderline, clearUnderline } from 'modus-underline-js';



// Trigger with animation (default)

triggerUnderline('#target-word');



// Trigger without animation

triggerUnderline('#target-word', { animate: false });



// Clear underline

clearUnderline('#target-word');





API:

-

triggerUnderline(selector, options)

 - Trigger underline on an element

  -

selector

: CSS selector string or DOM element

  -

options.animate: Boolean (default: true

) - Whether to animate

-

clearUnderline(selector)

 - Clear underline from an element



Complete Example



Here's a complete example showcasing multiple features:

html







  





  

  

    

      True creativity thrives when 

      expression guides the vision, but imagination shapes the 

      journey.

    

  



  

  

    

      Scroll to see 

      scroll-triggered underlines

    

    

      These words animate when entering viewport: 

      amazing, 

      beautiful, 

      creative

    

  



  

  

    

      Hover or click to trigger





Configuration



$3



Customize SVG path and container selector:

javascript

import { initRandomUnderlines } from 'modus-underline-js';



// Use custom SVG file from URL (optional)

initRandomUnderlines({

  svgPath: '/custom/path/to/underlines.svg',

  containerSelector: '.my-symbol-container'

});



// Default configuration (auto-initializes)

// Uses embedded SVG symbols - no file needed!

// Automatically creates container if it doesn't exist





$3



Customize animation timing, easing, and offset:

css

:root {

  / Animation speed (doubled for draw-in duration) /

  --underline-speed: 0.24s;

  

  / Easing function /

  --underline-easing: ease-in-out;

  

  / Distance from text baseline /

  --underline-offset: 12px;

}



/ Customize underline appearance /

.underline-svg path {

  stroke-width: 8; / Thinner line /

  stroke: #ff6b6b; / Custom color /

}





$3



Create your own underline styles by editing or replacing

underlines.svg

html





Then reference your custom file:

javascript

initRandomUnderlines({

  svgPath: '/path/to/your/custom-underlines.svg'

});





API Reference



$3



Initialize the underline system.



Parameters:

-

options.svgPath (string, optional) - Path to SVG symbols file. If not provided, uses embedded SVG symbols (no file needed). Default: null

options.containerSelector (string, optional) - CSS selector for symbol container. Automatically created if it doesn't exist. Default: '.symbol-library'





Returns:

Promise





$3



Manually load SVG symbol library. Automatically creates container if it doesn't exist.



Parameters:

-

svgPath (string, optional) - Path to SVG symbols file. If not provided, uses embedded SVG symbols. Default: null

containerSelector (string, optional) - CSS selector for symbol container. Default: '.symbol-library'





Returns:

Promise





Data Attributes Reference



| Attribute | Values | Description |

|-----------|--------|-------------|

|

data-draw-line

 | (required) | Marks element as underline target. Inner span is auto-generated. |

|

data-triggers | hover, scroll, click, focus, load (comma-separated) | Trigger types. Default: hover

 |

|

data-load-delay | number (milliseconds) | Delay for load trigger. Default: 0

 |

|

data-scroll-delay | number (milliseconds) | Delay before animating on scroll. Default: 0

 |

|

data-scroll-animate | true, false | Animate on scroll. Default: true

 |

|

data-scroll-clear | true, false | Clear when leaving viewport. Default: false` |

modus-underline-js

Modus Underline - Animated SVG Underline Library

Demo

Features

Installation

$3

$3

Requirements

Quick Start

$3

True creativity thrives when expression guides the vision.

$3

$3

$3

$3

True creativity thrives when expression guides the vision.

Triggers

$3

$3

First appears immediately, second after 300ms, third after 600ms.

$3

$3

$3

$3

$3

Complete Example

True creativity thrives when expression guides the vision, but imagination shapes the journey.

Scroll to see scroll-triggered underlines

Configuration

$3

$3

$3

API Reference

$3

$3

Data Attributes Reference

Behavior Notes

Browser Support

License

Contributing

modus-underline-js

Modus Underline - Animated SVG Underline Library

Demo

Features

Installation

$3

$3

Requirements

Quick Start

$3

True creativity thrives when expression guides the vision.

$3

$3

$3

$3

True creativity thrives when expression guides the vision.

Triggers

$3

$3

First appears immediately, second after 300ms, third after 600ms.

$3

$3

$3

$3

$3

Complete Example

True creativity thrives when expression guides the vision, but imagination shapes the journey.

Scroll to see scroll-triggered underlines

Configuration

$3

$3

$3

API Reference

$3

$3

Data Attributes Reference

Behavior Notes

Browser Support

License

Contributing

True creativity thrives when
expression guides the vision.

True creativity thrives when
expression guides the vision.

First appears immediately,
second after 300ms,
third after 600ms.

True creativity thrives when
expression guides the vision, but imagination shapes the
journey.

Scroll to see
scroll-triggered underlines

True creativity thrives when
expression guides the vision.

True creativity thrives when
expression guides the vision.

First appears immediately,
second after 300ms,
third after 600ms.

True creativity thrives when
expression guides the vision, but imagination shapes the
journey.

Scroll to see
scroll-triggered underlines