# UI-SVG - Animation

**URL:** <https://discourse.nodered.org/t/ui-svg-animation/42007>\
**Category:** Dashboard\
**Created:** [4 March 2021 12:38 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007 "2021-03-04T12:38:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [4 March 2021 12:38 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/1 "2021-03-04T12:38:35Z")

</div>

Hello I have been working with the UI-SVG node, and I would like to get one step further.

 ![Screenshot 2021-03-04 at 12.33.46](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/e/ce3b6a617706d8041dd053477fab9a94da6ab007.jpeg)  
I have installed some door sensors and manage to have my house blueprint update.

e.g Door Close

 ![Screenshot 2021-03-04 at 12.21.17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4bf95f9a5e8d6eaa4648709290b008b59c6e1058.png)

Door Open

 ![Screenshot 2021-03-04 at 12.22.17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/383edb5d6c3326e135302be33ee4e78f66e58a24.jpeg)

I manage this by sending the following command

msg.payload=[  
{  
"command": "update\_style",  
"selector": "#porta\_da\_sala",  
"attributeName": "stroke",  
"attributeValue": "red"  
},  
{  
"command": "set\_attribute",  
"selector": "#porta\_da\_sala",  
"attributeName": "x2",  
"attributeValue": "210"  
},  
{  
"command": "set\_attribute",  
"selector": "#porta\_da\_sala",  
"attributeName": "y2",  
"attributeValue": "1410"  
}

]  
My question is

In order to have a more clear indication that the door is open how could I animate this ( or any other suggestions indications)

 ![Screenshot 2021-03-04 at 12.21.34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d1adf085fd01437cfca05fb10d8c782d9766e278.jpeg)

considering underling the SVG

" path id="PORTA\_TESTE" d="M676,1335 v-46 a46,46 0 0,0 -46,46 z" style="fill:red;fill-opacity: 1;stroke:black;stroke-width:1;stroke-dasharray: 20;"/\>"

---

<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:** [4 March 2021 13:42 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/2 "2021-03-04T13:42:17Z")

</div>

You could add the 2 elements and use visibility attribute

```auto
<rect id="door1_open_element" x="20" y="20" width="80" height="80" visibility="visible" /> <!-- open -->
<rect id="door1_closed_element" x="120" y="20" width="80" height="80" visibility="hidden"/> <!-- closed-->

```

send

```auto
[
  {
     "command": "set_attribute",
     "selector": "#door1_closed_element",
     "attributeName": "visibility",
     "attributeValue": "visible"
  },
  {
     "command": "set_attribute",
     "selector": "#door1_open_element",
     "attributeName": "visibility",
     "attributeValue": "hidden"
  }
]

```

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [4 March 2021 14:24 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/3 "2021-03-04T14:24:49Z")

</div>

Hi Steve

Thank you very much for your answer, albeit I might not have explain very well.  
What you presented I already have, my main issue is how to animate this quarter pie, build as path,  
"  
path id="PORTA\_TESTE" d="M676,1335 v-46 a46,46 0 0,0 -46,46 z" style="fill:red;fill-opacity: 1;stroke:black;stroke-width:1;stroke-dasharray: 2 "

---

<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:** [4 March 2021 14:41 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/4 "2021-03-04T14:41:16Z")

</div>

> [@JoseGodinho](#):
>
> my main issue is how to animate this quarter pie

what do you mean animate it? in what way?

---

<div class="post-metadata">

**Author:** ![JoseGodinho](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JoseGodinho](https://discourse.nodered.org/u/JoseGodinho)\
**Post date:** [4 March 2021 14:45 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/5 "2021-03-04T14:45:52Z")

</div>

that´s the question ... with circles I change the radius and it looks like a sonar.  
In this case since its a path i dont know how to do it  
I just want something that raises attentions ... blinking ... changing shape..  
Thank you

---

<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:** [4 March 2021 14:57 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/6 "2021-03-04T14:57:02Z")

</div>

ok, so not really a node-red question, more an SVG question.

What you are looking for is the `animate` tag

There are lots of resources out there.

some good demos and details [here](https://css-tricks.com/guide-svg-animations-smil/)

Much of this can also be achieved in the ui-svg "animations" tab

---

<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:** [3 April 2021 14:57 UTC](https://discourse.nodered.org/t/ui-svg-animation/42007/7 "2021-04-03T14:57:08Z")

</div>

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