Published
Edited
Feb 26, 2022
1 star
Insert cell
Insert cell
Svg = require('svg.js').catch(e => window.Svg)
Insert cell
{
let canvas = html`<svg id="drawing"></svg>`
let draw = Svg(canvas).viewbox(0, 0, 300, 140)
var text = draw.text(function(add) {
add.tspan( 'Nicolle & Russell sitting in a tree.' )
})

text
.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
.animate(1000, '<>')
.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
.loop(true, true)
// draw.rect(100, 100).fill('#f06')
return canvas
}
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