Line Art

Beautifully crafted SVG animations 👨‍🎨

Demo

A working demo

Install

Install via npm with

$ npm install --save line-art

Creating a line art

import LineArt from "line-art";
 
let art = LineArt.create({
    container: document.querySelector(".demo-1"),
    bgColor: "#5c469f",
    count: 100
});

API

LineArt.create(options)

Create a line art with the given options.

container: document.body, count: 50, shapeFactory: defaultShapeFactory, colorFactory: getRandomColor, autoPlay: true, animDurationRange: [5, 25], shapeWidthRange: [50, 100], shapeHeightRange: [5, 10]

Name	Type	Required	Default	Description
container	DOM Element	true	-	the art container
shapeFactory	Function	false	{ shapeFactory } from "src/defaults"	override this function if you want to control the art shapes, see src/defatuls.js for example
colorFactory	Function	false	{ getRandomColor } from "src/utils"	a function to generate a shape color`
autoPlay	Boolean	false	true	should the animation start playing once art created
animDurationRange	Array	false	[5, 25]	array of min and max values for animation duration
shapeWidthRange	Array	false	[50, 100]	array of min and max values for shape width
shapeHeightRange	Array	false	[5, 10]	array of min and max values for shape height

LineArt.destroy(art)

Destroy and dispose a given art resources.

Create your custom shape

If you want, you can control the animated shapes by creating your own shape and provide it from a shape factory.
All you need to do is inherit from the Shape class and implement the createElement method.
Here is an example:

// Circle.js
import { Shape, SVG_NS } from "line-art";
 
export default class Circle extends Shape {
    createElement() {
        // the `createElement` method is called after the initialization of your shape
        // you can access the data by...
        const { width, height, rotateDoration, translateDoration, color, x, y, rotate, cx, cy } = this.getDataProp();
        // or
        const shapeWidth = this.getDataProp("width");
        const shapeHeight = this.getDataProp("height");
 
        // then, create SVG element and ref it to `this._element`
        this._element = document.createElementNS(SVG_NS, "circle");
 
        this._element.setAttribute("cx", cx);
        this._element.setAttribute("cy", cy);
        this._element.setAttribute("r", height / 2);
 
        this.setSize(width, height);
 
        this.setFillColor(color);
    }
}
 
// In your options, override the `shapeFactory`
LineArt.create({
    ...
    shapeFactory: (options) => new Circle(options),
    ...
})

Todo

• Add tests
• Add options validator
• Add ts typings
• Add more examples
• Add more docs

License

This project is licensed under the MIT License - see the LICENSE file for details