<canvas></canvas>
<!-- Click to generate a new image -->
html, body {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
canvas {
	position: absolute;
	width: 100%; 
	height: 100%;
	user-select: none;
	cursor: pointer;
	background: #000;
}
"use strict";
//////////////////////////////////////////////////////////////////
// Adapted from a CFDG program
// https://www.contextfreeart.org/gallery2/index.html#design/618
// Untitled #11 by lakseru, April 15th, 2007
//////////////////////////////////////////////////////////////////
{
	const code = {
		start() {
			this.render({
				maxShapesPerFrame: 100,
				startShape: 'A',
				prerun(gl) {
					gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
				}
			});
			
		},
		rules() { 
			return {
				A: [
					1, s => {
						this.CIRCLE(s, {sat: 1, hue: 200, a: -0.9});
						this.A(s, {x: 0.1, s: 0.999, r: 1, b: 0.002});
					},
					0.002, s => {
						this.CIRCLE(s, {s: 2.5, sat: 1, hue: 200, a: -0.2});
						this.A(s, {flip: 180});
						this.B(s);
					}
				],
				B: s => {
						this.C(s, {r: 90});
						this.C(s, {r: -90});
				},
				C: [
					1, (s) => {
						this.CIRCLE(s, {s: 0.5, sat: 1, hue: 200, a: -0.7});
						this.C(s, {x: 0.1, s: 0.99});
					},
					0.002, (s) => {
						this.B(s);
					}
				]
			}
		}
	};
	// import cfdg library
	cfdg.apply(code);
	// run code
	code.start();
	// Click canvas to generate a new image
	["click", "touchdown"].forEach(event => {
		document.addEventListener(event, e => code.start(), false);
	});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/ge1doot/pen/rdeWrK