Skip to content
We're going to recreate Google's Design SVG Circle effect using a few lines of jQuery, some simple HTML and CSS.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
less
index.html
license.txt
readme.md

readme.md

Tuts+ Tutorial: Recreating the Animated Circle Effect as Seen on Google Design

Instructor: Jonathan Cutrell

Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of Material Design and the implications of Google's newest efforts, we're going to focus on an interesting technique Google has employed on their Design landing page. When the user clicks on one of the blocks, an SVG circle expands from the point of the user's click to fill most of the box.

We're going to recreate this effect using a few lines of jQuery, some simple HTML and CSS.

Source files for the Tuts+ tutorial: Recreating the Animated Circle Effect as Seen on Google Design

Available on Tuts+ July, 2014

View the demo. Demo created at CodePen.io. You can find this one at http://codepen.io/jcutrell/pen/zrnvG.

You can’t perform that action at this time.