The avatar for @makio135
Lionel Radisson
Generative artist, sharing my journey in visual experiments.
Published
Generating SVGs
Edited
Apr 25, 2020
Fork of Generating SVGs
•
1 fork
3 stars
Generating SVGs
Abstract paintingsGenerating SVGsBlend modes & ClipPathsRecursive TruchetGenerative SVG templateAnimating SVGsSVG templateGenerating SVGsGenerating SVGsGenerating SVGsSVG templateGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGs
Generating SVGs
Generating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsSVG templateGenerating SVGsGenerating SVGsSVG templateGenerating SVGs
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
seed = Date.now()
Insert cell
Insert cell
Insert cell
p = getRandomPalette()
Insert cell
palette = shuffle(p)
Insert cell
Insert cell
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="${palette[0]}"></rect>

<g transform="translate(${w/2}, ${h/2})">
${array(n).map(i => {
const r = randInt(5, 50) * 20
const to = PVector.fromAngle(random(Math.PI)).setMag(r)
return `<g transform="rotate(${random(720)})">
<path
fill="none"
stroke="${palette[randInt(1, palette.length)]}"
stroke-width="${randInt(1, 10) ** 2}"
stroke-dasharray="${randInt(2, 10)} ${randInt(2, 20)}"
d="M ${-r} 0 A ${r} ${r} 0 0 0 ${to.x} ${to.y}"
/>
</g>`
}).join('\n')}
</g>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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