How does that water droplet animation work ?

[PrajjvalMehra]

I am very curious to how that water droplet animation has been achieved

[lucacasonato]

It is an SVG that is animated by some client side JavaScript (an island). You can find the source code at https://github.com/denoland/fresh/blob/main/www/islands/LemonDrop.tsx.

@hashrock implemented it, and might have answers if you have more specific questions.

[hashrock]

Glad to see someone interested in SVG animation.

I first designed this concept in figma. Then I output the SVG and created the lemon part and the WaveTank part as separate SVG elements.

In the lemon part, the function called from requestAnimationFrame edits the d attribute of the path element directly. Simply up and down the control point for this area.

For WaveTank, I referred this article.

https://gamedevelopment.tutsplus.com/tutorials/make-a-splash-with-dynamic-2d-water-effects--gamedev-236

It's very easy to add interactivity, which I didn't include in the LP.

Now we just need to make it look like these two are working together. The only way to do this is to visually adjust the timing, and the code gets more and more jumbled. but it's enjoyable😆