tendrils

index.html

<canvas></canvas>
<!-- Click to generate a new image -->

script.js

"use strict";
//////////////////////////////////////////////////////////////////
// Adapted from a CFDG program
// https://www.contextfreeart.org/gallery2/#design/2050
//////////////////////////////////////////////////////////////////
{
	const code = {
		setup() {
			this.render({
				startShape: 'TENDRILS',
				background: '#fff'
			});
		},
		rules() {
			return {
				TENDRILS: s => {
					this.ARM(s);
					this.ARM(s, {flip: 90});
				},
				ARM: [
					98, s => {
						this.CIRCLE(s);
						this.CIRCLE(s, { size: 0.9, brightness: 1 });
						this.ARM(s, { y: 0.2, size: 0.99, rotate: 3 });
					},
					2, s => {
						this.CIRCLE(s);
						this.CIRCLE(s, { size: 0.9, brightness: 1 });
						this.ARM(s, { y: 0.2, size: 0.99, flip: 90 });
						this.ARM(s, { y: 0.2, size: 0.6, brightness: 0.2 });
					}
				]
			};
		}
	};
	// import cfdg library
	cfdg.apply(code);
	// run code
	code.setup();
	// Click canvas to generate a new image
	["click", "touchdown"].forEach(event => {
		document.addEventListener(event, e => code.setup(), false);
	});
}

scripts

<script src="https://codepen.io/ge1doot/pen/rdeWrK"></script>

style.css

html, body {
	overflow: hidden;
	touch-action: 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;
}

tendrils.markdown

tendrils

Adapted from a CFDG : https://www.contextfreeart.org/gallery2/#design/2050

A Pen by Gerard Ferrandez on CodePen.

License.