An experiment in vector image (SVG)

An experiment in vector image (SVG).markdown

An experiment in vector image (SVG) ('-' * 35)

Forked from Omer Amsel's Pen NqxZjL.

A Pen by Yishai Burt on CodePen.

License.

index.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<h3>An experiment in vector image (SVG)</h3>
<div>Hint: Move your mouse over the smileyoha</div>
<div class="logo">
  <div class="">
    <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 134 134" enable-background="new 0 0 134 134" xml:space="preserve">
      <path class="smile" fill="#FED62E" d="M67,0C30,0,0,30,0,67c0,37,30,67,67,67s67-30,67-67C134,30,104,0,67,0z M104.3,81.9
	c-6.1,15.4-20.8,25.4-37.3,25.4s-31.2-10-37.3-25.4c-1.7-4.4,0.4-9.3,4.8-11c4.4-1.7,9.3,0.4,11,4.8c3.5,8.9,12,14.6,21.5,14.6
	s18-5.7,21.5-14.6c1.7-4.4,6.7-6.5,11-4.8C103.9,72.6,106.1,77.6,104.3,81.9z" />
    </svg>
  </div>

style.css

.logo {
  height: 110px;
  width: 110px;
  transition: all .2s ease;
  -webkit-animation-play-state: paused;
  &:hover {
    height: 200px;
    width: 200px;
    #-webkit-animation: none;    
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
}

.smile{
  transition: fill .2s ease;
  
  &:hover {
    fill: #94ba46;
  }
}