dog = illo => {
const body = new Zdog.Shape({
addTo: illo,
stroke: 50,
path: [{ y: 0 }, { y: 60 }],
color: '#8dd3c7',
})
const leftEye = new Zdog.Shape({
addTo: body,
translate: { x: -14, z: 20 },
stroke: 20,
color: 'red',
})
const leftPupil = new Zdog.Shape({
addTo: leftEye,
translate: { x: -5, z: 3, y: -3 },
stroke: 10,
color: 'white',
})
const rightEye = leftEye.copy({
translate: { x: 10, z: 20 },
})
const rightPupil = new Zdog.Shape({
addTo: rightEye,
translate: { x: 5, z: 5, y: 2 },
stroke: 10,
color: 'white',
})
const mouth = new Zdog.Ellipse({
addTo: body,
color: 'hotpink',
stroke: 10,
diameter: 20,
translate: { y: 40, z: 20 },
})
return (frame, dogs) => {
body.rotate = { z: Zdog.TAU/32 * Math.sin(frame / 10) }
}
}
Zdog = require('zdog@1/dist/zdog.dist.min.js')
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.
