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	5	1393	4 March 2021
Contrib-ui-svg: variable height/rotation on input General	4	1316	14 August 2020
UI-SVG ANIMATION by MESSAGE Dashboard	2	1261	4 February 2022
SVG node, change one item's color from another node? General	15	1432	16 December 2020
An animated synopsis according to known states in the NR dashboard Dashboard	4	536	20 August 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