cursor pattern canvas

by ian_smithz

HTML

<canvas class="fireworks"></canvas>

CSS

:root { font-size: 14px; }
@media (min-width: 350px) { :root { font-size: 16px; } }
@media (min-width: 640px) { :root { font-size: 28px; } }
@media (min-width: 1440px) { :root { font-size: 1.25vw; } }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
	position: relative;
	z-index: 1;
	max-width: 19rem;
}

/* Logo */

.logo {
	opacity: 0;
	position: relative;
	margin-left: -3.5rem;
	margin-top: -8rem;
	margin-bottom: .75rem;
	font-size: 8px;
}

body.ready .logo {
	opacity: 1;
}

body:not(.iOS) #lines * {
  mix-blend-mode: lighten;
}

#fills * {
  opacity: 0;
  mix-blend-mode: lighten;
}

#line-i-1 {
  transform-origin: 30em 8em;
}

/* Fireworks */

.fireworks {
  position: absolute;
	top: 0;
	left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
var ff = navigator.userAgent.indexOf('Firefox') > 0;
var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';
if (iOS) document.body.classList.add('iOS');

var fireworks = (function() {

  var getFontSize = function() {
    return parseFloat(getComputedStyle(document.documentElement).fontSize);
  }

  var canvas = document.querySelector('.fireworks');
  var ctx = canvas.getContext('2d');
  var numberOfParticules = 24;
  var distance = 200;
  var x = 0;
  var y = 0;
  var animations = [];

  var setCanvasSize = function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  var updateCoords = function(e) {
    x = e.clientX || e.touches[0].clientX;
    y = e.clientY || e.touches[0].clientY;
  }

  var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];

  var createCircle = function(x, y) {
    var p = {};
    p.x = x;
    p.y = y;
    p.color = colors[anime.random(0, colors.length - 1)];
    p.color = '#FFF';
    p.radius = 0;
    p.alpha = 1;
    p.lineWidth = 6;
    p.draw = function() {
      ctx.globalAlpha = p.alpha;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
      ctx.lineWidth = p.lineWidth;
      ctx.strokeStyle = p.color;
      ctx.stroke();
      ctx.globalAlpha = 1;
    }
    return p;
  }

  var createParticule = function(x, y) {
    var p = {};
    p.x = x;
    p.y = y;
    p.color = colors[anime.random(0, colors.length - 1)];
    p.radius = anime.random(getFontSize(), getFontSize() * 2);
    p.draw = function() {
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
      ctx.fillStyle = p.color;
      ctx.fill();
    }
    return p;
  }

  var createParticles = function(x, y) {
    var particules = [];
    for (var i = 0; i < numberOfParticules; i++) {
      var p = createParticule(x, y);
      particules.push(p);
    }
    return...