JSFiddle - React, Tailwind, and code Playground

by murgiaMarco

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Ambient Canvas Backgrounds | Pipeline | Codrops</title>
		<meta name="description" content="A set of animated ambient canvas backgrounds with different effects" />
		<meta name="keywords" content="canvas, ambient, background, animation, javascript, demo, web development" />
		<meta name="author" content="Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/demo5.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
	</head>
	<body class="demo-5">
		<main>
			<div class="frame">
				<div class="frame__title-wrap">
					<h1 class="frame__title">Ambient Canvas Backgrounds</h1>
				</div>
				<a class="frame__github" href="https://github.com/codrops/AmbientCanvasBackgrounds/">GitHub</a>
				<div class="frame__links">
					<a href="https://tympanus.net/Development/MotionTransitionEffect/">Previous Demo</a>
					<a href="https://tympanus.net/codrops/?p=36743">Article</a>
				</div>
				<div class="frame__demos">
					<a href="index5.html" class="frame__demo frame__demo--current">Pipeline</a>
				</div>
			</div>
			<div class="content content--canvas">
				<h2 class="content__title">Pipeline</h2>
			</div>
		</main>
		<script src="js/noise.min.js"></script>
		<script src="js/util.js"></script>
		<script src="js/pipeline.js"></script>
		<script src="js/demo.js"></script>
	</body>
</html>

CSS

html, body {
  background: hsla(170,50%,3%,1);
}

JavaScript

'use strict';

const pipeCount = 30;
const pipePropCount = 8;
const pipePropsLength = pipeCount * pipePropCount;
const turnCount = 8;
const turnAmount = (360 / turnCount) * TO_RAD;
const turnChanceRange = 58;
const baseSpeed = 0.5;
const rangeSpeed = 1;
const baseTTL = 100;
const rangeTTL = 300;
const baseWidth = 2;
const rangeWidth = 4;
const baseHue = 180;
const rangeHue = 60;
const backgroundColor = 'hsla(150,80%,1%,1)';

let container;
let canvas;
let ctx;
let center;
let tick;
let pipeProps;

function setup() {
	createCanvas();
  resize();
  initPipes();
	draw();
}

function initPipes() {
  pipeProps = new Float32Array(pipePropsLength);

  let i;

  for (i = 0; i < pipePropsLength; i += pipePropCount) {
    initPipe(i);
  }
}

function initPipe(i) {
  let x, y, direction, speed, life, ttl, width, hue;

  x = rand(canvas.a.width);
  y = center[1];
  direction = (round(rand(1)) ? HALF_PI : TAU - HALF_PI);
  speed = baseSpeed + rand(rangeSpeed);
  life = 0;
  ttl = baseTTL + rand(rangeTTL);
  width = baseWidth + rand(rangeWidth);
  hue = baseHue + rand(rangeHue);

  pipeProps.set([x, y, direction, speed, life, ttl, width, hue], i);
}

function updatePipes() {
  tick++;

  let i;

  for (i = 0; i < pipePropsLength; i += pipePropCount) {
    updatePipe(i);
  }
}

function updatePipe(i) {
  let i2=1+i, i3=2+i, i4=3+i, i5=4+i, i6=5+i, i7=6+i, i8=7+i;
  let x, y, direction, speed, life, ttl, width, hue, turnChance, turnBias;

  x = pipeProps[i];
  y = pipeProps[i2];
  direction = pipeProps[i3];
  speed = pipeProps[i4];
  life = pipeProps[i5];
  ttl = pipeProps[i6]
  width = pipeProps[i7];
  hue = pipeProps[i8];

  drawPipe(x, y, life, ttl, width, hue);

  life++;
  x += cos(direction) * speed;
  y += sin(direction) * speed;
  turnChance = !(tick % round(rand(turnChanceRange))) && (!(round(x) % 6) || !(round(y) % 6));
  turnBias = round(rand(1)) ? -1 : 1;
  direction += turnChance ? turnAmount * turnBias : 0;

  pipeProps[i] = x;
  pipeProps[i2] = y;
  pipeProps[i3]...