Below is an iframe that displays a different shape and color based on its size. This was done using CSS Media Queries.
Additionally, we can toggle the "smooth" transition by using Media Queries.
We could make the toggle more granular, however that would require many more media queries and take away from the purpose of this project.
Sprite
As with shapes, we will be using an iframe below. However, instead of shapes, we will be using sprites.
This typically is done via a div with a background image and overflow: hidden. However, for this exercise we will use an image since you cannot break up background-offset into left and top exclusively.
Once again, there are options below for your inspecting pleasure.