JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="400" height="400"></canvas>








<p id="attribution">Made by Rob Hawkes – <a href="http://twitter.com/robhawkes">My Twitter</a> – <a href="http://rawkes.com/blog/2010/09/07/recreating-googles-bouncing-balls-logo-in-html5-canvas">Blog Post</a> - <a href="http://twitter.com/?status=RT%20%40robhawkes%3A%20So%20I%20reconstructed%20the%20Google%20bouncing%20balls%20logo%20in%20HTML5%20canvas.%20What%20do%20you%20think%3F%20http%3A%2F%2Frawk.es%2Fr">Tweet This</a></p>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    color: #ccc;
    font-family: Helvetica Neue, Verdana, sans-serif;
    font-size: 20px;
}

p {
    line-height: 1.5em;
    list-style: none;
}
p a, p a:visited {
    color: #56bff6;
    text-decoration: none;
}

    p a:hover {
        border-bottom: 1px solid #56bff6;
    }

canvas, section {
    display: block;
}

#c {
    position: absolute;
}

#attribution {
    bottom: 40px;
    position: absolute;
    right: 40px;
}

JavaScript

$(function() {
    var canvas = $("#c");
    var canvasHeight;
    var canvasWidth;
    var ctx;
    var dt = 0.1;

    var pointCollection;

    function init() {
        updateCanvasDimensions();

          
        Point points [] = new Point [20];
        int sum = 0;
        for(int i = 0; i < 20; i ++){
                points[i] = new Point(x+sum, y*sum, 0.0, 9,"#2a56ea");
                sum =+ 2;
        }
        var g = points;
        //var g = [new Point(202, 78, 0.0, 9, "#ed9d33"), new Point(348, 83, 0.0, 9, "#d44d61"), new Point(256, 69, 0.0, 9, "#4f7af2"), new Point(214, 59, 0.0, 9, "#ef9a1e"), new Point(265, 36, 0.0, 9, "#4976f3"), new Point(300, 78, 0.0, 9, "#269230"), new Point(294, 59, 0.0, 9, "#1f9e2c"), new Point(45, 88, 0.0, 9, "#1c48dd"), new Point(268, 52, 0.0, 9, "#2a56ea"), new Point(73, 83, 0.0, 9, "#3355d8"), new Point(294, 6, 0.0, 9, "#36b641"), new Point(235, 62, 0.0, 9, "#2e5def"), new Point(353, 42, 0.0, 8, "#d53747"), new Point(336, 52, 0.0, 8, "#eb676f"), new Point(208, 41, 0.0, 8, "#f9b125"), new Point(321, 70, 0.0, 8, "#de3646"), new Point(8, 60, 0.0, 8, "#2a59f0"), new Point(180, 81, 0.0, 8, "#eb9c31"), new Point(146, 65, 0.0, 8, "#c41731"), new Point(145, 49, 0.0, 8, "#d82038"), new Point(246, 34, 0.0, 8, "#5f8af8"), new Point(169, 69, 0.0, 8, "#efa11e"), new Point(273, 99, 0.0, 8, "#2e55e2"), new Point(248, 120, 0.0, 8, "#4167e4"), new Point(294, 41, 0.0, 8, "#0b991a"), new Point(267, 114, 0.0, 8, "#4869e3"), new Point(78, 67, 0.0, 8, "#3059e3"), new Point(294, 23, 0.0, 8, "#10a11d"), new Point(117, 83, 0.0, 8, "#cf4055"), new Point(137, 80, 0.0, 8, "#cd4359"), new Point(14, 71, 0.0, 8, "#2855ea"), new Point(331, 80, 0.0, 8, "#ca273c"), new Point(25, 82, 0.0, 8, "#2650e1"), new Point(233, 46, 0.0, 8, "#4a7bf9"), new Point(73, 13, 0.0, 8, "#3d65e7"), new Point(327, 35, 0.0, 6, "#f47875"), new Point(319, 46, 0.0, 6, "#f36764"), new Point(256, 81, 0.0, 6, "#1d4eeb"), new Point(244, 88, 0.0, 6, "#698bf1"), new Point(194, 32,...