u01jmg3/material-design-circle.html

## material-design-circle.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Recreating the Animated Circle Effect as Seen on Google Design</title>
        <style>
            .col {
                position: relative;
                display: block;
                float: left;
                margin: 1.25%;
                background-color: #444;
                color: #fff;
                padding: 100px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

            .col.pink {
                background-color: #ff4081;
            }

            .col.purple {
                background-color: #ab47bc;
            }

            .col.teal {
                background-color: #00bcd4;
            }

            .col.gold {
                background-color: #ffcd40;
            }

            .col.blue {
                background-color: #36c3ff;
            }

            .col.red {
                background-color: #ff5252;
            }

            .col.dark-purple {
                background-color: #4527a0;
            }

            .col.peach {
                background-color: #ffab91;
            }

            .col.green {
                background-color: #8bc34a;
            }

            .col-1-2 {
                width: 47.5%;
            }

            .col-1-4 {
                width: 22.5%;
            }

            .col svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            .col circle {
                fill: rgba(255, 255, 255, 0.1);
            }
        </style>
    </head>
    <body>
        <div class="row">
            <div class="col col-1-2 pink"></div>
            <div class="col col-1-4 purple"></div>
            <div class="col col-1-4 teal"></div>
        </div>
        <div class="row">
            <div class="col col-1-4 gold"></div>
            <div class="col col-1-2 blue"></div>
            <div class="col col-1-4 red"></div>
        </div>
        <div class="row">
            <div class="col col-1-4 dark-purple"></div>
            <div class="col col-1-4 peach"></div>
            <div class="col col-1-2 green"></div>
        </div>
        <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
        <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
        <script>
            (function(){
                $('.col').on('click', function(event){
                    var x = event.pageX;
                    var y = event.pageY;
                    var clickY = y - $(this).offset().top;
                    var clickX = x - $(this).offset().left;
                    var box = this;

                    var setX = parseInt(clickX);
                    var setY = parseInt(clickY);
                    $(this).find('svg').remove();
                    $(this).append('<svg><circle cx="' + setX + '" cy="' + setY + '" r="' + 0 + '"></circle></svg>');

                    setTimeout(function(){
                        var c = $(box).find('circle');
                        c.animate(
                            {
                              'r' : $(box).outerWidth()
                            },
                            {
                                easing: 'easeOutQuad',
                                duration: 400,
                                step : function(val){
                                    c.attr('r', val);
                                }
                            }
                        );
                    });
                });
            }());
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Recreating the Animated Circle Effect as Seen on Google Design</title>
	<style>
	.col {
	position: relative;
	display: block;
	float: left;
	margin: 1.25%;
	background-color: #444;
	color: #fff;
	padding: 100px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

	.col.pink {
	background-color: #ff4081;
	}

	.col.purple {
	background-color: #ab47bc;
	}

	.col.teal {
	background-color: #00bcd4;
	}

	.col.gold {
	background-color: #ffcd40;
	}

	.col.blue {
	background-color: #36c3ff;
	}

	.col.red {
	background-color: #ff5252;
	}

	.col.dark-purple {
	background-color: #4527a0;
	}

	.col.peach {
	background-color: #ffab91;
	}

	.col.green {
	background-color: #8bc34a;
	}

	.col-1-2 {
	width: 47.5%;
	}

	.col-1-4 {
	width: 22.5%;
	}

	.col svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.col circle {
	fill: rgba(255, 255, 255, 0.1);
	}
	</style>
	</head>
	<body>
	<div class="row">
	<div class="col col-1-2 pink"></div>
	<div class="col col-1-4 purple"></div>
	<div class="col col-1-4 teal"></div>
	</div>
	<div class="row">
	<div class="col col-1-4 gold"></div>
	<div class="col col-1-2 blue"></div>
	<div class="col col-1-4 red"></div>
	</div>
	<div class="row">
	<div class="col col-1-4 dark-purple"></div>
	<div class="col col-1-4 peach"></div>
	<div class="col col-1-2 green"></div>
	</div>
	<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
	<script>
	(function(){
	$('.col').on('click', function(event){
	var x = event.pageX;
	var y = event.pageY;
	var clickY = y - $(this).offset().top;
	var clickX = x - $(this).offset().left;
	var box = this;

	var setX = parseInt(clickX);
	var setY = parseInt(clickY);
	$(this).find('svg').remove();
	$(this).append('<svg><circle cx="' + setX + '" cy="' + setY + '" r="' + 0 + '"></circle></svg>');

	setTimeout(function(){
	var c = $(box).find('circle');
	c.animate(
	{
	'r' : $(box).outerWidth()
	},
	{
	easing: 'easeOutQuad',
	duration: 400,
	step : function(val){
	c.attr('r', val);
	}
	}
	);
	});
	});
	}());
	</script>
	</body>
	</html>