# Canvas - Animated electric cable

**URL:** <https://community.grafana.com/t/canvas-animated-electric-cable/99791>\
**Category:** Dashboards\
**Tags:** canvas-plugin\
**Created:** [July 26, 2023, 9:16am UTC](https://community.grafana.com/t/canvas-animated-electric-cable/99791 "2023-07-26T09:16:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![leolb06](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/leolb06/32/36401_2.png) [@leolb06](https://community.grafana.com/u/leolb06)\
**Post date:** [July 26, 2023, 9:16am UTC](https://community.grafana.com/t/canvas-animated-electric-cable/99791/1 "2023-07-26T09:16:28Z")

</div>

- What Grafana version and what operating system are you using?  
Docker image: grafana/grafana:9.4.0

- **What** are you trying to achieve?  
I’m working on a Canvas and i’m trying to add animated electric cable like in the example in the documentation:  
[https://grafana.com/static/img/docs/canvas-panel/canvas-metric-value-9-2-0.mp4](https://grafana.com/static/img/docs/canvas-panel/canvas-metric-value-9-2-0.mp4)  
I don’t know if it’s an element that I can use like a connection, or if it’s a gif that is used for the example.

- **How** are you trying to achieve it?  
I don’t found any way to achieve it, maybe with the style of the connection between element

- Did you follow any online instructions? If so, what is the URL?  
This is the Canvas documentation that I follow:  
[Canvas | Grafana documentation](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/canvas/#canvas)

Does anyone have any idea how I can achieve this?

---

<div class="post-metadata">

**Author:** ![jangaraj](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/jangaraj/32/39197_2.png) [@jangaraj](https://community.grafana.com/u/jangaraj)\
**Post date:** [July 26, 2023, 10:13am UTC](https://community.grafana.com/t/canvas-animated-electric-cable/99791/2 "2023-07-26T10:13:16Z")

</div>

Use background image with animation - gif was used in this particular case. See: [Grafana](https://play.grafana.org/d/7p7JkqWVz/panel-tests-canvas-examples?orgId=1&editPanel=1)

---

<div class="post-metadata">

**Author:** ![mikhailvolkov](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/mikhailvolkov/32/41625_2.png) [@mikhailvolkov](https://community.grafana.com/u/mikhailvolkov)\
**Post date:** [July 26, 2023, 10:36am UTC](https://community.grafana.com/t/canvas-animated-electric-cable/99791/3 "2023-07-26T10:36:03Z")

</div>

@leolb06 You can create your own dynamic and animated elements for the canvas panel, but they require you to add new advanced components and built your own version of Grafana.

We explained how in the blog post:

> **[Pizzeria observability on Grafana Canvas panel | Volkov Labs](https://volkovlabs.io/blog/pizzeria-canvas-20230723/)**
>
> Can you smell it? The aroma of the baked pizza? Do you feel it? The increasing heartbeat rate when you look at the countdown timer where only 30 seconds left? How about joy mixed with pride when watching the number of completed orders increase and...