Tag SVG
Tag SVG RSS 2.0 FeedDesign a Heroicons like SVG icon with Inkscape
Since a few month I try to refactor a few of my web projects. Part of this also involves changes to the design. A topic that I actually like, but have to admit to myself that I'm not good at it. That's why I was very happy about the emergence of Bootstrap and Font Awesome back then. Libraries that you simply use and that's it. For the new design revision, however, I would like to build on Tailwind CSS and Heroicons. But for one of my projects I need a customized icon. I would like to show you how I do it.
Responsive embedded D3 SVG
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.
Inkscape - Change the color of markers
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 DotL as
Start Markers and a Arrow2Lend as End Markers.
I would like to show three ways to turn the markers red.
CSS blur overlay
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 backdrop-filter.
Inkscape - Cut an object in half
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.