<!-- Please ❤ this and follow me if you like it! -->




























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



<!-- Code added to every pen -->
<div class="credits"><a class="other-pens" href="https://codepen.io/PickJBennett/" target="_blank" rel="external noopener"><svg class="credits-logo codepen-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="0" height="0"><path d="M255.8 87.1c-.05-.32-.1-.63-.2-.94-.04-.18-.1-.35-.16-.53-.08-.27-.17-.54-.28-.8l-.25-.54c-.1-.3-.2-.5-.3-.8l-.3-.5-.4-.7-.4-.5-.5-.6-.4-.5-.6-.5-.5-.4c-.03-.1-.1-.1-.2-.2l-117-78c-3.7-2.5-8.5-2.5-12.2 0L5 79.7c-.06.04-.1.1-.17.13l-.5.36-.63.5-.48.4c-.2.2-.4.4-.55.6l-.37.5-.45.6-.32.5c-.14.26-.26.5-.37.75l-.25.52c-.1.23-.2.5-.2.8l-.2.6c-.1.3-.15.6-.2.9l-.1.47c-.1.5-.1.95-.1 1.44v78c0 .5 0 1 .1 1.46l.1.48c.07.3.1.62.2.93l.2.5c.08.3.17.6.27.8l.25.53.4.73.3.5c.1.23.3.44.5.65l.3.46c.2.2.3.4.5.6.2.15.3.3.5.4l.6.55.5.4.15.18 116.95 78c1.84 1.25 3.95 1.87 6.1 1.86 2.13 0 4.24-.63 6.1-1.86l117-78c.1-.05.1-.1.2-.15l.5-.37.6-.5c.15-.1.3-.27.44-.4.2-.2.4-.4.57-.6.16-.17.3-.3.4-.5.18-.2.34-.4.48-.65l.3-.5.36-.76c.1-.14.14-.3.22-.5l.3-.8.15-.53c.1-.3.12-.6.2-.9 0-.2.05-.34.1-.5.04-.5.1-.95.1-1.44V89c0-.5-.07-.96-.1-1.44 0-.17-.1-.3-.1-.47zM128 154l-38.9-26 38.9-26.02L166.9 128 128 154.02zm-11-71.15l-47.7 31.9L30.8 89 117 31.57v51.3zM49.52 128l-27.5 18.4v-36.8L49.5 128zm19.8 13.24l47.68 31.9v51.3L30.8 167l38.5-25.74zm69.68 31.9l47.7-31.9 38.5 25.74-86.2 57.46v-51.3zM206.47 128L234 109.6v36.8L206.46 128zm-19.78-13.23L139 82.87v-51.3L225.2 89l-38.5 25.77z"/></svg>Check out my other pens</a> <a id="js-tweet-this" href="https://twitter.com/PickJBennett" target="_blank" rel="external noopener"><svg class="credits-logo twitter-logo" id="js-twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.39 222.18" width="0" height="0"><path d="M273.4 26.3c-10.07 4.46-20.88 7.48-32.22 8.83 11.58-6.94 20.47-17.93 24.66-31.03C255 10.53 243 15.2 230.22 17.7 220 6.8 205.42 0 189.28 0c-30.98 0-56.1 25.1-56.1 56.1 0 4.38.5 8.66 1.46 12.77-46.6-2.34-87.94-24.67-115.6-58.6-4.84 8.28-7.6 17.92-7.6 28.2 0 19.45 9.9 36.62 24.95 46.68-9.2-.3-17.85-2.8-25.41-7.02-.02.24-.02.47-.02.7 0 27.2 19.33 49.86 45 55-4.7 1.3-9.67 1.98-14.78 1.98-3.62 0-7.13-.35-10.56-1 7.14 22.28 27.85 38.5 52.4 38.95-19.2 15.05-43.38 24-69.66 24-4.53 0-9-.25-13.38-.77 24.82 15.9 54.3 25.2 85.98 25.2 103.17 0 159.6-85.47 159.6-159.6 0-2.42-.07-4.84-.18-7.24 10.96-7.9 20.47-17.8 28-29.04z"/></svg></a></div>

/* Please ❤ this and follow me if you like it! */




























:root {
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  -o-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

*,
:before,
:after {
  box-sizing: inherit;
}

html,
body,
canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-contain: strict;
  -moz-contain: strict;
  -ms-contain: strict;
  -o-contain: strict;
  contain: strict;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  overflow-scrolling: touch;
  -ms-overflow-style: ms-autohiding-scrollbar;
}

