a(class='logo', href='https://www.microsoft.com/')
  .logo-icon
    .box.box-top-left
    .box.box-top-right
    .box.box-bottom-left
    .box.box-bottom-right
  .logo-title
    i M
      b i
      i c
    i r
      b o
      i s
    i o
      b f
      b.t t

View Compiled
// Custom values
$brand-icon-top-left-color: #F65314
$brand-icon-top-right-color: #7CBB00
$brand-icon-bottom-left-color: #00A1F1
$brand-icon-bottom-right-color: #FFBB00
$brand-color: #737373
$transition-delay: 0.7s
$transition-hover-delay: 2s
$box-size: 2em
// Calculated values
$box-gutter: $box-size / 10
$logo-icon-max-size: $box-size * 2 + $box-gutter

html 
  box-sizing: border-box  
*,*:before,*:after 
  box-sizing: inherit

html, body
  font-family: sans-serif
  xbackground: #333
  display: flex
  align-items: center
  justify-content: center
  min-height: 100vh
      
 
.logo     
  
  &:hover .logo-icon .box
    transform: rotate(180deg)
  &:hover .logo-title i
    transform: rotate(360deg) 
  &:hover .logo-title b
    transform: rotate(-360deg)    
  
  @media (min-width: 768px)
    transform: scale(2) 
  
  @media (min-width: 992px)
    transform: scale(3)  

  transition: all $transition-delay
  display: flex
  align-items: center
  justify-content: center  
  text-decoration: none
  color: $brand-color
  background: white
       
.logo-icon      
  max-width: $logo-icon-max-size
  xbackground: black
  position: relative  
  xoverflow: hidden

.box
  min-width: $box-size 
  min-height: $box-size
  transition: all $transition-hover-delay
  float: left
    
.box-top-left
  background-color: $brand-icon-top-left-color
  margin-bottom: $box-gutter
  margin-right: $box-gutter
  
.box-top-right
  background-color: $brand-icon-top-right-color
  margin-bottom: $box-gutter
  
.box-bottom-left
  background-color: $brand-icon-bottom-left-color
  margin-right: $box-gutter
  
.box-bottom-right
  background-color: $brand-icon-bottom-right-color
  
.logo-title  
  transition: all $transition-hover-delay
  font-family: sans-serif
  font-size: $box-size
  xbackground: tomato
  line-height: 1
  padding: $box-size / 8
  font-variant-ligatures: common-ligature discretionary-ligature historical-ligatures
  
  i, b
    transition: all $transition-hover-delay
    font-style: normal
    display: inline-block // make transition work
  .t
    margin-left: -0.03em // simulate ligature

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.