Generative artist, sharing my journey in visual experiments.
w = width
h = w / 188 * 118
svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" fill="none" stroke="yellow" />
<g transform="translate(${w/2}, ${h/2})">
${array(3).map(i => {
const p = Polygon.fromPath(`M${-r} 0 A ${r} ${r} 0 0 1 ${r} 0 A ${r} ${r} 0 0 1 ${-r} 0 Z`)
const hatches = p.getHatches(PI/4, 3, 2, true)
const c = ['cyan', 'magenta', 'yellow'][i]
return `<g transform="rotate(${120 * i}) translate(100)">
${pathFromHatches(hatches, `stroke="${c}" fill="none"`)}
<circle
stroke="${c}"
fill="none"
r="${r}"
/>
</g>`
}).join('\n')}
</g>
</svg>`
r = 200
import { array, Polygon, pathFromPolygon, pathFromHatches, PI } from '@makio135/utilities'
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.
