Simulate a clock with rotating labels:
const initNode = canvas.node('clock').add({
size: 50,
labels: { 0: { remove: true } }
})
initNode.labels(['h', 's']).add({
color: 'white',
size: 12,
radius: 0,
angle: 90,
align: 'bottom-middle',
rotate: true
})
initNode.labels(['h', 's'])
.data(['/\\\n|', '/\\\n|\n|'])
.text(t => t)
const labelIds = Array(12).fill(0).map((n, i) => i + 1)
initNode.labels(labelIds).data(labelIds).add({
text: n => n,
angle: n => (n - 3) * -30,
rotate: true
})
canvas.pause(0.3)
for (let i of labelIds) {
for (let j of labelIds) {
canvas.pause(0.2)
canvas.node('clock').label('s')
.duration(0.2)
.angle((j - 3) * -30)
}
canvas.node('clock').label('h').angle((i - 3) * -30)
}