This is another illustration of how google created the html5 doodles.Last time we reviewed google’s earth day doodle.
Google’s doodle for 160th anniversary of first world fair is a new variety of html5 doodle or we can say this is another idea from google telling programmers what they can do with html5?
This one was conceptualized like magnifying glass/loupe to see through the expo.lets see how google created this doodle.
There are two images/canvases in this doodle one was the normal sized doodle and other one was magnified version of the same doodle.
This magnified image is the background of the doodle when hovered through the lens.To say it simple the larger image was filtered out except the small circle.When you move your mouse through the magnifying glass the background image gets visible.In this way it was made to look like the magnifying effect.
Four gif images that used in the background image for animation.
The Magnifying glass/loupe effect:
The below image clearly explains how the magnifying effect is created.As you can see the hovering causes the outer region to load the background image.Place the lens image over this background to form three layers.