<div class="chrome-logo"></div>
// Variables
$logo-size: 450px;
$base-font: 16px;

// Mixins
@mixin center($offset) {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -#{$offset};
  margin-left: -#{$offset};
}

// Functions
@function rem-calc($target, $context: $base-font, $unit: 'em'){
  @return ($target/$context)#{$unit};
}

// Styles
body {
  font-size: 6px;
  
  @media only screen and (min-width: 480px){
    font-size: 10px; 
  }
  
  @media only screen and (min-width: 800px){
    font-size: $base-font; 
  }
}

.chrome-logo{
  display: block;
  width: rem-calc($logo-size);
  height: rem-calc($logo-size);
  @include center(rem-calc($logo-size / 2));
	border-radius: rem-calc($logo-size);
	background-image: linear-gradient(240deg,  transparent 66.4%,  #009C59 0%, #009C59),
			              linear-gradient(0deg,    transparent 71.5%,    #E34A35 0%, #E34A35),
			              linear-gradient(290deg,  transparent 60%,    #E34A35 0%, #E34A35),
			              linear-gradient(120deg,  transparent 66%,  #FFCA38 0%, #FFCA38),
			              linear-gradient(57deg,   transparent 58%,    #FFCA38 0%, #FFCA38),
			              linear-gradient(190deg,  transparent 58%,    #009C59 0%, #009C59);
	box-shadow: inset 0 0 rem-calc(160px) rgba(0, 0, 0, 0.05), 
							0 0 100px rgba(0, 0, 0, 0.05), 
							0 0 10px rgba(255, 255, 255, 1);
	transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;

  &::before,
  &::after {
    content:'';
    display: block;
  }

  &::before{
    width: rem-calc(28px);
    height: rem-calc(38px);
    position: absolute;
    top: rem-calc(423px);
    left: rem-calc(215px);
    border-bottom-right-radius: rem-calc($logo-size / 2);
    background-color: #FFCA38;
    transform: rotate(30deg);
  }

  &::after{
    width: rem-calc(170px);
    height: rem-calc(170px);
    @include center(rem-calc(85px));
    border-radius: rem-calc($logo-size / 2);
    background-color: #228EF4;
    box-shadow: 0 0 0 rem-calc(15px) rgba(255, 255, 255, 1);
  }

  &:hover {
    transform: rotate(-720deg) scale(0.9);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js