JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

<canvas id="canvas"></canvas>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var Node = function () {
    return {
        init: function (options) {
            if (!options) options = {};
            var defaults = {
                radius: 5,
                distance: 100,
                degreesIterator: utils.random(-0.6, 0.6),
                color: '#FF0000',
                parent: null,
                distanceVariability: 0,
                label: null
            };

            this.options = $.extend(defaults, options);

            // Position
            this.x = 0;
            this.y = 0;

            // Relationships
            this.children = [];

            // Settings
            this.degrees = options.degrees ? options.degrees : 0;
            this.color = this.options.color;
            this.colorIndex = 0;
            this.showLabel = false;

            // Child options
            if (this.options.parent !== null) {
                var d = this.options.parent.options.distance * 0.4;
                this.options.distanceVariability = utils.random(-d, d);
            }

            return this;
        },

        render: function (context, mouse) {
            this.degrees += this.options.degreesIterator;
            if (this.degrees > 359) this.degrees = 0;
            if (this.degrees < 0) this.degrees = 359;

            if (mouse.active && utils.mouseWithinBbox(this, mouse)) {
                this.showLabel = true;
                if (this.colorIndex < 100) this.colorIndex += 10;
                if (mouse.down) {
                    this.color = '#477400';
                } else {
                    this.color = utils.partialHover(this.options.color, this.colorIndex);
                }
            } else {
                this.showLabel = false;
                if (this.colorIndex > 0) {
                    this.colorIndex -= 10;
                    this.color = utils.partialHover(this.options.color, this.colorIndex);
                } else {
                    this.color = this.options.color;
             ...