JSFiddle - React, Tailwind, and code Playground

by msmini5

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

CSS

html, body {border:0;padding:0;margin:0;height: 100%;}

JavaScript

$(function () {
//return;
    // Nouveau svg
    var s = Snap("100%", "100%");

    // Background
    var background = s.rect(0, 0, "100%", "100%");
    background.attr ({
        fill:"#111111"
    });

    // W/H Size window
    w = $(window).width();
    h = $(window).height();

    // Nombre de particules
    var numberParticules = 10;

    // Tableau de particules
    stockParticules = [];


    // Ajout des particules dans le SVG
    for(var i = 0; i < numberParticules; i++) {

            // Variables utiles
            xP = Math.round(Math.random()* w); // random X particule
            yP = Math.round(Math.random()* h); // random Y particule
            vlx = (0.1 - (Math.random() * 0.5)) ; // random X velocity
            vly = (0.1 - (Math.random() * 0.5)) ; // random Y velocity
            var radiusP = 3; // radius
            var colorP = "#FF0000"; // coolor

            var singleParticule = s.circle(xP,yP,radiusP);
            singleParticule.attr({
                fill: colorP,
                vx: vlx,
                vy: vly
            });

            stockParticules.push(singleParticule);
    }

    function animationParticules() {

        for(var i = 0; i < numberParticules; i++) {

            var pElement = stockParticules[i];

            /*pElementX = parseFloat(pElement.attr('cx'));
            pElementY = parseFloat(pElement.attr('cy'));
            var vlcx = parseFloat(pElement.attr('vx'));
            var vlcy = parseFloat(pElement.attr('vy'));


            if (pElementX < 0 || pElementX > eval(w)) {
                vlcx = - vlcx;
                vlcy = vlcy;
            };

            if (pElementY < 0 || pElementY > eval(h)) {
                vlcx = vlcx;
                vlcy = - vlcy;
            }

            pElement.attr({
                cx: eval(pElementX+=vlcx),
                cy: eval(pElementY+=vlcy),
                vx: vlcx,
                vy: vlcy
            });*/

            for(i = 0; i < numberParticules;...