<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="300px" height="300px" viewBox="0 0 300 300">
<g><!--BODY-->
<path fill="#B97D6D" d="M200.8,163.3c27.9,11.4,31.4,24.6,26.1,34.5c-8.9,16.6-27.3,2.3-27.3,2.3c-2.1,12-2.8,36.9,0,39.4
s7.5,5.1,7.5,10.7c0,5.6-26.9,11.6-45.7,7.7c-4.5-4-5.3-13.1-11.4-13.2c-6.1,0.1-6.9,9.2-11.4,13.2c-18.8,3.9-45.7-2.1-45.7-7.7
c0-5.6,4.7-8.2,7.5-10.7c2.8-2.5,2.1-27.4,0-39.4c0,0-18.4,14.3-27.3-2.3c-5.3-9.9-1.8-23.1,26.1-34.5
c-13.1-11.5-19.6-26.9-19.6-50c0-17,8.2-31.5,13.8-40c-8.1-2.8-14.6-15-5.5-24.1c9.1-9.1,21.7-1.6,24,5.5
c10.9-7.4,24-11.7,38.1-11.7h0c14.1,0,27.2,4.3,38.1,11.7c2.3-7,14.8-14.6,24-5.5c9.1,9.1,2.6,21.3-5.5,24.1
c5.6,8.5,13.8,22.9,13.8,40C220.4,136.4,213.9,151.8,200.8,163.3z">
<animate
attributeName="d"
repeatCount="indefinite"
begin="mouseover"
end="mouseout"
dur=".5s"
values="M200.8,163.3c27.9,11.4,31.4,24.6,26.1,34.5c-8.9,16.6-27.3,2.3-27.3,2.3c-2.1,12-2.8,36.9,0,39.4
s7.5,5.1,7.5,10.7c0,5.6-26.9,11.6-45.7,7.7c-4.5-4-5.3-13.1-11.4-13.2c-6.1,0.1-6.9,9.2-11.4,13.2c-18.8,3.9-45.7-2.1-45.7-7.7
c0-5.6,4.7-8.2,7.5-10.7c2.8-2.5,2.1-27.4,0-39.4c0,0-18.4,14.3-27.3-2.3c-5.3-9.9-1.8-23.1,26.1-34.5
c-13.1-11.5-19.6-26.9-19.6-50c0-17,8.2-31.5,13.8-40c-8.1-2.8-14.6-15-5.5-24.1c9.1-9.1,21.7-1.6,24,5.5
c10.9-7.4,24-11.7,38.1-11.7h0c14.1,0,27.2,4.3,38.1,11.7c2.3-7,14.8-14.6,24-5.5c9.1,9.1,2.6,21.3-5.5,24.1
c5.6,8.5,13.8,22.9,13.8,40C220.4,136.4,213.9,151.8,200.8,163.3z;
M227.4,167.7c-7.8-17.1-27-4-27-4l0.4-0.4c13-11.5,19.5-26.9,19.5-50c0-17-8.2-31.5-13.7-40
c8.1-2.8,14.5-15,5.5-24.1s-21.6-1.6-23.9,5.5C177.3,47.3,164.2,43,150.2,43l0,0c-14,0-27.2,4.3-37.9,11.7
c-2.3-7-14.7-14.6-23.9-5.5c-9.1,9.1-2.6,21.3,5.5,24.1c-5.6,8.5-13.7,22.9-13.7,40c0,23.1,6.5,38.5,19.5,50c-0.1,0-0.2,0.1-0.3,0.1
l0.3-0.1c-1.8-1.1-20.2-11.4-27.2,5c-4.4,10.2,0.2,23,28.4,31.8c2.1,12,2.8,36.8,0,39.3c-2.8,2.5-7.5,5.1-7.5,10.7
s26.8,11.6,45.5,7.7c4.5-4,5.3-13.1,11.4-13.2c6.1,0.1,6.8,9.2,11.4,13.2c18.7,3.9,45.5-2.1,45.5-7.7s-4.7-8.2-7.5-10.7
c-2.8-2.5-2.1-27,0-39.1C227.7,190.7,231.9,177.8,227.4,167.7z;
M200.8,163.3c27.9,11.4,31.4,24.6,26.1,34.5c-8.9,16.6-27.3,2.3-27.3,2.3c-2.1,12-2.8,36.9,0,39.4
s7.5,5.1,7.5,10.7c0,5.6-26.9,11.6-45.7,7.7c-4.5-4-5.3-13.1-11.4-13.2c-6.1,0.1-6.9,9.2-11.4,13.2c-18.8,3.9-45.7-2.1-45.7-7.7
c0-5.6,4.7-8.2,7.5-10.7c2.8-2.5,2.1-27.4,0-39.4c0,0-18.4,14.3-27.3-2.3c-5.3-9.9-1.8-23.1,26.1-34.5
c-13.1-11.5-19.6-26.9-19.6-50c0-17,8.2-31.5,13.8-40c-8.1-2.8-14.6-15-5.5-24.1c9.1-9.1,21.7-1.6,24,5.5
c10.9-7.4,24-11.7,38.1-11.7h0c14.1,0,27.2,4.3,38.1,11.7c2.3-7,14.8-14.6,24-5.5c9.1,9.1,2.6,21.3-5.5,24.1
c5.6,8.5,13.8,22.9,13.8,40C220.4,136.4,213.9,151.8,200.8,163.3z;"/>
</path>
<!--NOSE-->
<path fill="#44373A" d="M150,137.3c4.7,0,11.2,1.6,10.5,6.4c-0.7,4.8-8.8,8.5-10.5,8.5h0c-1.7,0-9.7-3.7-10.5-8.5
C138.7,138.9,145.3,137.3,150,137.3L150,137.3z"/>
<!--BELLY-->
<path fill="#D7A798" d="M184.4,172.7c-5.7,2.1-12.2,3.5-19.7,4.3c-4.6,0.5-9.5,0.8-14.8,0.8h0c-5.3,0-10.2-0.3-14.8-0.8
c-7.4-0.8-14-2.3-19.7-4.3c-1,11.6-2.1,22.8-1.7,32.6c0.9,19.8,8.2,33.7,36.1,33.7c28,0,35.3-13.9,36.1-33.7
C186.5,195.5,185.4,184.3,184.4,172.7z"/>
<g>
<g>
<g><!--LEFT EYE-->
<path class="left-eye eyes" fill="#FFFFFF" d="M120.7,109c10.4,0,18.8,8.4,18.8,18.8c0,10.4-8.4,18.8-18.8,18.8c-10.4,0-18.8-8.4-18.8-18.8
C101.8,117.4,110.3,109,120.7,109z"/>
<!--LEFT PUPIL-->
<path class="left-pupil pupils" fill="#44373A" d="M115.5,135.5c2.8,0,5.1-2.3,5.1-5.1c0-2.8-2.3-5.1-5.1-5.1c-2.8,0-5.1,2.3-5.1,5.1
C110.4,133.2,112.7,135.5,115.5,135.5z"/>
</g>
<g><!--RIGHT EYE-->
<path class="right-eye eyes" fill="#FFFFFF" d="M183.5,109c10.4,0,18.8,8.4,18.8,18.8c0,10.4-8.4,18.8-18.8,18.8c-10.4,0-18.8-8.4-18.8-18.8
C164.7,117.4,173.1,109,183.5,109z"/>
<!--RIGHT PUPIL-->
<path class="right-pupil pupils" fill="#44373A" d="M178.4,125.3c-2.8,0-5.1,2.3-5.1,5.1c0,2.8,2.3,5.1,5.1,5.1c2.8,0,5.1-2.3,5.1-5.1
C183.5,127.5,181.2,125.3,178.4,125.3z"/>
</g>
</g><!--MOUTH-->
<path fill="none" stroke="#99685B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M174.9,148.9
c-2.4,11-23.8,15-36.9,9.6"/>
</g><!--EARS-->
<path fill="none" stroke="#010101" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d="M97.7,64.2
c-3.4,0-5.3-4.2-3.3-7.4c1.9-2.9,7.3-3.4,8.9,1.3 M202.3,64.2c3.4,0,5.3-4.2,3.3-7.4c-1.9-2.9-7.3-3.4-8.9,1.3"/>
<g class="bowtie"><!--BOWTIE-OUTER-->
<path fill="#fd7dbd" d="M195.4,169.7c-0.5-0.5-1-0.9-1.7-1.3c-5.7-3.6-17-3.3-29,8.7c-4.6,0.5-9.5,0.8-14.8,0.8h0
c-5.3,0-10.2-0.3-14.8-0.8c-12-12-23.3-12.3-29-8.7c-0.6,0.4-1.2,0.9-1.7,1.3c-4.6,4.6-1.5,30.9,9.3,35.6c0.5,0.2,1.1,0.4,1.7,0.5
c9.4,1.9,18.6-9.4,22.3-14.5c2.3,3.6,6.1,6,12.1,6c6,0,9.9-2.4,12.1-6c3.7,5.2,12.9,16.5,22.3,14.5c0.6-0.1,1.1-0.3,1.7-0.5
C196.8,200.6,200,174.3,195.4,169.7z"/>
<!--BOWTIE-INNER-->
<path fill="#ff69b4" d="M162.1,191.3c-2.3,3.6-6.1,6-12.1,6c-6,0-9.9-2.4-12.1-6c-2.5-3.9-3.1-9.3-2.6-14.2l0,0
c4.6,0.5,9.5,0.8,14.8,0.8h0c5.3,0,10.2-0.3,14.8-0.8l0,0C165.2,182,164.6,187.3,162.1,191.3z"/>
</g>
</g>
</svg>
svg {
display: block;
width: 100%;
margin: 0 auto;
}
.eyes {
transform-box: fill-box;
}
@-webkit-keyframes eyes {
0% {
transform: translateX(0px);
transform: rotate(0deg);
transform-origin: bottom;
transform-box: fill-box;
}
100% {
transform: translateX(0px);
transform: rotate(360deg);
transform-origin: bottom;
transform-box: fill-box;
}
}
@-webkit-keyframes bowspin {
0% {
transform: rotate(0deg);
transform-origin: center;
transform-box: fill-box;
}
100% {
transform: rotate(360deg);
transform-origin: center;
transform-box: fill-box;
}
}
.pupils {
animation: eyes 2s ease-in-out infinite;
animation: eyes 2s linear infinite;
}
.bowtie {
animation: bowspin 1.3s infinite;
transform-origin: bottom center;
animation: bowspin .5s infinite;
animation-timing-function: linear;
}/*svg graphic found at http://svgcuts.com/blog/2013/08/03/free-svg-file-08-03-13-teddy-bear-cutie/. */
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.