SVGFM

This app was built from scratch by chriskirknielsen (that's me talking in third person!). I hope it is as useful to you as it is to me! It's free to use, but hey if you want to support me, you could perhaps check out my shirt/sticker designs and maybe buy one if anything catches your eye?

---

Why?

I love SVG so much, but its filters are a little complex to wrap my smooth brain around… so to make it a little easier, here is a tool to dynamically build an SVG filter with a GUI. An SVG Filter Maker, or SVGFM, for short…

Notes & Instructions

• Drag an output port into an input port to link its value dynamically.
• Drag a node into the sidebar to remove it (the "Expand" button works as a target if the sidebar is collapsed!).
• Hold down Shift to reveal an unlink button between connected ports.
• When a result node is not plugged into another port, it will act as a "final output".
• The app is relatively permissive and allows connections that might not be valid (like a standard string into a Graphic in attribute).
• Color inputs accept named colors, non-hexidecimal formats, and even CSS custom properties, but the preview will not render correctly in most cases.
• Some circular reference is allowed betwen nodes, but is currently not actively checked against… divide by zero at your own risk.
• This app will mostly do what you tell it to. This means that there is no real validation to ensure it is valid SVG code, though if the preview is broken, the configuration is likely invalid.
• Found an accessibility issue? Please tell me! (except about target=_blank links, simply because I don't want to accidentally cause you to lose your filters)

Give feedback & Contribute

I'm happy to take your feedback on Mastodon, but the SVGFM repo on GitHub is works too, which is also the place you'd contribute if you were so inclined. Thank you!

Credits

UI button icons provided by iconsvg.xyz.

Adorable kitten in the preview from placekitten.com.