Chromata is a small tool written in JavaScript which can turn any image into a unique, animated artwork. Path finders are seeded on a canvas and independently trace their own path through the image, reading the colour data of each pixel and altering their course based on a set of configurable rules.

Quick Start

1. Download the Chromata script

Download chromata.min.js

2. Include it in your HTML document

        <script src="path/to/chromata.min.js"></script>

3. Create a new Chromata instance

        var imageElement = document.querySelector('.my-image');
        var chromata = new Chromata(imageElement);

3. Start it



Chromata makes use of canvas blend modes, which are available in all major browsers except Internet Explorer. It will still run in IE, but won't look right.


new Chromata(imageElement, [options])

Create a new Chromata instance. imageElement must be a reference to an <img> element. options is an object containing configuration settings for the instance. See next section for a full explanation of the options available.


Start the animation, hiding the source image element and replacing it with a canvas element.


Stop the animation. Returns the current iteration (frame) of the animation.


Toggle the play state animation.


Stop the animation, restore the source image element and remove the canvas from the DOM.


        // default options
        var defaults = {
            colorMode: 'color',
            compositeOperation: 'lighten',
            iterationLimit: 0,
            key: 'low',
            lineWidth: 2,
            lineMode: 'smooth',
            origin: ['bottom'],
            outputSize: 'original',
            pathFinderCount: 30,
            speed: 7,
            turningAngle: Math.PI