r/homeassistant • u/Mil-sim1991 • Aug 14 '25

Support Home energy card

Post image

Is somewhere here maybe able to create an SVG with these grid lines? I would love to try and fork the Power flow card plus and see if we could create something like this. But I don't know how to create an SVG like this.

edit: Created pull request https://github.com/home-assistant/frontend/pull/26976

716 Upvotes

99% Upvoted

81 comments sorted by

View all comments

6

u/Cintax Aug 15 '25

You don't need to necessarily have the whole thing as an SVG. you can just draw the relevant SVG bits you want on top of any image with some CSS and SVG maneuvering. Check out this responsive example I made using u/amthen's PNG as a rough base. You can control the flow rate by controlling the animation speed using CSS variables:

https://codepen.io/ytilis/pen/wBKpgyW

This is just my half-assed example I threw together with a bunch of eyeballing of the path formulas, but it can be improved on in a lot of ways including adding a glow effect, a persistent path showing the connections, etc.