Show HN: I built 48 lightweight SVG backgrounds you can copy/paste

Re:Show HN: I built 48 lightweight SVG backgrounds you can c... by visiwig on Thursday March 19, 2026 @12:27AM (#47434931)

Hey great eye. I generally design in Illustrator with a plugin by Astute graphics that allows me to reduce unnecessary anchor points, run the exported SVG through SVGOMG, and then spend solid time hand coding each background in VS Code with the SVG extension by Jock that let's me see a live preview. Then on the actual site the customizer script I wrote will catch some attributes that aren't needed and remove them, but it's far from perfect.

[ Parent | on HN ]

Re:Show HN: I built 48 lightweight SVG backgrounds you can c... by Theodores on Friday March 20, 2026 @11:14AM (#47455797)

Have you tried the Jetbrains tools? The free one - WebStorm - comes with live preview.

Nowadays I put my SVG for icons in CSS as pseudocode elements. This means you can't 'use' or 'currentColor', but I am okay with that for icons.

https://en.wikipedia.org/wiki/Lea_Verou

Lea Verou got me started on this particular technique, the gotcha is that you have to escape the hash characters with %023. Her presentations can be found on Youtube, and Lea also has a fab website.

[ Parent | on HN ]

Re:Show HN: I built 48 lightweight SVG backgrounds you can c... by visiwig on Tuesday March 24, 2026 @11:22PM (#47512854)

I'm not familiar with, and have not tried, any of the Jetbrains tools.

When you say psuedocode, are you talking ::before ::after or something else? I've used svg icons on elements as background-image DataURIs -- probably similar if not the same thing. Yes I know who Lea Verou is and she's influenced one of my SVG tools I've released.

[ Parent | on HN ]