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



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


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.


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