script.
	window.canvasOptions = {
		autoClear: true,
		autoCompensate: false,
		autoPushPop: true,
		canvas: true,
		centered: true,
		desynchronized: false,
		width: null,
		height: null
	};
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Teko:[email protected]&&display=swap&text=FREELANCE');
body{
  background:#191919;

}
View Compiled
// https://codepen.io/KilledByAPixel/pen/QWjKQoP

function draw(e) {
	const scl = height / 850;
	const time = e * 0.002;
	textAlign(TEXTALIGN_CENTER);
	textBaseline(TEXTBASELINE_MIDDLE);
	font(280 * scl + 'px Teko');
	const count = 20;
	const iCount = TAU / count;
	const spread = iCount / count;
	const r = 800 * scl;
	let center;
	if(!mouseIn) {
		center = Vector.fromAngle(time, 100 * scl);
	}
	else {
		center = mousePos._.sub(width_half, height_half);
	}
	for(let i = 0; i < count - 1; i++) {
		push();
		const t = (iCount + spread) * i;
		const v1 = Vector.fromAngle(t, r);
		const v2 = Vector.fromAngle(t + iCount, r);
		const v = Vector.fromAngle(t * 2 + time, 10 * scl).addY(61 * scl);
		let c = center;
		if(mouseDown) {
			const _c = Vector.fromAngle(t, 60 * scl)
				.rotate(QUARTER_PI)
				// .rotate(HALF_PI / (center.mag() * 0.01));
			c = center._.add(_c);
			// c = center._.add(Vector.fromAngle(t, 100).rotate(HALF_PI).mult(center.mag() * 0.01));
		}
		beginPath();
		line(c, v1);
		lineTo(v2);
		clip();
		scale(1, 3);
		scale(sin(t * 3 + time * 0.2) * 0.1 + 1);
		fillText('FREELANCE', ...v.xy);
		pop();
	}
}

/* requestAnimationFrame */
View Compiled

External CSS

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

External JavaScript

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