line-art v0.0.4

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

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