Published unlisted
Edited
Jul 7, 2022
Importers
filthy('brightness(300%)')
{
let svg = d3.create('svg').attr('width',640).attr('height',320)
svg.append('defs').html(()=> filthy('invert(50%) blur(2px)'))
svg.append('g').attr('filter','url(#filter)').append('text').attr('fill','black') .attr("font-size", 32)
.attr("font-family", "sans-serif").attr('x','200').attr('y','200').text('oi')
return format(svg.node().outerHTML)
}
paper = {
let bg =
html`<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" >
<filter id='roughpaper' width="256" height="256" >
<feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" stitchTiles ='stitch' />
<feDiffuseLighting in='noise' lighting-color='#fff' surfaceScale='${3}'>
<feDistantLight azimuth='45' elevation='50' />
</feDiffuseLighting>
</filter>
<rect x="0" y="0" width="256" height="256"
filter="url(#roughpaper)" fill="#fff"></svg>`
return 'data:image/svg+xml;base64,'+window.btoa(bg.outerHTML)
}
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.
