Iron-based life form descended from T-72
Published
Edited
Sep 5, 2021
1 fork
2 stars
html`${onml.stringify(wave({width: 800, height: 400}))}`;
wave = cfg => {
const defs = ['filter', {
xmlns: 'http://www.w3.org/2000/svg',
id: 'filter0_d',
x: -cfg.width >> 1,
y: -cfg.height >> 1,
width: cfg.width,
height: cfg.height,
filterUnits: 'userSpaceOnUse',
'color-interpolation-filters': 'sRGB'
},
['feFlood', {'flood-opacity': 0, result: 'BackgroundImageFix'}],
['feColorMatrix', {in: 'SourceAlpha', type: 'matrix', values: '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 100 0'}],
['feOffset'],
['feGaussianBlur', {stdDeviation: 50}],
['feColorMatrix', {type: 'matrix', values: '0 0 0 0 0 0 0 0 0 .6 0 0 0 0 1 0 0 0 3 0'}],
['feBlend', {mode: 'normal', in2: 'BackgroundImageFix', result: 'effect1_dropShadow'}],
['feBlend', {mode: 'normal', in: 'SourceGraphic', in2: 'effect1_dropShadow', result: 'shape'}]
];
const res = ['g', onml.tt(cfg.width >> 1, cfg.height >> 1, {filter: 'url(#filter0_d)'})];
for (let y = -1; y < 1; y += .045) {
const pat = [];
const bound = 1; //Math.sqrt(1 - Math.pow(y, 2));
for (let x = -bound; x < bound; x += .05) {
pat.push('L',
Math.round(x * cfg.width/6 - y * cfg.width/6 - cfg.width/30 * Math.sin(Math.PI * x)),
Math.round(y * cfg.width/12 + x * cfg.width/12 + cfg.width/20 * Math.sin(Math.PI * y)/y * Math.sin(Math.PI * x))
);
}
pat[0] = 'M';
const sw = .7 * (y + 1);
res.push(['path', {style: 'stroke:#0f5;stroke-width:' + sw + 'px;fill:none;', d: pat.join(' ')}]);
}
return onml.gen.svg(cfg.width, cfg.height)
.concat([defs, ['rect', {style: 'background: #000', width: cfg.width, height: cfg.height}], res]);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
