The avatar for @makio135
Lionel Radisson
Generative artist, sharing my journey in visual experiments.
Published
Generating SVGs
Edited
Nov 22, 2020
Fork of Generating SVGs
•
2 forks
8 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 SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGs
Generating SVGs
Generating SVGsSVG templateGenerating SVGsGenerating SVGsSVG templateGenerating SVGs
Insert cell
Insert cell
Insert cell
Insert cell
seed = Date.now()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
strokeLength = 40
Insert cell
noiseScale = 800
Insert cell
colorScale = scales.randomProc()
Insert cell
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="red" fill="${colorScale(0)}"></rect>
<g transform="translate(${marginX}, ${marginY})">
${(() => {
return array(ny).map(i => {
const y = i * step
return array(nx).map(j => {
const x = j * step
const noise = simplex.noise3D(x/noiseScale, y/noiseScale, seed)
return `<polyline
opacity="0.6"
transform="translate(${x}, ${y}) rotate(${noise * 360})"
stroke="${colorScale(noise * .45 + .5)}"
stroke-width="${4 - 3 * noise}"
stroke-linecap="square"
points="${-strokeLength / 2},${0} ${strokeLength / 2},${0}"
/>`
}).join('\n')
}).join('\n')
})()}
</g>
</svg>`
Insert cell
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