<svg class="logo-svg" width="338px" height="76px">
<g>
	<g class="logo-type-group">
		<path class="logo-type logo-type-code-c" d="M210.869,13.234c-1.965-3.43-5.682-5.538-9.968-5.538c-6.467,0-11.577,4.681-11.577,11.683
			c0,6.896,5.109,11.648,11.577,11.648c4.537,0,8.432-2.429,10.361-6.253l1.358,0.394c-2.108,4.43-6.502,7.217-11.719,7.217
			c-7.182,0-12.97-5.466-12.97-13.006c0-7.539,5.789-13.006,12.97-13.006c4.895,0,9.111,2.537,11.361,6.503L210.869,13.234z"/>

		<path class="logo-type logo-type-code-o" d="M231.198,6.374c7.182,0,13.006,5.467,13.006,13.006c0,7.539-5.824,13.006-13.006,13.006
			s-12.97-5.466-12.97-13.006C218.228,11.841,224.016,6.374,231.198,6.374z M231.198,31.064c6.431,0,11.612-4.788,11.612-11.684
			c0-7.002-5.181-11.683-11.612-11.683c-6.467,0-11.577,4.681-11.577,11.683C219.621,26.276,224.73,31.064,231.198,31.064z"/>

		<path class="logo-type logo-type-code-d" d="M262.174,6.875c7.146,0,12.934,5.145,12.934,12.648c0,7.324-5.718,12.362-12.613,12.362h-10.648V6.875
			H262.174z M262.496,30.564c6.038,0,11.219-4.181,11.219-11.041c0-6.931-5.181-11.326-11.541-11.326h-8.968v22.367H262.496z"/>

		<path class="logo-type logo-type-code-e" d="M298.904,30.564v1.322h-16.15V6.875h15.936v1.322h-14.578v9.54h11.826v1.287h-11.826v11.541H298.904z"/>

		<path class="logo-type logo-type-motel-m" d="M227.712,43.881v25.01h-1.358V55.064c0-2.823,0.143-8.789,0.107-8.789h-0.035
			c-0.036,0-0.93,1.679-2.108,3.787l-7.325,12.684h-0.714l-7.324-12.684c-1.179-2.108-2.072-3.787-2.108-3.787h-0.036
			c-0.035,0,0.107,5.966,0.107,8.789v13.827h-1.358v-25.01h1.287l6.967,12.076c2.323,3.966,2.751,5.145,2.787,5.145h0.036
			c0.035,0,0.5-1.179,2.823-5.145l6.967-12.076H227.712z"/>

		<path class="logo-type logo-type-motel-o" d="M248.471,43.38c7.182,0,13.006,5.467,13.006,13.006c0,7.539-5.824,13.006-13.006,13.006
			c-7.182,0-12.97-5.466-12.97-13.006C235.5,48.847,241.289,43.38,248.471,43.38z M248.471,68.07
			c6.431,0,11.612-4.788,11.612-11.684c0-7.002-5.181-11.683-11.612-11.683c-6.467,0-11.577,4.681-11.577,11.683
			C236.894,63.282,242.003,68.07,248.471,68.07z"/>

		<path class="logo-type logo-type-motel-t" d="M284.414,43.881v1.322h-8.754v23.689h-1.394V45.203h-8.754v-1.322H284.414z"/>

		<path class="logo-type logo-type-motel-e" d="M307.852,67.57v1.322h-16.15v-25.01h15.936v1.322h-14.578v9.54h11.826v1.287h-11.826V67.57H307.852z"/>

		<path class="logo-type logo-type-motel-l" d="M331.825,67.57v1.322h-15.578v-25.01h1.358V67.57H331.825z"/>

	</g>
</g>

<path class="logo-m-left-2" d="M155.865,69.053h-14.957L111.502,7h13.763L155.865,69.053z"/>

<path class="logo-m-right" d="M192.252,69.053h-14.957L147.89,7h13.763L192.252,69.053z"/>

