Animated Trees

This page uses procedurally generated SVG paths to create an animated forest. NOTE: This page is not mobile optimized and is best enjoyed on a 16:9/ normal desktop screen

As a standalone page

Explanation:

Ground:

The floor is composed of 3 stacked sinewaves with different frequencies and amplitude added together.

Trees:

A Tree consists of 4 separate svg paths: 3 triangles for the leaves/needles and a rect for the stem. A helper function creates the correctly positioned tree from a template and pastes it to the desired points on the ground plane.

Interactivity

you can change some properties by clicking on the cog symbol and changing the sliders