/* Pen-specific styles here */





.credits {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  font-size: 130%;
  text-align: center;
  width: 100%;
  padding: 2rem 0.2rem 2rem;
}

.credits a {
  display: inline-block;
  color: #3bb1bc;
  font-family: Arial, sans-serif;
  line-height: 1.5em;
  text-decoration: none !important;
  white-space: nowrap;
  margin: 0 1.2em;
  padding: 0.6em 0;
  transition: color 200ms;
}

.credits a:hover {
  color: #000;
  cursor: pointer;
}

.credits-logo {
  fill: currentColor;
  display: inline-block;
  vertical-align: bottom;
  width: 1.6em;
  height: 1.6em;
  margin: 0 0.5em 0 0;
}

/* Please ❤ this and follow me if you like it! */




























class Dots {
  constructor(width, height, spacing) {
    this.spacing = spacing;
    this.dots = [];
    this.alphaStep = 1 / 10;
    this.cols = Math.floor(width / spacing);
    this.rows = Math.floor(height / spacing);

    const canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;
    this.canvas = canvas;
    this.ctx = ctx;

    this.draw();
  }
  draw() {
    const ctx = this.ctx,
      spacing = this.spacing;

    ctx.fillStyle = 'rgba(24, 129, 141, .1)';
    this.dots = Array.apply(null, Array(this.cols)).map((n, x) => {
      return Array.apply(null, Array(this.rows)).map((p, y) => {
        let dot = {
          opacity: 0.1,
          x: x * spacing,
          y: y * spacing
        };

        ctx.fillRect(dot.x, dot.y, 1, 1);
        return dot;
      });
    });
  }
  ghost() {
    const ghostDots = document.createElement('canvas');
    ghostDots.width = this.canvas.width;
    ghostDots.height = this.canvas.height;

    const dotsCtx = ghostDots.getContext('2d');
    dotsCtx.fillStyle = 'rgb(24, 129, 141)';
    this.dots.forEach(col => {
      col.forEach(dot => {
        dotsCtx.fillRect(dot.x, dot.y, 1, 1);
      });
    });

    return ghostDots;
  }
}

