JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<canvas id="scene"></canvas>
    <input id="copy-1" type="text" value="Eli ♥ Ichayan" />
    <input id="copy-2" type="text" value="100 days of ♥" />

CSS

body{
            margin:0;
            overflow: hidden;
            font-size:0;
        }
        canvas{
            background: black;
            width: 100vw;
            height: 100vh;
        }
        #copy-1 {
          display: none;
        }
        input{
            width: 250px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            bottom: 35px;
            left: calc(50% - 125px);
            background: none;
            color: white;
            font-size: 30px;
            font-family: arial;
            text-align: center;
            border: 1px solid white;
            background: rgba(255,255,255,0.2);
        }
p{
  position: fixed;
  left: 0;
  bottom:5px;
  color: #fff;
  z-index:10;
  font-size:16px;
  font-family: Helvetica, Verdana, sans-serif;
  opacity:0.5;
  width: 100%;
  text-align: center;
  margin: 0;
}

JavaScript

var canvas = document.querySelector("#scene"),
        ctx = canvas.getContext("2d"),
        particles = [],
        amount = 0,
        mouse = {x:0,y:0},
        radius = 1;

    var colors = ["#468966","#FFF0A5", "#FFB03B","#B64926", "#8E2800"];

    var copy = document.querySelector("#copy-1");

    var ww = canvas.width = window.innerWidth;
    var wh = canvas.height = window.innerHeight;

    function Particle(x,y){
        this.x =  Math.random()*ww;
        this.y =  Math.random()*wh;
        this.dest = {
            x : x,
            y: y
        };
        this.r =  Math.random()*5 + 2;
        this.vx = (Math.random()-0.5)*20;
        this.vy = (Math.random()-0.5)*20;
        this.accX = 0;
        this.accY = 0;
        this.friction = Math.random()*0.05 + 0.94;

        this.color = colors[Math.floor(Math.random()*6)];
    }

    Particle.prototype.render = function() {


        this.accX = (this.dest.x - this.x)/1000;
        this.accY = (this.dest.y - this.y)/1000;
        this.vx += this.accX;
        this.vy += this.accY;
        this.vx *= this.friction;
        this.vy *= this.friction;

        this.x += this.vx;
        this.y +=  this.vy;

        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
        ctx.fill();

        var a = this.x - mouse.x;
        var b = this.y - mouse.y;

        var distance = Math.sqrt( a*a + b*b );
        if(distance<(radius*70)){
            this.accX = (this.x - mouse.x)/100;
            this.accY = (this.y - mouse.y)/100;
            this.vx += this.accX;
            this.vy += this.accY;
        }

    }

    function onMouseMove(e){
        mouse.x = e.clientX;
        mouse.y = e.clientY;
    }

    function onTouchMove(e){
    if(e.touches.length > 0 ){
      mouse.x = e.touches[0].clientX;
      mouse.y = e.touches[0].clientY;
    }
    }

function onTouchEnd(e){
  mouse.x = -9999;
  mouse.y = -9999;
}

    function initScene(){
    ...