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

Questions
1

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

image_processing20201203-2934-126rcp9
image_processing20201203-2934-126rcp91600×1200 111 KB

image_processing20210906-12244-12k3dgz
image_processing20210906-12244-12k3dgz800×600 41.9 KB

download

Sorry for the low-quality image I attached.

Any advice would be appreciated!

Thanks and kind reards,
Davide

2

I think you should go in that direction:

1 Like
3

Also, not direeeectly related, but saw recently on blue bird app - you can do similar things with SVG filters, since they are a bit easier to work with in 2D than three.js.

4

@akella is your man to look for… this tutorial 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…

1 Like
5

2d-context may be an option somehow

2 Likes
6

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