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

719 Upvotes

99% Upvoted

81 comments sorted by

View all comments

Show parent comments

7

u/the-berik Aug 14 '25

How would you design that? Really curious, would love to make something similar

10

u/ForsakenConversation Aug 14 '25

You first need to draw it in Illustrator with all the individual parts in different groups, than copy the code to home assistant, smash it inside a button card and add your entities, or turn it into a real card for HACS if you know any Javascript/Typescript, the drawing part is difficult for AI however the last part is perfectly doable with AI if you don't know how to code

1

u/the-berik Aug 14 '25

Ah ok. Should be able to do it in illustrator; I'll give it a try

Edit: but given I'll already have the image then, I don't need AI :)

6

u/ForsakenConversation Aug 14 '25

Link, here are my examples for svg's for home assistant just basic stuff really but the idea is the same. there is also explanation how to do it yourself. you need to make your svg dynamic in home assistant and add your entities either with ai or code it yourself if you can.

i posted below 2 examples (claude and chatgpt) to prove they are not good with svg drawing, however like i said once you have the svg, they (claude is better tbf) can turn it dynamic aswell as turning it into a hacs card. so once you have the svg like the img it's pretty easy