VCD

GoogleDoodle

VCD
---


A [Pen](http://codepen.io/Dpappy/pen/NNqaGB) by [Devin Papp](http://codepen.io/Dpappy) on [CodePen](http://codepen.io/).

[License](http://codepen.io/Dpappy/pen/NNqaGB/license).

index.html

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 218.6 86.2" enable-background="new 0 0 218.6 86.2" xml:space="preserve">
<g>
	<path class = "v" fill="#D7DF23" d="M27.3,84.9L0,1.4h11.7l13,41.2c3.6,11.3,6.7,21.5,8.9,31.2h0.2c2.4-9.7,5.8-20.2,9.5-31.1L57.5,1.4h11.5
		L39.2,84.9H27.3z"/>
	<path class = "c" fill="#D7DF23" d="M136.5,82.2c-4,2-11.9,4-22.1,4c-23.6,0-41.3-14.9-41.3-42.3C73.2,17.7,90.9,0,116.8,0
		c10.4,0,17,2.2,19.8,3.7l-2.6,8.8c-4.1-2-9.9-3.5-16.9-3.5c-19.6,0-32.6,12.5-32.6,34.5c0,20.5,11.8,33.6,32.1,33.6
		c6.6,0,13.3-1.4,17.6-3.5L136.5,82.2z"/>
	<path class = "d" fill="#D7DF23" d="M150,2.5c6.6-1,14.4-1.7,22.9-1.7c15.5,0,26.5,3.6,33.9,10.4c7.4,6.8,11.8,16.5,11.8,30
		c0,13.6-4.2,24.8-12,32.5c-7.8,7.8-20.7,12-37,12c-7.7,0-14.1-0.4-19.6-1V2.5z M160.8,76.4c2.7,0.5,6.7,0.6,10.9,0.6
		c23.1,0,35.6-12.9,35.6-35.5c0.1-19.7-11-32.2-33.8-32.2c-5.6,0-9.8,0.5-12.6,1.1V76.4z"/>
</g>
</svg>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.v {transform: scale(.5);
transform-origin: 50% 50%;
transition: all .5s ease-in-out;}

.c {transform: scale(.5);
transform-origin: 50% 50%;
transition: all .5s ease-in-out;}

.d {transform: scale(.5);
transform-origin: 50% 50%;
transition: all .5s ease-in-out;}

.v{animation:fadeInLeft .5s ease-in-out; scale(.5);}
.c{animation:fadeInLeft .5s ease-in-out;
animation:pulse .5s ;}
.d{animation:fadeInLeft .5s ease-in-out;}


svg:hover .v {
  transform: scale(1);
  transition: all .5s ease-in-out;
   fill:orange ;
}

svg:hover .c {
  transform: scale(1);
  transition: all .5s ease-in-out;
  fill:blue;
  
}

svg:hover .d {
  transform: scale(1);
  transition: all .5s ease-in-out;
  fill:white;
}
body {
  
  background-color: indigo;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />