{
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: "#456268"
});
let group = new p.Group()
for (let i = 0; i < count; i++) {
let child = generate(300, 120, 360 / count * i)
group.addChild(child)
}
group.onFrame = () => {
group.rotate(angle)
}
return canvas
}
function generate(x, y, angle) {
let firstPoint = new paper.Point(x + 4, y + 90)
let secondPoint = new paper.Point(x + 20, y + 40)
let thirdPoint = new paper.Point(x + 50, y + 0)
let forthPoint = new paper.Point(x + 50, y + 90)
let handleIn = new paper.Point(-20, 50);
let secondHandleIn = new paper.Point(-10, 40)
let handleOut = new paper.Point(20, -40);
let firstSegment = new paper.Segment(firstPoint, null, null)
let secondSegment
let thirdSegment = new paper.Segment(thirdPoint, null, null)
let forthSegment = new paper.Segment(forthPoint, null, null)
secondSegment = new paper.Segment(secondPoint, secondHandleIn, handleOut)
let firstPath = new paper.Path(secondSegment, thirdSegment, forthSegment, secondSegment);
firstPath.shadowColor = '#000000',
firstPath.shadowBlur = 5
firstPath.fillColor = '#40a9ff'
secondSegment = new paper.Segment(secondPoint, handleIn, secondHandleIn)
let secondPath = new paper.Path(firstSegment, secondSegment, forthSegment, firstSegment);
secondPath.strokeWidth = 1
secondPath.shadowColor = '#000000',
secondPath.shadowBlur = 10
secondPath.fillColor = {
gradient: {
stops: ['#1890ff', '#40a9ff']
},
origin: firstPoint,
destination: forthPoint
}
let group = new paper.Group({
children: [firstPath, secondPath],
strokeColor: 'black',
})
group.rotate(angle, forthPoint)
return group
}
paper = require("paper")
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.