class Circuits {
  constructor(width, height, size, minLength, maxLength) {
    this.size = size;
    this.width = width;
    this.height = height;
    this.cols = ~~(width / size);
    this.rows = ~~(height / size);

    this.scene = Array.apply(null, Array(this.cols)).map(() => new Col(this.rows));

    this.collection = [];
    this.minLength = minLength;
    this.maxLength = maxLength;


    this.populate();
    this.draw();
  }
  draw() {
    const canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d'),
      size = this.size;

    canvas.width = this.width;
    canvas.height = this.height;

    ctx.strokeStyle = 'rgba(59, 177, 188, 1)';
    ctx.lineWidth = Math.round(size / 10);
    this.collection.forEach(circuit => {
      let point = [circuit.start[0], circuit.start[1]],
        path = circuit.path;

      ctx.beginPath();
      ctx.moveTo(point[0] * size + size / 2 + path[0][0] * size / 4, point[1] * size + size / 2 + path[0][1] * size / 4);
      path.forEach((dir, index) => {
        point[0] += dir[0];
        point[1] += dir[1];
        if (index === path.length - 1) {
          ctx.lineTo(point[0] * size + size / 2 - dir[0] * size / 4, point[1] * size + size / 2 - dir[1] * size / 4);
        } else {
          ctx.lineTo(point[0] * size + size / 2, point[1] * size + size / 2);
        }
      });
      ctx.stroke();
    });

    ctx.lineWidth = ~~(this.size / 5);
    ctx.strokeStyle = 'rgba(59, 177, 188, .6)';
    this.collection.forEach(circuit => {
      ctx.beginPath();
      ctx.arc(circuit.start[0] * size + size / 2, circuit.start[1] * size + size / 2, size / 4, 0, 2 * Math.PI, false);
      ctx.stroke();
      ctx.beginPath();
      ctx.arc(circuit.end[0] * size + size / 2, circuit.end[1] * size + size / 2, size / 4, 0, 2 * Math.PI, false);
      ctx.stroke();
    });

    this.canvas = canvas;
  }
  populate() {
    const size = this.size;

    let start = null,
      n = 1000,
      maxLength = this.maxLength,
      minLength = this.minLength,
      length = 0,
      dir = null;

    while ((start = this.getStart()) && n--) {
      length = minLength + ~~(Math.random() * (maxLength - minLength));
      dir = this.getDir(start);

      this.setUsed(start[0], start[1]);
      // if we can move from this point
      if (dir[0] !== 0 || dir[1] !== 0) {
        let circuit = new Circuit(start, size),
          moving = true,
          path = [start[0], start[1]],
          coords = [start[0], start[1]];
        length--;

        while (moving && length) {
          circuit.path.push(dir);
          circuit.coords.push([path[0], path[1]]);

          path[0] += dir[0];
          path[1] += dir[1];

          // set used
          this.setUsed(path[0], path[1]);
          // get new dir
          dir = this.getDir(path, dir);
          if (dir[0] === 0 && dir[1] === 0) {
            moving = false;
          }
          length--;
        }

        if (circuit.path.length >= minLength) {
          circuit.end = path;
          circuit.coords.push([path[0], path[1]]);

          let speed = Math.random() * 0.5 + 0.5;

          circuit.things.push(things.create(circuit, speed * 1));

          if (circuit.path.length > maxLength / 3) {
            speed = Math.random() * 0.5 + 0.5;
            circuit.things.push(things.create(circuit, -speed, circuit.path.length * size));
          }

          if (circuit.path.length > maxLength / 1.5) {
            speed = Math.random() * 0.5 + 0.5 * (Math.random() >= 0.5 ? -1 : 1);
            circuit.things.push(things.create(circuit, speed, Math.random() * circuit.path.length * size));
          }

          circuit.length = circuit.path.length * size;
          this.collection.push(circuit);
        }
      }
    }
  }
  getStart() {
    let found = false,
      col = null,
      row = null,
      free = [],
      result = false;

    const scene = this.scene;

    // select cols with free cell
    scene.forEach((col, index) => {
      if (col.free) {
        free.push(index);
      }
    });

    if (free.length) {
      // pick one of the col
      col = this.pickOne(free);

      // select the free cells in the col
      free.length = 0;
      scene[col].rows.forEach((row, index) => {
        if (row === 0) {
          free.push(index);
        }
      });

      // pick one of the cell
      row = this.pickOne(free);

      result = [col, row];
    }
    return result;
  }
  pickOne(array) {
    return array[~~(Math.random() * array.length)];
  }
  setUsed(x, y) {
    this.scene[x].rows[y] = 1;
    this.scene[x].free--;
  }
  isAvailable(x, y) {
    const scene = this.scene;
    let result = false;
    if (typeof scene[x] !== 'undefined') {
      if (typeof scene[x].rows[y] !== 'undefined') {
        if (scene[x].rows[y] === 0) {
          result = true;
        }
      }
    }
    return result;
  }

  // get direction
  // if a current direction is given, there is 50% chances to go in the same
  getDir(fromPoint, oldDir = null) {
    const possibleX = [],
      possibleY = [],
      result = [0, 0];

    if (oldDir && Math.random() <= 0.5) {
      if (this.isAvailable(fromPoint[0] + oldDir[0], fromPoint[1] + oldDir[1])) {
        return oldDir;
      }
    }

    // Xs
    if (this.isAvailable(fromPoint[0] - 1, fromPoint[1])) {
      possibleX.push(-1);
    }
    if (this.isAvailable(fromPoint[0] + 1, fromPoint[1])) {
      possibleX.push(1);
    }

    // Ys
    if (this.isAvailable(fromPoint[0], fromPoint[1] - 1)) {
      possibleY.push(-1);
    }
    if (this.isAvailable(fromPoint[0], fromPoint[1] + 1)) {
      possibleY.push(1);
    }

    if (possibleX.length && Math.random() < 0.5) {
      result[0] = this.pickOne(possibleX);
    } else if (possibleY.length) {
      result[1] = this.pickOne(possibleY);
    }

    return result;
  }
}

class Col {
  constructor(rows) {
    this.rows = Array.apply(null, Array(rows)).map(() => 0);
    this.free = rows;
  }
}

class Circuit {
  constructor(start, size) {
    this.start = start;
    this.cellSize = size;
    this.path = [];
    this.end = null;
    this.things = [];
    this.length = 0;
    this.coords = [];
  }
}

