Generative artist, sharing my journey in visual experiments.
w = width
svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" stroke="blue" fill="none" />
<g transform="translate(${w / 2}, ${h / 2})">
<path
stroke="black"
fill="none"
d="${array(360*8).map((d, i, arr) => {
const innerCircleR = h/2 * 0.8
const cx = Math.cos(TAU / arr.length * i) * (h / 2 - innerCircleR)
const cy = Math.sin(TAU / arr.length * i) * (h / 2 - innerCircleR)
const dx = 20
const dy = 20
const x = cx + Math.cos(TAU * 32 / arr.length * i) * (innerCircleR - dx)
const y = cy + Math.sin(TAU * 32 / arr.length * i) * (innerCircleR - dy)
const x2 = x + Math.cos(TAU * 256 / arr.length * i) * 20
const y2 = y + Math.sin(TAU * 256 / arr.length * i) * 20
return `${i === 0 ? 'M' : 'L'}${x2},${y2}`
}).join(' ')} Z"
/>
${(() => array(48).map((d, i, arr) => {
const s = i % 4 ? 100 : 140
return `<path
transform="rotate(${360/arr.length * i})"
stroke="red"
fill="none"
d="M0,0 C${s/2},${-s/4} ${s/2},${-s/4} ${s},0 C${s/2},${s/4} ${s/2},${s/4} 0,0"
/>`
}).join(''))()}
</g>
</svg>`
import {array, random, randInt, TAU} 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.
