script.
	window.canvasOptions = {
		//- autoClear: true,
		autoCompensate: false,
		autoPushPop: true,
		canvas: true,
		//- centered: true,
		width: null,
		height: null
	};

// Combining these:
// https://codepen.io/Alca/pen/qKvEmQ
// https://codepen.io/justjspr/pen/RYVKpP
svg#weirdFilter
	filter#svgFilter
		feTurbulence#turbulence(type="fractalNoise" baseFrequency="0.009" numOctaves="5")
		feDisplacementMap#displacement(in="SourceGraphic" scale="200")
View Compiled
canvas {
	filter: blur(5px) url(#svgFilter);
}

#weirdFilter {
	display: none;
}
// Idea based on "flowers" by Gerard Ferrandez: https://codepen.io/ge1doot/pen/dKaZoZ

let particles = [];
let _e;
let last;
let grad;

function setup() {
	onResize();
}

function onResize() {
	let center = Vector.center();
	grad = createRadialGradient(
			center.x, center.y, 0,
			center.x, center.y, hypot(width, height) * 0.4
		);
	grad.addColorStop(0.0, hsl(340, 100, 50));
	grad.addColorStop(0.3, hsl(310, 100, 50));
	grad.addColorStop(0.7, hsl(240, 100, 50));
	grad.addColorStop(1.0, hsl(210, 100, 50));
}

function draw(e) {
	_e = e;
	let center = Vector.center();
	let time = e * 0.001;
	let sTime = sin(time * 0.8);
	// push();
	// // filter(`blur(${map(sTime, -1, 1, 10, 2)}px)`);
	// filter(`blur(1px)`);
	// drawImage(canvas, 0, 0, width, height);
	// pop();
	background(hsl(0, 0, 8, map(sTime, -1, 1, 0.05, 0.2)));
	if(mouseIn) {
		last = null;
		let v = mousePos.copy().sub(mousePosPrev);
		if(v.mag() > 2) {
			let vel_ = v.limit(80);
			for(let i = 0; i < 10; i++) {
				let pos = lerp(mousePosPrev, mousePos, random());
				let vel = vel_.copy().mult(random(0.05, 0.3));
				let p = new Particle(pos, vel, e);
				particles.push(p);
			}
		}
	}
	else {
		let mn = min(width_half, height_half) * 0.45;
		let count = 4;
		let timeC = time * 3.75;
		let timeS = time * 2.5;
		for(let i = 0; i < count; i++) {
			let t = i / count * EIGHTH_PI;
			let pos = createVector(
					cos(timeC + t),
					sin(timeS + t)
				).mult(mn).add(center);
			if(last) {
				let vel = pos.copy().sub(last);
				let p = new Particle(pos, vel, e);
				particles.push(p);
			}
			last = pos.copy();
		}
	}
	particles = particles.filter(p => p.e + p.life > e);
	beginPath();
	particles.forEach(p => {
		let life = (e - p.e) / p.life;
		let r = (1 - life) * 10;
		// circle(p.pos.x, p.pos.y, r);
		push();
		translate(p.pos);
		let v = p.pos.copy().sub(p.lastPos);
		let heading = v.heading();
		let mag = v.mag();
		rotate(heading);
		moveTo(0, r);
		arc(0, 0, r, HALF_PI, -HALF_PI);
		arc(mag, 0, r, -HALF_PI, HALF_PI);
		closePath();
		pop();
		p.update();
	});
	fill(grad);
}

class Particle {
	constructor(pos, vel, e) {
		this.pos = pos.copy();
		this.lastPos = this.pos.copy();
		this.vel = vel.copy();
		this.e = e;
		this.life = random(200, 600);
	}
	update() {
		let dir = floor(this.life + _e * 0.003) % 2 ? 1 : -1;
		let rot = dir * this.life * 0.0003;
		this.lastPos = this.pos.copy();
		this.pos.add(this.vel.mult(0.95).rotate(rot));
	}
}
View Compiled

External CSS

  1. https://codepen.io/Alca/pen/XeZBab

External JavaScript

  1. https://codepen.io/Alca/pen/XeZBab