CodePenChallenge Flying Birds Sunset

Description

This is just a simple mouse pointer effect, that when the user moves the mouse on the screen, birds will come out, then will fly randomly everywhere.

I created the SVG background by using Inkscape. I put rectangular shape at the whole canvas, then added gradient color. For the clouds, I used filter -> overlay -> clouds (I'm not sure if my English translation is correct), then fixed the settings based on how I liked it. For the sun, I just use ellipse to make a circle, and blurred it by using Filter -> Blur.

There is a different transforms for the movement of the bird, and its wings, so that they will not intersect with each other.

This also works in smart phone using touch event.

Resources

I created the background image using Inkscape

I used VueJS to create the functionality.