<path class="logo-m-left-1" d="M111.328,7h13.763L95.686,69.053H80.729L111.328,7z"/>

<polygon class="logo-c" points="69.24,7.032 7.187,32.277 7.187,32.421 7.187,43.632 7.187,43.776 69.24,69.021 69.24,56.681
	21.526,38.026 69.24,19.372 "/>

</svg>

<p class="hover">Hover that</p>
@import "compass/css3";

body {background:#222; text-align:center;}

p {
  font-family:Helvetica, sans-serif;
  font-size: 13px;
  text-transform:uppercase;
  letter-spacing:0.2em;
  text-shadow:0.15em 0.15em 0 #222;
  color:#777;
  background:#333;
  width:15em;
  margin:3em auto;
  padding:0.75em 0;
}

svg {margin-top:80px;}



// ----------------------
// Colors
// ----------------------

$blue:#27AAE1;
$pink:#EC008C;
$dark-pink:#EC008C;
$yellow:#F9ED32;
$gray:#555;


// Logo Default

$logo-c-default:$gray;
$logo-m-1-default:$gray;
$logo-m-2-default:$gray;
$logo-m-3-default:$gray;
$logo-type-default:$gray;

// Logo Hover

$logo-c-hover:$blue;
$logo-m-1-hover:$pink;
$logo-m-2-hover:$dark-pink;
$logo-m-3-hover:$yellow;
$logo-type-hover:white;


// ----------------------
// Speed
// ----------------------

$speed:111ms;
$logo-ease:($speed * 3);



// ----------------------
//  Logo
// ----------------------

[class*="logo-"] {
  -webkit-transition: all $logo-ease ease-out;
     -moz-transition: all $logo-ease ease-out;
       -o-transition: all $logo-ease ease-out;
          transition: all $logo-ease ease-out;
}

.logo-svg {
	margin-left: 7.3em;
   transition-delay:($speed * 2);
}

.logo-c {
   fill:$logo-c-default;
   transition-delay:($speed * 4);
 }

[class*="logo-m-left-"] {
   transition-delay:($speed * 3.5);
 }

.logo-m-left-1 {
   fill:$logo-m-1-default;
 }

 .logo-m-left-2 {
   opacity:0.4;
   fill:$logo-m-2-default;
 }

 .logo-m-right {
   fill:$logo-m-3-default;
   transition-delay:($speed * 3);
 }

.logo-type {
   //fill:$logo-type-default;
  opacity:0;
  transition-delay: ($speed * 0);
 }


//  Logo:Hover

.logo-svg:hover {
  	margin-left:0;
  	transition-delay:($speed * 0);

	.logo-c {
	   fill:$logo-c-hover;
	   transition-delay:($speed * 2);
	 }

	[class*="logo-m-left-"] {
	   transition-delay:($speed * 2.5);
	}

	.logo-m-left-1 {
	   fill:$logo-m-1-hover;
	 }

	 .logo-m-left-2 {
	   opacity:0.4;
	   fill:$logo-m-2-hover;
	 }

	 .logo-m-right {
	   fill:$logo-m-3-hover;
	   transition-delay:($speed * 3);
	 }

	.logo-type-group .logo-type{
	   fill:$logo-type-hover;
     	opacity:1;
	 }

  .logo-type {
    transition-delay: ($speed * 3.5);
  }

  .logo-type-code-c {transition-delay: ($speed * 4);}

  .logo-type-code-o {transition-delay: ($speed * 4.25);}

  .logo-type-code-d {transition-delay: ($speed * 4.5);}

  .logo-type-code-e {transition-delay: ($speed * 4.75);}

  .logo-type-motel-m {transition-delay: ($speed * 4);}

  .logo-type-motel-o {transition-delay: ($speed * 4.25);}

  .logo-type-motel-t {transition-delay: ($speed * 4.5);}

  .logo-type-motel-e {transition-delay: ($speed * 4.75);}

  .logo-type-motel-l {transition-delay: ($speed * 5);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.