Public
Edited
Oct 24, 2023
canvas = {
const context = DOM.context2d(width, height);
context.fillStyle = "hsl(216deg 100% 13%)";
context.fillRect(0, 0, width, height);
function drawShinyCircle(x, y, radius) {
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2);
// Apply a globalCompositeOperation for the shiny effect (e.g., 'lighter')
context.globalCompositeOperation = "lighter";
// Fill the circle with a gradient for the shiny effect
const gradient = context.createRadialGradient(x, y, 0, x, y, radius);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.7)");
gradient.addColorStop(1, "transparent");
context.fillStyle = gradient;
context.fill();
context.closePath();
// Reset globalCompositeOperation to default
context.globalCompositeOperation = "source-over";
}
// Draw multiple shiny circles
drawShinyCircle(100, 100, 10);
drawShinyCircle(200, 200, 30);
drawShinyCircle(300, 300, 20);
return context.canvas;
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
height = 600
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.
