33 lines
1.4 KiB
JavaScript
33 lines
1.4 KiB
JavaScript
|
// CSS Paint Worklet entry for redoal.com's hero: `background:
|
||
|
|
// paint(redoal-paths)` on the hero box, animated by the page changing
|
||
|
|
// --redoal-t (a registered <number> custom property driven by a CSS
|
||
|
|
// animation - every change repaints). Colors arrive as computed input
|
||
|
|
// properties, so the worklet follows the theme without a palette copy.
|
||
|
|
import { makePaths, drawPaths } from './paths.js';
|
||
|
|
|
||
|
|
registerPaint(
|
||
|
|
'redoal-paths',
|
||
|
|
class {
|
||
|
|
static get inputProperties() {
|
||
|
|
return ['--redoal-t', '--redoal-seed', '--redoal-count', '--accent', '--ink-dim'];
|
||
|
|
}
|
||
|
|
paint(ctx, size, props) {
|
||
|
|
const num = (name, fallback) => {
|
||
|
|
const v = parseFloat(props.get(name).toString());
|
||
|
|
return Number.isFinite(v) ? v : fallback;
|
||
|
|
};
|
||
|
|
const seed = num('--redoal-seed', 7);
|
||
|
|
const count = num('--redoal-count', 47);
|
||
|
|
const t = num('--redoal-t', 0);
|
||
|
|
if (!this.paths || this.seed !== seed || this.count !== count) {
|
||
|
|
this.paths = makePaths(seed, count);
|
||
|
|
this.seed = seed;
|
||
|
|
this.count = count;
|
||
|
|
}
|
||
|
|
const accent = props.get('--accent').toString().trim() || '#47807e';
|
||
|
|
const dim = props.get('--ink-dim').toString().trim() || '#6d6c66';
|
||
|
|
drawPaths(ctx, size.width, size.height, this.paths, t % 1, [accent, dim]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
);
|