A practical animation

I've used and combined techniques which control the Dynamic Animation on the bottom of the page and the Interactive Prototyping Tool.

What you see here is the admin view of the prototyping tool. The white squares with dots open a menu for some actions and further styling options.
Elements can be styled globally from the very first white square with dots and also they can be styled separately.

Saving is disabled for the purpose of this demo to not create unnecessary data.

Interactive Prototyping Tool [version: 4.4311111]

Dynamic animation

This came first.
It is a constantly moving and changing animation. The colors have their different properties like saturation and light altered with the sliders. Also the dynamics of clouds, rain, snow and leaves can be controlled with the sliders.

About

This interactive dynamic animation is created using HTML, SVG, CSS and Javascript. It works on every device with a web browser because the elements are fundamentally regular web elements that make up a web page. The possibilities are abundant.
This animation is controllable by sliders and some buttons. The first three buttons choose time of day (daylight, sunset, night); Fourth button adds music for enhancing emotional inclusion; Three purple buttons on the first row are controlling the speed of the transition of colors. Next up are sliders.
The sliders control, from top to bottom: daylight, season, wind speed, cloudiness, precipitation. The sliders are also interconnected. For example: precipitation amount depends on cloudiness. Also the speed of the wind affects direction of precipitation and leaves and the amount of leaves. The amount of leaves is also affected by season slider. The season slider also can change between rain and snow.