The most D3 examples that I can find are not responsive embedded SVG. I guess the main reason for that is not to confuse the reader of a tutorial with stuff outside of D3. With the help of How to Scale SVG from Amelia Bellamy-Royds I would like to show on a minimal D3 example how to make the resulting SVG responsive.
Markers of a stroke have one problem in Inkscape,
they are always black. Here a small example of a unfilled shape with red Stroke paint, a
Start Markers and a
Arrow2Lend as End Markers.
I would like to show three ways to turn the markers red.
Unfortunately it is not possible to create a real blur overlay with CSS for all browsers at the moment. Only webkit
has the backdrop-filter. But all other browsers mostly
support a blur filter. This will not really work like a overlay, more like a filter that will be propagated
bottom-up. In other words, the filter works only for a hole element or not. It's impossible to have something like a
div overlay element that blurs only a part of an image like the
I guess some will smile about this post. But for me it wasn't that trivial to cut an object exactly in half with Inkscape. Maybe there are better ways to do that, but here is my simple one.