Svg rotate shape around its centre endlessly - HTML CSS SVG

HTML CSS examples for SVG:polygon

  1. HOME
  2. HTML CSS
  3. SVG
  4. polygon

Description

Svg rotate shape around its centre endlessly

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor si</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#Layer_1 {<!--   ww  w. j a  v a  2 s.  co m-->
   transform-origin:51% 51%;
   -webkit-animation:spin 5s linear infinite;
   -moz-animation:spin 5s linear infinite;
   animation:spin 5s linear infinite;
}

@-moz-keyframes spin  {
   100% {
      -moz-transform:rotate(361deg);
   }

}

@-webkit-keyframes spin  {
   100% {
      -webkit-transform:rotate(361deg);
   }

}

@keyframes spin  {
   100% {
      -webkit-transform:rotate(361deg);
      transform:rotate(361deg);
   }

}
</style> 
 </head> 
 <body> 
  <!--?xml version="1.0" encoding="utf-8"?--> 
  <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> 
  <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" width="841.89px" height="1190.55px" viewbox="0 0 841.89 1190.55" enable-background="new 0 0 841.89 1190.55" xml:space="preserve"> 
   <g> 
    <polygon fill="#E71320" points="530,771 453.936,713.721 487.465,802.842 430.618,726.453 437.681,821.41 404.659,732.1
        384.683,825.2 378.16,730.205 332.763,813.906 353.268,720.921 286.129,788.442 332,705 248.558,750.871 316.079,683.732
        223.094,704.236 306.795,658.84 211.799,652.317 304.9,632.342 215.59,599.319 310.547,606.382 234.158,549.536 323.279,583.064
        266,507 342.064,564.279 308.536,475.158 365.382,551.547 358.319,456.59 391.341,545.9 411.317,452.799 417.84,547.795
        463.236,464.094 442.732,557.079 509.871,489.558 464,573 547.442,527.129 479.921,594.268 572.906,573.763 489.205,619.16
        584.2,625.683 491.1,645.658 580.41,678.682 485.453,671.618 561.842,728.465 472.721,694.936  " transform="rotate(15, 40, 40)" dur="0.1s" calcMode="discrete" repeatCount="indefinite" /> 
    <circle fill="none" stroke="#000000" stroke-width="10" stroke-miterlimit="10" cx="398" cy="639" r="39" /> 
   </g> 
  </svg>  
 </body>
</html>

Related Tutorials