script.
window.canvasOptions = {
autoClear: true,
autoCompensate: false,
autoPushPop: true,
canvas: true,
centered: true,
desynchronized: false,
width: null,
height: null
};
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