ParrotCSS vs. SVG



CSS vs. SVG




  
<h1>CSS vs. SVG</h1>
<div class="css-wrapper">
  <div class="drinking-man">
     <div class="hair"></div>
    <div class="head">
        <div class="glasses"></div>
        <div class="bear"></div>
    </div>
    <div class="body"></div>
    <div class="arm">
      <div class="left-arm"></div>
    </div>
    
    <div class="right-arm"></div>
    <div class="pants">
      <div class="legs"></div>
    </div>
   </div>
</div>
<div class="svg-wrapper">
<svg version="1.1" id="drinkingMan" x="0px"
	 y="0px" width="100%" height="500px" viewBox="0 0 200 500" xml:space="preserve">
<g id="right-arm">
	<rect id="arm" x="156.9" y="145.8" transform="matrix(0.9665 -0.2565 0.2565 0.9665 -52.129 50.2215)" class="skinDark" width="19" height="158.2"/>
	<g id="right-hand">
		<circle class="skinDark" cx="182.8" cy="304.9" r="15.3"/>
		<path class="hand-shadow" d="M187.5,319.2c-8.5,0-15.3-6.9-15.3-15.3c0-6.5,4.1-12.1,9.8-14.3c-8.1,0.5-14.5,7.1-14.5,15.3
			c0,8.5,6.9,15.3,15.3,15.3c2,0,3.8-0.4,5.5-1C188.1,319.2,187.8,319.2,187.5,319.2z"/>
	</g>
  
</g>

<g id="body">
	<g id="stomach-area">
		<rect id="stomach-shadow" x="79.2" y="199.5" class="skinShadow" width="55.2" height="46.8"/>
		<rect id="stomach" x="79.2" y="199.5" class="skin" width="19.5" height="46.8"/>
	</g>
	<g id="chest-area">
		<g id="chest">
			<circle id="chest-torax" class="skin" cx="107" cy="158.5" r="50.5"/>
			<path id="chest-shadow" class="skinShadow" d="M107,108c-0.9,0-1.9,0-2.8,0.1c24.2,3.7,42.8,24.6,42.8,49.9c0,26.9-21.1,49-47.7,50.4
				c2.5,0.4,5.1,0.6,7.7,0.6c27.9,0,50.5-22.6,50.5-50.5S134.9,108,107,108z"/>
		</g>
		<circle id="left-nipple" class="nipple" cx="86" cy="157.5" r="4.2"/>
		<circle id="right-nipple" class="nipple" cx="126" cy="157.8" r="4.2"/>
	</g>
</g>

<g id="head">
	<path id="head-hair" class="hair" d="M134.8,29.5v-8.9c0-10-6.9-18.1-15.4-18.1H96.8c-8.5,0-15.4,8.1-15.4,18.1v8.9H134.8z"/>
	<path id="neck" class="skinDark" d="M132.9,103.7c0,14.8-10.3,26.8-23,26.8h-3.5c-12.7,0-23-12-23-26.8V33.3c0-14.8,10.3-26.8,23-26.8
		h3.5c12.7,0,23,12,23,26.8V103.7z"/>
	<circle id="left-ear" class="skinDark" cx="81.7" cy="34.6" r="5.6"/>
	<circle id="right-ear" class="skinDark" cx="133.5" cy="34.3" r="5.6"/>
	<g id="bear">
		<circle id="bear-hair" class="bear-hair" cx="107.6" cy="72.9" r="28.7"/>
		<path id="bear-shadow" class="bear-shadow" d="M107.9,86.5c-13.5,0-24.7-9.3-27.8-21.8c-0.8,2.6-1.2,5.3-1.2,8.1
			c0,15.8,12.8,28.7,28.7,28.7c15.8,0,28.7-12.8,28.7-28.7c0-2.4-0.3-4.7-0.8-6.9C131.9,77.9,120.9,86.5,107.9,86.5z"/>
	</g>
	<path id="glasses" class="glasses" d="M133.3,28.1h-21.6v0h-6.1h-0.3h-22c-0.1,0.7-0.2,1.4-0.2,2.2c0,6.3,5.1,11.3,11.3,11.3
		s11.3-5.1,11.3-11.3c0-0.1,0-0.1,0-0.2h5c0,0.1,0,0.1,0,0.2c0,6.3,5.1,11.3,11.3,11.3c6.3,0,11.3-5.1,11.3-11.3
		C133.5,29.5,133.4,28.8,133.3,28.1z"/>
	<g id="front-hair">
		<path id="hair" class="hair" d="M96.2,5.9v2.5c0,4.4,3.6,8,8,8h6.3c4.4,0,8-3.6,8-8V5.9H96.2z"/>
		<path id="hair-shadow" class="hair-shadow" d="M118.3,5.9c-0.3,4.1-3.8,7.4-8,7.4H104c-4,0-7.2-2.9-7.9-6.6v1.8c0,4.4,3.6,8,8,8h6.3
			c4.4,0,8-3.6,8-8V5.9H118.3z"/>
	</g>
