html lines

SVG is the greatest thing for drawing objects in browsers and with it there are endless possibilities. This has nothing to do with SVG. Sometimes all you want is to draw a simple line using an HTML element to connect two elements on a web page. This is the simplest solution for simple problem.

This lightweight and dependency free JavaScript module helps you draw lines in HTML. By anchoring each end of the line to a specific DOM element, the lines become a part of the page. When the layout adjusts simply redraw the line. Use CSS to style the lines and JavaScript to manipulate them.

How to draw a basic line

This is a simple example of how to draw a line across the entire page. Try pasting this code into the browser console.

var anchor1 = LINES.createAnchor({
    el: document.body,
    xOrigin: 'left',
    yOrigin: 'top',
    xOffset: 6,
    yOffset: 6
});

var anchor2 = LINES.createAnchor({
    el: document.body,
    xOrigin: 'right',
    yOrigin: 'bottom',
    xOffset: 6,
    yOffset: 6
});

LINES.createLine(anchor1, anchor2, {
    name: 'example',
    stroke: 10
});

Realistic use cases

An interactive quiz: Match each mountain with its elevation.

Not recommended

An electronic signature tool. The effect is better in Firefox.

See the Pen bNKNJV by Jon Cuthbert (@cuth) on CodePen.

Getting more creative

Drag the Github icon to visit the documentation or the source. (Example using dragger.)