# Help Needed: Creating an Animated Energy Stroke Circle Effect in Three.js (Similar to Siri)

**URL:** <https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736>\
**Category:** Questions\
**Tags:** shaders\
**Created:** [October 12, 2024, 5:41pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736 "2024-10-12T17:41:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [October 12, 2024, 5:41pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736/1 "2024-10-12T17:41:40Z")

</div>

Hi guys!

I’m wondering if someone can help me with a tutorial or advice on how to create a circle effect in Three.js, similar to the Siri effect. I would like to have a circle shape with an animated stroke (similar to an energy effect). I tried to find examples but haven’t had any luck!  
 ![images-1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/d/5dc3f94356e5b44c7c79bc993d193d5267316aec.jpeg)

 ![image_processing20201203-2934-126rcp9](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/3/c3d033a120a845f1f63511612c84f6706dd35aad.gif)  
 ![image_processing20210906-12244-12k3dgz](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/0/40abd0d68c340403fbbd9bbb2fdf416d7a0c35cd.gif)  
 ![download](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/4/748192ceedd6c90057e517b4e0427c37bbea868d.jpeg)

Sorry for the low-quality image I attached.

Any advice would be appreciated!

Thanks and kind reards,  
Davide

---

<div class="post-metadata">

**Author:** ![Lukasz\_Mestales](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lukasz_mestales/32/65638_2.png) [@Lukasz\_Mestales](https://discourse.threejs.org/u/Lukasz_Mestales)\
**Post date:** [October 12, 2024, 5:52pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736/2 "2024-10-12T17:52:48Z")

</div>

I think you should go in that direction:

> **[Shadertoy](https://www.shadertoy.com/view/msVBzw)**
>
> Build shaders, share them, and learn from the best community.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [October 12, 2024, 6:10pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736/3 "2024-10-12T18:10:52Z")

</div>

Also, not direeeectly related, but saw recently on blue bird app - [you can do similar things with SVG filters](https://x.com/bbssppllvv/status/1844450794298634307), since they are a bit easier to work with in 2D than three.js.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [October 12, 2024, 7:04pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736/4 "2024-10-12T19:04:05Z")

</div>

@akella is your man to look for… [this tutorial](https://www.youtube.com/watch?v=CC__iJ8IIqc&t=3575s) has a really great starting point to work from that is along the lines of what you need… it’d also give you a great insight into the process that goes into building complex performant effects…

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 12, 2024, 7:12pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736/5 "2024-10-12T19:12:58Z")

</div>

2d-context may be an option somehow

https://codepen.io/prisoner849/embed/preview/XWQzOgM?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=XWQzOgM

---

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [October 13, 2024, 6:27pm UTC](https://discourse.threejs.org/t/help-needed-creating-an-animated-energy-stroke-circle-effect-in-three-js-similar-to-siri/72736/6 "2024-10-13T18:27:05Z")

</div>

Thanks guys for all suggestions!  
I found the first useful as start!