</g>
<g id="left-leg">
	<rect id="leg_1_" x="83.8" y="311" class="skin" width="12.2" height="175.1"/>
	<g id="left-foot">
		<path class="foot-shadow2" d="M85.4,487.7c-0.4-0.1-0.7-0.1-1.1-0.1H69.6c-2.8,0-5,2.2-5,5v0.1c0,2.8,2.3,5,5,5h5.2h9.6H96v-10H85.4z"/>
		<path class="skin" d="M85.4,485.9c-0.4-0.1-0.7-0.1-1.1-0.1H69.6c-2.8,0-5,2.2-5,5v0.1c0,2.8,2.3,5,5,5h5.2h9.6H96v-10H85.4z"/>
	</g>
</g>
<g id="right-leg">
	<rect id="leg" x="117.8" y="310.8" class="skinShadow" width="12.2" height="175.5"/>
	<g id="right-foot">
		<path class="foot-shadow" d="M128.4,497.9c0.4,0.1,0.7,0.1,1.1,0.1h14.7c2.8,0,5-2.2,5-5v-0.1c0-2.8-2.3-5-5-5H139h-9.6h-11.7v10H128.4z"/>
		<path class="skinShadow" d="M128.4,496.1c0.4,0.1,0.7,0.1,1.1,0.1h14.7c2.8,0,5-2.2,5-5v-0.1c0-2.8-2.3-5-5-5H139h-9.6h-11.7v10H128.4z"/>
	</g>
</g>

<g id="pants">
	<rect x="82.8" y="256.8" class="pants" width="15.2" height="54.2"/>
	<rect x="116.8" y="256.5" class="pants-shadow" width="15.2" height="54.2"/>
	<path class="pants" d="M79,246.4c0,0.5,0,1,0,1.5c0,15.5,12.5,28,28,28s28-12.5,28-28c0-0.5,0-1,0-1.5H79z"/>
	<path class="pants-shadow" d="M135,246.4h-11.2c0,0.5,0,1,0,1.5c0,13.5-9.6,24.8-22.4,27.4c1.8,0.4,3.7,0.6,5.6,0.6c15.5,0,28-12.5,28-28
		C135,247.4,135,246.9,135,246.4z"/>
</g>  
  
<g id="left-arm">
  	<path id="shoulder" class="skin" d="M82.4,145.6l-11.3-15.3L25.3,164L8.1,176.5c-4.2,3.1-5.2,9-2.1,13.3c3.1,4.2,9,5.2,13.3,2.1
		l1.5-1.1l0.1,0.1l15.7-11.5l22.4-16.3c0.5-0.3,0.9-0.7,1.2-1.1L82.4,145.6z"/>
	<g id="left-hand">
      
	<path id="arm_1" class="skinDark" d="M51.3,254.2l15.5-10.9l-32.7-46.5l-12.2-17.5c-3-4.3-8.9-5.4-13.2-2.4c-4.3,3-5.4,8.9-2.4,13.2
		l1.1,1.5l-0.1,0.1l11.2,15.9l15.8,22.7c0.3,0.5,0.7,0.9,1.1,1.3L51.3,254.2z"/>
<g id="beer">
			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="38.4336" y1="224.8452" x2="66.4473" y2="224.8452" gradientTransform="matrix(0.9812 0.1929 -0.1929 0.9812 74.6938 19.5498)">
			<stop  offset="0" style="stop-color:#FFD02D"/>
			<stop  offset="1" style="stop-color:#FFE270"/>
		</linearGradient>
		<path class="beer" d="M92.7,272.4c-0.6,3.2-3.4,5.3-6.2,4.7l-17.2-3.3c-2.8-0.5-4.6-3.5-4-6.7l7.5-38.9c0.6-3.2,3.4-5.3,6.2-4.7
			l17.2,3.3c2.8,0.5,4.6,3.5,4,6.7L92.7,272.4z"/>
		<path class="beer-foam" d="M98,226.1l-20.1-4c-2.5-0.5-4.9,1-5.4,3.3l0,0.1l-1,5l29.2,5.7l1-5l0-0.1C102.2,228.9,100.5,226.6,98,226.1z
			"/>
	</g>
		<circle id="hand" class="skinDark" cx="66.8" cy="255.1" r="15.3"/>
		<path id="hand-shadow" class="hand-shadow" d="M76.7,243.8c4.3,7.3,1.9,16.7-5.4,21c-5.6,3.3-12.5,2.6-17.3-1.2c4.5,6.7,13.5,8.8,20.5,4.7
			c7.3-4.3,9.7-13.7,5.4-21c-1-1.7-2.3-3.1-3.7-4.2C76.4,243.4,76.6,243.6,76.7,243.8z"/>
	</g>

