I am an Information Designer based in Berlin, mainly interested in exploring the intersection of technology, data, and design.
<svg class="svg-2" viewBox="-20 -20 ${width} ${height}">
<defs>
<filter id="filter1" x="0" y="0">
<feOffset dx="1" dy="1"/>
<feGaussianBlur stdDeviation="5" result="offset-blur"/>
<feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
<feFlood flood-color="black" flood-opacity=".8" result="color"/>
<feComposite operator="in" in="color" in2="inverse" result="shadow"/>
<feComponentTransfer in="shadow" result="shadow">
<feFuncA type="linear" slope=".35"/>
</feComponentTransfer>
</filter>
</defs>
<path filter="url(#filter1)" id="path-2" class="cls-1" d="
M${pW(1)},${pH(1)}
L${pW(90)},${pH(1)}
L${pW(1)},${pH(50)}
L${pW(90)},${pH(50)}
L${pW(1)},${pH(90)}
L${pW(90)},${pH(90)}"/>
<text id="scroll-text">
<textPath xlink:href="#path-2" startOffset="${offset}%">
${text}
<tspan>⬤</tspan>
</textPath>
</text>
<use id="scroll-line" xlink:href="#scroll" ></use>
</svg>
<style>
svg {
background:#ff7171;
}
.cls-1 {
fill:none;
stroke:blue;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:30;
stroke-miterlimit:10;
}
textPath {
dominant-baseline: central;
fill:black;
}
tspan {
font-size: 28px;
fill: red;
z-index: 10;
}
</style>
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.
