Public
Edited
Sep 27, 2023
Insert cell
Insert cell
{
const canvasWidth = 720
const canvasHeight = 480
const center = [0.5 * canvasWidth, 0.5 * canvasHeight]
const canvas = DOM.canvas(canvasWidth, canvasHeight)
const p = new paper.PaperScope()
p.setup(canvas)

const background = new p.Path.Rectangle({
point: [0, 0],
size: [canvasWidth, canvasHeight],
fillColor: "#76e1fe"
})

const path = new p.Path();
path.segments = [
[[260, 240], null, [0, 25]],
[[310, 290], [-25, 0], [25, 0]],
[[360, 240], [0, 25], [0, -25]],
[[410, 190], [-25, 0], [25, 0]],
[[460, 240], [0, -25], null]
];
path.strokeColor = 'black';
path.fullySelected = true;

const line = new p.Path({
segments: [[400, 100], [400, 300]],
strokeColor: 'black'
});
const c = new p.Path.Circle({
center: [200, 200],
radius: 200,
strokeColor: 'black'
})
c.fullySelected = true;

return canvas
}
Insert cell
Insert cell
paper = require("paper")
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