noiseScale = 10
colorScale = randomProc()
svg`<svg width="${w}" height="${h}">
<defs>
${polygons.map((p, i) => {
const n = simplex.noise3D(p.center.x/noiseScale, p.center.y/noiseScale, seed) * .5 + .5
return `<pattern id="star${i}" viewBox="0,0,5,5" width="20" height="20">
<rect x="-40" y="-40" width="50" height="50" fill="black" stroke="none" />
<g transform="translate(2, 2) rotate(${n * 1080})" >
${array((1-n) * 20 + 1 | 0).map((d,i,arr) => {
const x = map(i, 0, arr.length, -30, 30)
return `<line
x1="${x}"
y1="-40"
x2="${x}"
y2="40"
stroke="black"
stroke-width="${n * 4}"
/>`
})}
</g>
</pattern>`
}).join('\n')}
</defs>
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="white"></rect>
<g transform="translate(${w/3}, ${h/3}) scale(1.1) translate(-${w/3}, -${h/3})">
<!--
${polygons.map((p, i) => `<polygon
fill="url(#star${i})"
stroke="black"
stroke-width="12.5"
points="${p.pts.map(pt => `${pt.x} ${pt.y}`).join(' ')}"
/>`)}).join('\n')}
-->
${polygons.map((p, i) => `<path
fill="url(#star${i})"
stroke="white"
stroke-width="12.5"
stroke-linejoin="round"
d="M ${p.segments[0].center.x}, ${p.segments[0].center.y} ${p.segments.map((seg, i, arr) => `C ${seg.b.x} ${seg.b.y} ${seg.b.x} ${seg.b.y} ${arr[(i + 1) % arr.length].center.x} ${arr[(i + 1) % arr.length].center.y}`).join(' ')} Z"
/>`)}).join('\n')}
</g>
</svg>`
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.