class Things {
  constructor(width, height) {
    this.width = width;
    this.height = height;

    this.canvas = document.createElement('canvas');
    this.canvas.width = width;
    this.canvas.height = height;
    this.ctx = this.canvas.getContext('2d');

    this.collection = [];
  }
  create(circuit, velocity, done = 0) {
    const thing = new Thing(circuit, velocity, done);
    this.collection.push(thing)
    return thing;
  }
  update() {
    this.collection.forEach(thing => {
      thing.update();
    });
  }
  draw() {
    const ctx = this.ctx,
      radius = this.lightRadius,
      diameter = radius * 2,
      space = radius / 3;

    let radial = null,
      diffX = null,
      diffY = null;
    ctx.clearRect(0, 0, this.width, this.height);
    this.collection.forEach(thing => {
      thing.update();
      radial = this.ghostRadial;
      diffX = diffY = radius;
      if (thing.distFromSister() <= space) {
        radial = this.ghostSuperRadial;
        diffX = radial.width / 2;
        diffY = radial.height / 2;
      }
      ctx.drawImage(radial, thing.x - diffX, thing.y - diffY, radial.width, radial.height);
    });

    ctx.save();
    ctx.globalCompositeOperation = 'destination-in';
    ctx.drawImage(this.dotsGhost, 0, 0);
    ctx.restore();

    ctx.save();
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = '#afe3e9';
    this.collection.forEach(thing => {
      ctx.beginPath();
      ctx.arc(thing.x, thing.y, radius / 6, 0, 2 * Math.PI, false);
      ctx.fill();
    });
    ctx.restore();
  }
  setDotsGhost(canvas) {
    this.dotsGhost = canvas;
  }
  setLight(lightRadius) {
    this.lightRadius = lightRadius;

    this.ghostRadial = document.createElement('canvas');
    this.ghostRadial.width = lightRadius * 2;
    this.ghostRadial.height = lightRadius * 2;

    const radialCtx = this.ghostRadial.getContext('2d');
    let gradient = radialCtx.createRadialGradient(lightRadius, lightRadius, lightRadius, lightRadius, lightRadius, 0);
    gradient.addColorStop(0, "rgba(24, 129, 141, 0)");
    gradient.addColorStop(1, "rgba(24, 129, 141, .6)");

    radialCtx.fillStyle = gradient;
    radialCtx.fillRect(0, 0, lightRadius * 2, lightRadius * 2);


    // star
    this.ghostSuperRadial = document.createElement('canvas');
    const radWidth = this.ghostSuperRadial.width = lightRadius * 15;
    const radHeight = this.ghostSuperRadial.height = lightRadius * 20;

    const superRadialCtx = this.ghostSuperRadial.getContext('2d');

    gradient = superRadialCtx.createRadialGradient(radWidth / 2, radHeight / 2, radWidth / 2, radWidth / 2, radHeight / 2, 0);
    gradient.addColorStop(0, "rgba(37, 203, 223, 0)");
    gradient.addColorStop(1, "rgba(37, 203, 223,  .4)");

    superRadialCtx.fillStyle = gradient;

    superRadialCtx.beginPath();
    superRadialCtx.moveTo(radWidth / 2 + lightRadius / 6, radHeight / 2 - lightRadius / 3);
    superRadialCtx.lineTo(radWidth, 0);
    superRadialCtx.lineTo(radWidth / 2 + lightRadius / 3, radHeight / 2 - lightRadius / 6);
    superRadialCtx.lineTo(3 * radWidth / 4, radHeight / 2);
    superRadialCtx.lineTo(radWidth / 2 + lightRadius / 3, radHeight / 2 + lightRadius / 6);
    superRadialCtx.lineTo(radWidth, radHeight);
    superRadialCtx.lineTo(radWidth / 2 + lightRadius / 6, radHeight / 2 + lightRadius / 3);
    superRadialCtx.lineTo(radWidth / 2, 3 * radHeight / 4);
    superRadialCtx.lineTo(radWidth / 2 - lightRadius / 6, radHeight / 2 + lightRadius / 3);
    superRadialCtx.lineTo(0, radHeight);
    superRadialCtx.lineTo(radWidth / 2 - lightRadius / 3, radHeight / 2 + lightRadius / 6);
    superRadialCtx.lineTo(radWidth / 4, radHeight / 2);
    superRadialCtx.lineTo(radWidth / 2 - lightRadius / 3, radHeight / 2 - lightRadius / 6);
    superRadialCtx.lineTo(0, 0);
    superRadialCtx.lineTo(radWidth / 2 - lightRadius / 6, radHeight / 2 - lightRadius / 3);
    superRadialCtx.lineTo(radWidth / 2, radHeight / 4);
    superRadialCtx.lineTo(radWidth / 2 + lightRadius / 6, radHeight / 2 - lightRadius / 3);
    superRadialCtx.fill();
  }
}


