# SVG animation tank level
**URL:** https://discourse.nodered.org/t/svg-animation-tank-level/86360
**Category:** Dashboard
**Created:** [12 March 2024 02:09 UTC](https://discourse.nodered.org/t/svg-animation-tank-level/86360 "2024-03-12T02:09:01Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Youssef](https://discourse.nodered.org/u/Youssef)
#### Post date: [12 March 2024 02:09 UTC](https://discourse.nodered.org/t/svg-animation-tank-level/86360/1 "2024-03-12T02:09:01Z")
Hello everyone
i want to make a tank level of water animation in dashboard
first i made rectangle with SVG editor (selector) after that i made a function node where i put my command:
\
'const msgInput = msg.payload; //input
const msgOutput =
{ payload:
{
command:"set\_attribute", // "update\_style" means update CSS
selector:"#eau", // id's string
attributeName:"height",// Width
attributeValue: msgInput // parameter's new value
}
};
return msgOutput; //output
\
all i want to know what i should make in attribute name to have the right aniamtion of water because by this code i couldn't get what i want
please can anyone help me and thank you
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [12 March 2024 04:25 UTC](https://discourse.nodered.org/t/svg-animation-tank-level/86360/2 "2024-03-12T04:25:24Z")
have a look here...
> [@Water Tank Level Visualization](https://discourse.nodered.org/t/water-tank-level-visualization/83079/4):
>
> With such image it goes kind of complicated. Simple but well readable with ui\_template [image] \ .wrapper{ position: absolute; width: 90%; height: 90%; margin: auto; inset: 0; overflow:hidden; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; } .txt{ position: absolute; width: 100%; top: 45%; text-align: center; font-size: xx-large; font-weight: 70…
> [@Water Tank Level Visualization](https://discourse.nodered.org/t/water-tank-level-visualization/83079/11):
>
> Built in Default Level guage in dashboard. [{"id":"4b438d01afcd708b","type":"inject","z":"ae4889735061574b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":320,"y":180,"wires":[["c54d2bc07606309c"]]},{"id":"6164a0cc4a012d60","type":"ui\_gauge","z":"ae4889735061574b","name":"","group":"833d4cbc08a98b24","order":1,"width":6,"height":6,"gtype":"wave","title":"Tank Level","l…
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [11 April 2024 04:25 UTC](https://discourse.nodered.org/t/svg-animation-tank-level/86360/3 "2024-04-11T04:25:31Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.