</g>  
</svg>

</div>
  

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

<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>                    
                  
                



  
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

* { 
  box-sizing: border-box;  
}

body {
  font-family: 'Oswald', sans-serif;
}

$bg:#F7D568;
$skinDark:#E7AE9A;
$skinLight:#EFBAAA;
$nipples:#E79A9A;
$headColor:#E79E8A;
$bear:#612410;
$blue:#3D5E8C;
$time: 4.5s;

h1{
  color:#0845A2;
  font-size:3.5em;
  position:relative;
  text-align:center;
  margin-top:1em;
  font-weight:700; 
  z-index:999;
 
}
.css-wrapper {
  position:absolute;
  width:50%;
  height:100%;
  top:0;
  left:0;
  background:$bg;
  border-right:1px solid #fff ;
  z-index:0; 
  //border-right:1px solid #ccc;
  .drinking-man {
    margin:25% auto;
    position:relative;
    width:100px;
  }
  .head {
    width:50px;
    height:125px;
    background:$headColor;
    position:relative;
    margin-top:0px;   
    margin-left:25px;
    border-radius:30px 30px 30px 25px;
    z-index:10;
    transform-origin:bottom center;
    animation: move $time linear infinite;
    animation-delay:2s;
    &::before {
      content:"";
      width:11px;
      height:11px;
      background:$headColor;
      position:absolute;
      border-radius:50%;
      margin-top:22px;
      margin-left:-7px;
      box-shadow:52px 0 0 $headColor;
    }
    &::after {
      content:"";
      width:25px; 
      height:10px;
      background:$bear;
      position:absolute;
      margin-left:12px;
      margin-top:0px;
      border-radius:0px 0 10px 10px;
      box-shadow:inset 0 -3px 0 #4E1C0C;
      z-index:100;
      
    }
  }
  .hair {
    width:54px;
    height:35px;
    background:$bear;
    position:absolute;
    border-radius:20px 20px 0px 0px ;
    margin-left:23px;
    margin-top:-4px;
    animation: hair $time linear infinite;
    animation-delay:2s;
  }
  .glasses {
    width:23px;
    height:13px;
    position:absolute;
    background:rgba(52,67,115,0.8);
    margin-top:20px;
    margin-left:0px;
    border-radius:0px 0px 10px 10px;
    box-shadow:28px 0 0 rgba(52,67,115,0.8);
    &::after {
      content:"";
      width:5px;
      height:2px;
      background:#354E72;
      position:absolute;
      margin-left:23px;
    }
  }
  .bear {
    width:57px;
    height:57px;;
    border-radius:50%;
    background:$bear;
    box-shadow:inset 0px -13px 0 #4E1C0C;
    border:2px solid #4E1C0C;
    position:absolute;
    margin-top:38px;
    margin-left:-4px;
  }
  .right-arm {
    width:20px;
    height:150px;
    position:absolute;
    background: linear-gradient(top, $skinDark, $headColor ); 
    background: -webkit-linear-gradient(top, $skinDark, $headColor ); 
    background: -moz-linear-gradient(top, $skinDark, $headColor );  
    margin-left:80px;
    margin-top:-55px;
    transform: rotate(-15deg); 
    transform-origin: 0 0;
    z-index:-1; 
    transform-origin:top center; 
    animation: rightarm $time linear infinite;
    animation-delay:2s;
    &::after {
      content:"";
      width:30px;
      height:30px;
      border-radius:50%;
      background:$headColor;
      position:absolute;
      margin-top:140px;
      margin-left:-10px;
      box-shadow:inset 5px 0 0 darken($headColor, 5%);
    }
  }
  .arm {
    width:20px;
    height:80px;
    background:$skinDark;
    position:absolute;
    margin-top:-65px;
    margin-left:3px;
     border-radius:0px 0px 30px 30px;
    transform: rotate(55deg); 
    transform-origin:top center;
    z-index:20;
    animation: arm $time linear infinite;
    animation-delay:2s;
  }
  .left-arm {
    width:95px;
    height:20px; 
    position:absolute;
    background:$headColor;
    margin-left:0px;  
    margin-top:60px; 
    border-radius:30px 0px 0px 30px;
    transform: rotate(0deg);  
    transform-origin:0;
    animation: drink $time linear infinite;
    animation-delay:2s;
    z-index:10;
    &::after {
      content:"";
      width:30px;
      height:30px;
      border-radius:50%;
      background:$headColor;
      position:absolute;
      margin-top:-8px;
      margin-left:85px;
      box-shadow:inset -5px 0 0 darken($headColor, 5%);
    }
    &::before {
      content:"";
      width:25px;
      height:42px;
      background:linear-gradient(left, #FFD02D 20%, #FFE270 80%);
    background:-webkit-linear-gradient(left, #FFD02D 20%, #FFE270 80%);
      background:-moz-linear-gradient(left, #FFD02D 20%, #FFE270 80%);
      position:absolute;
      margin-left:95px;
      margin-top:-30px; 
      border-radius:5px 5px 10px 10px;
      border-top:8px solid white;
      border-bottom:2px solid #F3D7C9;
      border-left:2px solid #F3D7C9;
      border-right:2px solid #F3D7C9;
      transform:rotate(-40deg);
      animation: beer $time linear infinite;
      animation-delay:2s;
    }    
  }

  .body {
    width:100px; 
    height:100px;
    background:$skinDark;
    border-radius:50%;
    position:relative;
    margin-top:-24px; 
    box-shadow:inset -10px 0px 0px $skinLight;
    transform-origin:bottom center;
    animation: move $time linear infinite;
    animation-delay:2s;
    &::before {
      content:"";
      position:absolute;
      width:8px;
      height:8px;
      background:$nipples;
      border-radius:50%;
      top:45px;
      left:25px;
      box-shadow: 40px 0 0 $nipples;
    }
    &::after {
      content:"";
      position:absolute;
      width:55px;
      height:50px;
      background:$skinLight;
      top:91%;
      left:22px;
      z-index:-1;
      box-shadow:inset 20px 0 0 $skinDark;
    }
  }
  .pants {
    width:55px;
    height:30px;
    background:$blue;
    border-radius:0px 0px 30px 30px;
    margin-top:38px;
    margin-left:22px;
    box-shadow:inset -11px -5px 0 #2E4A72;
    position:relative;
    z-index:10;
    &::before {
      content:"";
      width:15px;
      height:50px;
      position:absolute;
      background:$blue;
      margin-left:3px;
      margin-top:15px; 
      box-shadow:34px 0 0 #2E4A72;
    }
  }
  .legs {
    width:12px;
    height:175px;
    background:$skinDark;
    position:absolute;
    margin-top:65px;
    margin-left:4px;
    box-shadow:34px 0 0 $skinLight;
    &::before {
      content:"";
      width:32px;
      height:10px;
      background:$skinDark;
      position:absolute;
      margin-top:175px;
      margin-left:-20px; 
      box-shadow:0 2px 0 darken($skinDark, 5%);
      border-radius:10px 0px 0px 10px;
    }
    &::after {
      content:"";
      width:32px;
      height:10px;
      background:$skinLight;
      position:absolute;
      margin-top:175px;
      margin-left:34px;
      box-shadow:0 2px 0 darken($skinLight, 5%);
      border-radius:0px 10px 10px 0px;
    }
  }
} 





//SVG

.svg-wrapper {
  position:absolute;
  width:50%;
  height:100%;
  top:0;
  left:50%; 
  background:$bg;
  z-index:0; 
}

#drinkingMan {
  margin:24% auto; 
  display:block;
 
}
#chest-area {position:relative;} 


.foot-shadow2{fill:#E29D85;}
.hand-shadow{fill:#E38C75;}
.nipple{fill:#E79A9A;}
.skinDark{fill:#E79E8A;}
.skin{fill:#E7AE9A;}
.hair-shadow{fill:#4E1C0C;}
.foot-shadow{fill:#EBA995;}
.skinShadow{fill:#EFBAAA;}
.pants-shadow{fill:#2E4A72;}
.hair{fill:#612410;}
.beer-foam{fill:#FFFFFF;}
.glasses{fill:#354E72;}
.bear-shadow{fill:#4E1C0C;stroke:#4E1C0C;}
.bear-hair{fill:#612410;stroke:#4E1C0C;}
.pants{fill:#3D5E8C;}
.beer{fill:url(#SVGID_1_);stroke:#F3D7BF;stroke-width:2;stroke-miterlimit:10;}







@keyframes arm {
  0% {transform:rotate(55deg);margin-top:-65px;}  
  12% {transform:rotate(110deg); margin-top:-68px;} 
  30% {transform:rotate(110deg); margin-top:-68px;} 
  55% {transform:rotate(55deg);margin-top:-65px;} 
}
 
@keyframes drink { 
  0% {transform:rotate(0deg);} 
  12% {
    transform:rotate(-90deg);
    margin-left:14px;
    margin-top:70px; 
  }  
  20% { 
    transform:rotate(-105deg);
    margin-left:14px;
    margin-top:70px; 
  } 
  30% {
    transform:rotate(-110deg);
     margin-left:14px;
    margin-top:70px; 
  } 
  55% {
    transform:rotate(0deg);
    margin-left:0px;  
    margin-top:60px;
  } 
}

@keyframes beer {
  0% {transform:rotate(-40deg);  margin-left:95px;}  
  20% {transform:rotate(3deg);  margin-left:99px;}  
  30% {transform:rotate(3deg);  margin-left:99px;} 
  50% {transform:rotate(-40deg); margin-left:95px;} 
}

@keyframes move {
  0% {transform:rotate(0deg);} 
  20% {transform:rotate(3deg);} 
  30% {transform:rotate(3deg);}
  50% {transform:rotate(0deg);}
}

@keyframes hair {
  0% { transform:translateX(0px);} 
  20% {transform:translateX(5px);} 
  30% {transform:translateX(5px);}  
  50% {transform:translateX(0px);} 
}

@keyframes rightarm {
  0% {transform:rotate(-15deg);} 
  20% {transform:rotate(-12deg);} 
  30% {transform:rotate(-12deg); } 
  50% {transform:rotate(-15deg);} 
}
                
              



$(document).ready(function(){
	
  var s = Snap('#drinkingMan');
  var leftHand = s.select('#left-hand');
  var beer = s.select('#beer');
  var leftArm = s.select('#left-arm');
  var rightArm = s.select('#right-arm');
  var body = s.select('#body');
  var head = s.select('#head');
  
 
  
  var myMatrix = new Snap.Matrix();
  myMatrix.rotate(55,0,0);
  //myMatrix.translate(80,-130);
  
drink();

 function drink() {

  leftArm.stop().animate(
    {transform:'r65,70,150'}
    ,800, 
    function(){ 
				leftArm.animate(
          { transform: 'r70,70,150'},
          800, 
       		function(){ 
						leftArm.animate(
              { transform: 'r0,70,150'},
              800
            );					
					}
    );}
  ); 

    leftHand.stop().animate(
    {transform:'r-110,13,185' },
    800, 
    function(){  
				leftHand.animate(
          { transform: 'r-115,13,185'},
          800,
          function() {
          	leftHand.animate(
          { transform: 'r0,13,185'},
          800);
   
        }
          );						
			}              
  );

  body.animate(
    {transform:'r3, 100,240'},
    800,
    function(){ 
     body.animate(
       {transform:'r3, 100,240'},
       800,
  		 function(){ 
     			body.animate(
            {transform:'r0, 100,240'},
            800
          );
   		 } 
     );
    }             
  );
    
	head.animate(
     {transform:'r3, 100,240'},
     800,
     function(){ 
     		head.animate(
          {transform:'r3, 100,240'},
          800,
  				function(){ 
    			 head.animate(
             {transform:'r0, 100,240'},
             800
           );
   				} 
        );
     }             
  );
  
   rightArm.stop().animate(
     {transform: 'r5, 180, 180'},
     800, 
     function() {
    		rightArm.stop().animate(
          {transform: 'r5, 180, 180'},
          800,
          function() {
              rightArm.stop().animate(
                {transform: 'r0, 180, 180'},
                800
              );
           }
        );
  	 }
   );
   
   beer.stop().animate(
     {transform:'r40,80,255' },
     800,
   	 function(){  
					beer.animate(
            { transform: 'r35,80,255'},
            800,
            function(){
            		beer.stop().animate(
                  { transform: 'r0,80,255'},
                  800
                );
            }
          );             			
			}                        
   );
   
   

 }//end drink  
  
 setInterval(function(){ drink() }, 4500);


  
  
  
});