class Thing {
  constructor(circuit, velocity, done = 0) {
    this.circuit = circuit;
    this.velocity = velocity;
    this.done = done;
    this.x = 0;
    this.y = 0;
    this.dots = [];
  }
  update() {
    const circuit = this.circuit,
      size = circuit.cellSize;

    let x = 0,
      y = 0;
    // update this
    const length = circuit.length,
      start = circuit.start,
      end = circuit.end,
      path = circuit.path;
    this.done += this.velocity;
    if (this.done <= 0) {
      this.done = 0;
      this.velocity = -this.velocity;
    } else if (this.done >= length) {
      this.done = length;
      this.velocity = -this.velocity;
    }

    if (this.done <= size / 2) {
      x = (start[0] * size + size / 2) + this.done * path[0][0];
      y = (start[1] * size + size / 2) + this.done * path[0][1];
    } else if (this.done > (length - size / 2)) {
      x = (end[0] * size + size / 2) - (length - this.done) * path[path.length - 1][0];
      y = (end[1] * size + size / 2) - (length - this.done) * path[path.length - 1][1];
    } else {

      const index = ~~(this.done / size),
        done = this.done - index * size,
        dir = [path[index][0], path[index][1]],
        point = circuit.coords[index];

      x = point[0] * size + size / 2 + done * dir[0];
      y = point[1] * size + size / 2 + done * dir[1];
    }
    x = ~~x;
    y = ~~y;
    this.x = x;
    this.y = y;
  }
  distFromSister() {
    const circuit = this.circuit;
    let dist = Infinity,
      tmp = null;
    circuit.things.forEach(thing => {
      if (thing !== this) {
        tmp = Math.abs(thing.done - this.done);
        if (tmp < dist) {
          dist = tmp;
        }
      }
    });

    return dist;
  }
}


class Background {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
  getBackground() {
    const canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');

    canvas.width = this.width;
    canvas.height = this.height;

    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, this.width, this.height);

    ctx.drawImage(dots.canvas, 0, 0);
    ctx.drawImage(circuits.canvas, 0, 0);

    return canvas;
  }
}




// background init
const bgCanvas = document.getElementById('c'),
  width = bgCanvas.width = window.innerWidth,
  height = bgCanvas.height = window.innerHeight,
  bgCtx = bgCanvas.getContext('2d');

// dots
const dots = new Dots(width, height, 2);

// things
const things = new Things(width, height);
// get dot ghost
// it will serve as a clip canvas for the gradients to only show where there is originally dots in the background
things.setDotsGhost(dots.ghost());
things.setLight(dots.spacing * 4);

// circuits
const maxLength = 16,
  minLength = 3,
  cellSize = 10,
  circuits = new Circuits(width, height, cellSize, minLength, maxLength);

// background first and only draw
const background = new Background(width, height),
  staticBG = background.getBackground();
bgCtx.drawImage(staticBG, 0, 0);

// animation
const canvas = document.createElement('canvas'),
  ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

function loop() {
  ctx.clearRect(0, 0, width, height);
  // draw things
  things.draw();
  ctx.drawImage(things.canvas, 0, 0);

  requestAnimationFrame(loop);
}

// draw bg (dots + circuit) on the main canvas
loop();



// Working with credits

var cpCreditsUrl = "https://codepen.io/dievardump/details/pyOMeN";
var cpCreditsTitle = "Circuits";
var cpCreditsTwitter = document.getElementById("js-tweet-this");
cpCreditsTwitter.href = "https://twitter.com/intent/tweet?text=" + encodeURI(cpCreditsTitle) + "&url=" + encodeURI(cpCreditsUrl) + "&via=dievardump&related=PickJBennett";
cpCreditsTwitter.innerHTML += "Tweet This Pen";