The weather box is a pixel generated map of svg squares that change color and animate based on the current weather. Enter the name of a city into the form and house and landscape will update to reflect that region's current weather. The local time will also impact the display.
When the weather is cold, the background gets progressively bluer and for warmer temperatures, it gets red.
Sixteen representations of weather are available, and some are animated in pure CSS! Stars twinkle, thunder claps, and snow swirls.
To inflict any type of weather on the tiny house, simply enter "God Mode" and enter whatever weather you desire.
Live example at http://www.kristenpaynedesign.com/weather
- Open Weather Map API
- Javascript ES6
- CSS3
- HTML5
There is a constructor file that generates the SVG. There is also a build mode that you can toggle to console log the coordinates of a specific pixel that will also highlight it.