shapes geometric floating ambient decorative subtle
Floating Shapes
floating-shapes.js
/**
* Floating Shapes — Gently drifting geometric shapes as decorative background.
* Category: decorative | Animate: true | Interactive: false | Complexity: low
*/
export default function floatingShapes(ctx, state) {
const COUNT = 22;
const TYPES = ['circle', 'triangle', 'square'];
// Hues spread across violet → teal → amber
const HUES = [270, 300, 220, 170, 45, 80];
let shapes = [];
function spawn(width, height) {
return Array.from({ length: COUNT }, () => {
const filled = Math.random() < 0.3;
return {
x: Math.random() * width,
y: Math.random() * height,
size: 10 + Math.random() * 30,
vx: (Math.random() - 0.5) * 0.4,
vy: (Math.random() - 0.5) * 0.4,
rot: Math.random() * Math.PI * 2,
rotSpeed: (Math.random() - 0.5) * 0.006,
alpha: filled ? 0.08 + Math.random() * 0.1 : 0.18 + Math.random() * 0.28,
hue: HUES[Math.floor(Math.random() * HUES.length)],
filled,
type: TYPES[Math.floor(Math.random() * TYPES.length)],
};
});
}
shapes = spawn(state.width, state.height);
function drawShape(type, size) {
if (type === 'circle') {
ctx.beginPath();
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
} else if (type === 'triangle') {
const h = size * 0.866;
ctx.beginPath();
ctx.moveTo(0, -h / 2);
ctx.lineTo(size / 2, h / 2);
ctx.lineTo(-size / 2, h / 2);
ctx.closePath();
} else {
ctx.beginPath();
ctx.rect(-size / 2, -size / 2, size, size);
}
}
return {
resize({ width, height }) {
shapes = spawn(width, height);
},
frame({ width, height, reducedMotion }) {
for (const s of shapes) {
if (!reducedMotion) {
s.x += s.vx;
s.y += s.vy;
s.rot += s.rotSpeed;
if (s.x < -s.size) s.x = width + s.size;
if (s.x > width + s.size) s.x = -s.size;
if (s.y < -s.size) s.y = height + s.size;
if (s.y > height + s.size) s.y = -s.size;
}
ctx.save();
ctx.translate(s.x, s.y);
ctx.rotate(s.rot);
drawShape(s.type, s.size);
const color = `oklch(78% 0.18 ${s.hue} / ${s.alpha})`;
if (s.filled) {
ctx.fillStyle = color;
ctx.fill();
} else {
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.stroke();
}
ctx.restore();
}
},
destroy() {
shapes = [];
},
};
}
embed.html
<canvas id="canvas-effect" style="width:100%;height:400px;display:block" aria-hidden="true"></canvas>
<script>
/**
* mountCanvas — Minimal runtime for Canvas effects.
*
* Handles HiDPI scaling, ResizeObserver, RAF loop, pointer tracking,
* reduced-motion, and cleanup. The effect only implements draw logic.
*
* @param {HTMLCanvasElement} canvas
* @param {(ctx: CanvasRenderingContext2D, state: object) => object} createEffect
* @param {object} [options]
* @returns {() => void} destroy function
*/
function mountCanvas(canvas, createEffect, options = {}) {
const ctx = canvas.getContext('2d', { alpha: true });
if (!ctx) throw new Error('2D context not available');
const opts = {
animate: true,
clear: true,
maxDpr: 2,
pauseWhenHidden: true,
respectReducedMotion: true,
...options,
};
const reducedMotion =
opts.respectReducedMotion && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const state = {
canvas,
ctx,
width: 0,
height: 0,
pixelWidth: 0,
pixelHeight: 0,
dpr: 1,
time: 0,
delta: 0,
frame: 0,
playing: false,
reducedMotion,
pointer: { x: 0, y: 0, inside: false, down: false },
};
let rafId = 0;
let lastTime = 0;
let disposed = false;
function measure() {
const rect = canvas.getBoundingClientRect();
const w = Math.max(1, rect.width);
const h = Math.max(1, rect.height);
const dpr = Math.min(window.devicePixelRatio || 1, opts.maxDpr);
const pw = Math.round(w * dpr);
const ph = Math.round(h * dpr);
if (canvas.width !== pw || canvas.height !== ph) {
canvas.width = pw;
canvas.height = ph;
}
state.width = w;
state.height = h;
state.pixelWidth = pw;
state.pixelHeight = ph;
state.dpr = dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
}
function clear() {
ctx.clearRect(0, 0, state.width, state.height);
}
const effect = createEffect(ctx, state) || {};
function onResize() {
measure();
effect.resize?.(state);
if (!opts.animate || reducedMotion) {
if (opts.clear) clear();
effect.frame?.(state);
}
}
function loop(now) {
if (disposed) return;
if (opts.pauseWhenHidden && document.hidden) {
rafId = requestAnimationFrame(loop);
return;
}
state.delta = lastTime ? (now - lastTime) / 1000 : 0;
state.time = now / 1000;
state.frame += 1;
lastTime = now;
if (opts.clear) clear();
effect.frame?.(state);
rafId = requestAnimationFrame(loop);
}
function onPointerMove(e) {
const rect = canvas.getBoundingClientRect();
state.pointer.x = e.clientX - rect.left;
state.pointer.y = e.clientY - rect.top;
if (!opts.animate || reducedMotion) {
if (opts.clear) clear();
effect.frame?.(state);
}
}
function onPointerEnter() {
state.pointer.inside = true;
}
function onPointerLeave() {
state.pointer.inside = false;
state.pointer.down = false;
}
function onPointerDown() {
state.pointer.down = true;
}
function onPointerUp() {
state.pointer.down = false;
}
const ro = new ResizeObserver(onResize);
ro.observe(canvas);
canvas.addEventListener('pointermove', onPointerMove);
canvas.addEventListener('pointerenter', onPointerEnter);
canvas.addEventListener('pointerleave', onPointerLeave);
canvas.addEventListener('pointerdown', onPointerDown);
window.addEventListener('pointerup', onPointerUp);
measure();
if (opts.animate && !reducedMotion) {
state.playing = true;
rafId = requestAnimationFrame(loop);
} else {
effect.frame?.(state);
}
return function destroy() {
disposed = true;
state.playing = false;
cancelAnimationFrame(rafId);
ro.disconnect();
canvas.removeEventListener('pointermove', onPointerMove);
canvas.removeEventListener('pointerenter', onPointerEnter);
canvas.removeEventListener('pointerleave', onPointerLeave);
canvas.removeEventListener('pointerdown', onPointerDown);
window.removeEventListener('pointerup', onPointerUp);
effect.destroy?.(state);
};
}
/**
* Floating Shapes — Gently drifting geometric shapes as decorative background.
* Category: decorative | Animate: true | Interactive: false | Complexity: low
*/
const __effect = function floatingShapes(ctx, state) {
const COUNT = 22;
const TYPES = ['circle', 'triangle', 'square'];
// Hues spread across violet → teal → amber
const HUES = [270, 300, 220, 170, 45, 80];
let shapes = [];
function spawn(width, height) {
return Array.from({ length: COUNT }, () => {
const filled = Math.random() < 0.3;
return {
x: Math.random() * width,
y: Math.random() * height,
size: 10 + Math.random() * 30,
vx: (Math.random() - 0.5) * 0.4,
vy: (Math.random() - 0.5) * 0.4,
rot: Math.random() * Math.PI * 2,
rotSpeed: (Math.random() - 0.5) * 0.006,
alpha: filled ? 0.08 + Math.random() * 0.1 : 0.18 + Math.random() * 0.28,
hue: HUES[Math.floor(Math.random() * HUES.length)],
filled,
type: TYPES[Math.floor(Math.random() * TYPES.length)],
};
});
}
shapes = spawn(state.width, state.height);
function drawShape(type, size) {
if (type === 'circle') {
ctx.beginPath();
ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
} else if (type === 'triangle') {
const h = size * 0.866;
ctx.beginPath();
ctx.moveTo(0, -h / 2);
ctx.lineTo(size / 2, h / 2);
ctx.lineTo(-size / 2, h / 2);
ctx.closePath();
} else {
ctx.beginPath();
ctx.rect(-size / 2, -size / 2, size, size);
}
}
return {
resize({ width, height }) {
shapes = spawn(width, height);
},
frame({ width, height, reducedMotion }) {
for (const s of shapes) {
if (!reducedMotion) {
s.x += s.vx;
s.y += s.vy;
s.rot += s.rotSpeed;
if (s.x < -s.size) s.x = width + s.size;
if (s.x > width + s.size) s.x = -s.size;
if (s.y < -s.size) s.y = height + s.size;
if (s.y > height + s.size) s.y = -s.size;
}
ctx.save();
ctx.translate(s.x, s.y);
ctx.rotate(s.rot);
drawShape(s.type, s.size);
const color = `oklch(78% 0.18 ${s.hue} / ${s.alpha})`;
if (s.filled) {
ctx.fillStyle = color;
ctx.fill();
} else {
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.stroke();
}
ctx.restore();
}
},
destroy() {
shapes = [];
},
};
}
const canvas = document.getElementById('canvas-effect');
mountCanvas(canvas, __effect, { animate: true, clear: true });
</script> Details
Animated Reduced Motion aria-hidden
shapesgeometricfloatingambientdecorativesubtle
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| COUNT | number | 18 | Anzahl der gleichzeitig schwwebenden Formen |
Drei Formtypen (Kreis, Dreieck, Quadrat) werden zufällig gemischt und beim Resize neu gespawnt. Jede Form rotiert langsam und schwebt in eine zufällige Richtung — Formen wrappen am Rand nahtlos. Sehr niedrige Opazitäten (4–14%) halten den Effekt bewusst unauffällig. Bei reducedMotion sind alle Formen statisch sichtbar, ohne Bewegung oder Rotation.