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

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 mo…

[image] BartButenaers: If anybody knows a cleaner solution Not sure about cleaner (or even 100% relevant) but similar & maybe useful to someone... [image] Contrib-ui-svg: variable height/rotation on input General I had 10 mins to kill... [{"id":"22a08573.3b113a","…

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 on our…

Hi BartButenaers, Thanks for your help. Your solution solved my problem. It brings a great help for my application. Best regards, Roberto

Node-RED

Node-RED Forum

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

General

Steve-Mcl 12 September 2023 22:48 3

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

Topic		Replies	Views
UI-SVG - Animation Dashboard	6	1362	3 April 2021
Contrib-ui-svg: variable height/rotation on input General	5	1294	28 August 2020
UI-SVG ANIMATION by MESSAGE Dashboard	3	1229	6 April 2022
SVG node, change one item's color from another node? General	16	1375	30 December 2020
An animated synopsis according to known states in the NR dashboard Dashboard	5	501	19 September 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

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

Related topics