Qnimate, an animated colorful voronoi diagram powered by d3.js

Posted on |

qnimate

An animated colorful Voronoi diagram
powered by d3.

Live demo

https://micooz.github.io/qnimate

Try it!

Install via npm:

1
2
$ git clone https://github.com/micooz/qnimate
$ cd qnimate && npm i

Run in development:

1
$ npm start

Build and bundle:

1
$ npm run build:prod

Usage

HTML:

<div id=""playground""></div>

js:

<script src=""qnimate.min.js""></script>

Qnimate will be exposed to window, create an instance of Qnimate, pass an option object and then call run():

1
2
3
4
5
6
7
8
9
document.addEventListener('DOMContentLoaded', function main() {
  var qnimate = new Qnimate({
    id: 'playground',
    width: 960,
    height: 500,
    vertices: 40
  });
  qnimate.run();
});

Acknowledgments

d3.voronoi - https://github.com/d3/d3-voronoi

Known issues

  • New triangle appears suddenly.
  • White triangle appears from time to time.

Any advice?

Send me issue.

0%