Published
Edited
May 20, 2020
1 fork
2 stars
Insert cell
Insert cell
w = width
Insert cell
h = w / 188 * 118
Insert cell
hatchesSpacing = 3
Insert cell
hatchesMargin = 3
Insert cell
svg`<svg width="${w}" height="${h}">
<rect width="${w}" height="${h}" fill="none" stroke="blue" />
<g transform="translate(${(w - h) / 2}, 0)">
${(() => {
const count = 5
const squares = []
squareRecusion(0, 0, h, count, squares, count)
return squares.map(s => {
const hs = s.size / 2 // half-size
const p = new Polygon(PVector(-hs, -hs), PVector(hs, -hs), PVector(-hs, hs))
const p2 = new Polygon(PVector(-hs + hatchesMargin, -hs + hatchesMargin), PVector(hs - 2.5 * hatchesMargin, -hs + hatchesMargin), PVector(-hs + hatchesMargin, hs - 2.5 * hatchesMargin))
const hatches = p2.getHatches(0, hatchesSpacing, 0, true)
const color = random() < .2 ? 'red' : 'black'
return `<g transform="translate(${s.x + hs}, ${s.y + hs}) rotate(${randInt(4) * 90})" >
<path
stroke="${color}"
fill="none"
d="${pathFromPolygon(p)}"
/>
<path
stroke="${color}"
fill="none"
d="${pathFromPolygon(p2)}"
/>
<path
stroke="${color}"
fill="none"
d="${pathFromHatches(hatches)}"
/>
</g>`
}).join('\n')
})()}
</g>
</svg>`
Insert cell
Insert cell
Insert cell
import { Polygon, PVector, pathFromPolygon, pathFromHatches, map, random, randInt, PI } from '@makio135/utilities'
Insert cell

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.
Learn more