Published
Edited
Oct 29, 2019
2 stars
{
const doc = document.createElement('div');
const draw = SVG(doc).size(300, 300);
const rect = draw.rect(100,100).fill('#fff').stroke({
width: 1,
color: '#000'
}).move(100,100);
const dir = {x: -1, y: -1};
rect.filter(function(add){
let shadow = [];
range(shadowlength).forEach(i => shadow.push(
add.offset(dir.x * step * i, dir.y * step * i)
.in(add.sourceAlpha)
.colorMatrix('matrix', [
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, 0, 0,
0, 0, 0, opacity, 0
])
));
shadow.push(add.source);
add.merge(shadow);
}).height(100 + shadowlength).width(100 + shadowlength).x(-100).y(-100);
rect.draggy();
return doc;
}
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.
