# Animation SVG object by node-red-contrib-ui-svg

**URL:** <https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [12 September 2023 09:25 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230 "2023-09-12T09:25:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bobfield](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobfield/32/83723_2.png) [@bobfield](https://discourse.nodered.org/u/bobfield)\
**Post date:** [12 September 2023 09:25 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230/1 "2023-09-12T09:25:01Z")

</div>

Dears,

I am using the node-red-contrib-ui-svg to shows an industrial dashboard. I would have an animation where a rectangle can be expand and retract, to show like filling tank moviment. But I don't get find the correct effect using the Animate guide of the svg node. Can someone help me?

Thanks

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 September 2023 21:59 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230/2 "2023-09-12T21:59:38Z")

</div>

Hi @bobfield,

Your question looked very simple to me. Just animation a gradientFill offset property and we are ready. But it seems indeed not that easy. Although I thought I have already created something like that. But can't find it anymore, so perhaps I didn't...

So I wouldn't know at the moment how to animate the fill of _any shape_.

However I managed to implement something for a rectangle:

![liquid_level](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79bca31cb5756829ceacc6a1d51120478a3ee001.gif)

```auto
[{"id":"7e84c549.092b4c","type":"inject","z":"f6f2187d.f17ca8","name":"Start animation","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='box_height_animation']\",\"action\":\"start\"}","payloadType":"json","x":1020,"y":340,"wires":[["030150f711975909"]]},{"id":"5310b15.10e675","type":"inject","z":"f6f2187d.f17ca8","name":"Stop animation","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='box_height_animation']\",\"action\":\"stop\"}","payloadType":"json","x":1020,"y":380,"wires":[["030150f711975909"]]},{"id":"030150f711975909","type":"ui_svg_graphics","z":"f6f2187d.f17ca8","group":"eac9211dd6c76f9b","order":1,"width":0,"height":0,"svgString":"<svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"50\" y=\"50\" width=\"100\" height=\"150\" style=\"fill:CornflowerBlue\"></rect>\n<rect x=\"50\" y=\"50\" width=\"100\" height=\"150\" style=\"fill:white\" id=\"water_rectangle\"></rect>\n<rect x=\"50\" y=\"50\" width=\"100\" height=\"150\" style=\"stroke:black;fill:none\"></rect>\n</svg>\n","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"box_height_animation","targetId":"water_rectangle","classValue":"","attributeName":"height","transformType":"rotate","fromValue":"0","toValue":"150","trigger":"msg","duration":"4","durationUnit":"s","repeatCount":"1","end":"freeze","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}","name":"","x":1260,"y":340,"wires":[[]]},{"id":"eac9211dd6c76f9b","type":"ui_group","name":"Rectangle animation demo","tab":"b7631828414c3b00","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"b7631828414c3b00","type":"ui_tab","name":"SVG stuff","icon":"dashboard","disabled":false,"hidden":false}]

```

However it is more a workaround, that contains 3 rectangles on top of each other:

1. First I draw a blue filled rectangle
2. On top of that I draw a white filled rectangle
3. On top of that I draw a non-filled rectangle to show a black border

I animate the height of the white rectangle. Because if you only create 1 (blue filled) rectangle and you animate its height, then the water will fill from top to down (instead from bottom to top). Because the Y axis is going downwards.

If anybody knows a cleaner solution, don't hesistate to share it here!!!!!!

Bart

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 September 2023 22:48 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230/3 "2023-09-12T22:48:44Z")

</div>

> [@BartButenaers](#):
>
> If anybody knows a cleaner solution

Not sure about cleaner (or even 100% relevant) but similar & maybe useful to someone...

> [@Contrib-ui-svg: variable height/rotation on input](https://discourse.nodered.org/t/contrib-ui-svg-variable-height-rotation-on-input/31570/3):
>
> I had 10 mins to kill... [{"id":"22a08573.3b113a","type":"ui\_svg\_graphics","z":"26ec3e81.85d802","group":"60b74369.74367c","order":3,"width":"14","height":"10","svgString":"\<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 500 500\" width=\"100%\" height=\"100%\"\>\n \<defs id=\"svgEditorDefs\"\>\n \<linearGradient gradientUnits=\"objectBoundingBox\" id=\"lgrd2-peachpuff-sienna-v\" spreadMethod=\"pad\" x1=\"0%\" x2=\"0%\" y1=\"0%\" y2=\"100%\"\>\…

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 September 2023 22:02 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230/4 "2023-09-13T22:02:48Z")

</div>

Hi Steve,

Thanks for the link! I had yesterday also tried to use a fill gradient to accomplish this, but after a number of experiments I quitted. And then I started the above flow by using duplicate shapes on top of each other.

Tonight I found a solution, and I have written a new [tutorial](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Display-partially-filled-shapes) on our wiki page, which for example explains how to fill any path simply using a _ **linear gradient** _:

![svg_fill_path](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bcb1c383f46138f910e301a8974db30005e7d3bc.gif)

Note that I failed to create an animation, by animating the offset of the linear gradient automatically. Not sure why it fails, because in [this](https://stackoverflow.com/questions/8582416/animating-a-svg-gradient) StackOverflow discussion they say it can be done (using percent offset values).

---

<div class="post-metadata">

**Author:** ![bobfield](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bobfield/32/83723_2.png) [@bobfield](https://discourse.nodered.org/u/bobfield)\
**Post date:** [16 September 2023 09:56 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230/5 "2023-09-16T09:56:06Z")

</div>

Hi BartButenaers,

Thanks for your help. Your solution solved my problem. It brings a great help for my application.

Best regards,

Roberto

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [30 September 2023 09:56 UTC](https://discourse.nodered.org/t/animation-svg-object-by-node-red-contrib-ui-svg/81230/6 "2023-09-30T09:56:19Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.