Hey there thanks for checking out my work, I hope you find something interesting or even make an improvement to one of my notebooks. Feel free to contact me with any questions.
Public
Edited
Jan 20, 2022
Not A Something
html`
${mySVG()}
`
mySVG = () => {
let innerStuff = "";
for (let i = 0; i < 1000; i++) {
innerStuff += SVGCircle(
random(0, 300),
random(0, 300),
Math.random() * 50,
randomColor()
);
}
let final = svg`<svg viewBox="0 0 300 300" > ${innerStuff} </svg>`;
return final;
}
SVGCircle = (x, y, r, fill) =>
`
<rect x="${x}" y="${y}" width="${r}" height="${r}" fill=${randomColor()} stroke="white" stroke-opacity="0.5">
<animate attributeName="x"from="${x}" to="${random(
random(0, 200),
random(0, 200)
)}" dur="50s" repeatCount="indefinite"
/>
<animate attributeName="y" from="${y}" to="${random(
random(0, 200),
random(0, 200)
)}" dur="50s" repeatCount="indefinite"
/>
<animate attributeName="width" from="${r}" to="${
Math.random() * 50
}" dur="50s" repeatCount="indefinite"
/>
<animateTransform attributeName="transform"
type="rotate"
from="1 ${x + r / 2} ${y + r / 2}"
to="360 ${x + r / 2} ${y + r / 2}"
dur="10s"
repeatCount="indefinite"/>
</rect>
`
random = (lower = 0, upper = 1) =>
Math.round(Math.random() * (upper - lower) + lower)
randomColor = () => `hsl(${random(100, 320)},80%,60%,.5)`
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.
