<svg height=300 width=1000 >
<defs class="defs-element">
<filter class="shadow-filter-element" id="custom" y="-50%" x="-50%" height="200%" width="200%">
<feGaussianBlur class="feGaussianBlur-element" in="SourceAlpha" stdDeviation="7" result="blur"></feGaussianBlur>
<feOffset class="feOffset-element" in="blur" result="offsetBlur" dx="20" dy="40" x="8" y="8"></feOffset>
<feFlood class="feFlood-element" in="offsetBlur" flood-color="blue" flood-opacity="0.3" result="offsetColor"></feFlood>
<feComposite class="feComposite-element" in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite>
<feMerge class="feMerge-element"><feMergeNode class="feMergeNode-blur" in="offsetBlur"></feMergeNode>
<feMergeNode class="feMergeNode-graphic" in="SourceGraphic"></feMergeNode></feMerge>
</filter>
</defs>
<path
filter='url(#custom)'
stroke='pink'
d='M50,50 L100,40 L150,100 L200,50 L250,50 L300,150 '
fill='none'
stroke-width=5
>
</path>
</svg>
<svg height=300 width=1000>
<defs>
<linearGradient id="test-gradient-test">
<stop offset="0%" stop-color="red" />
<stop offset="50%" stop-color="black" stop-opacity="0%" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<path
d='M50,150 L100,40 L150,80 L200,50 L250,50 L300,150 '
fill='none'
stroke-width=5
fill='url(#test-gradient-test)'
stroke='url(#test-gradient-test)'
>
</path>
<path
transform='translate(0,150)'
d='M50,150 L100,40 L150,80 L200,50 L250,50 L300,150 '
fill='url(#test-gradient-test)'
</path>
</svg>
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.
