<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="1600px" height="400px" viewBox="0 0 1600 400" xml:space="preserve">
  <title>SVG SMIL Animation Test</title>
  <defs>
    <linearGradient id="background-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #F3BE8D; stop-opacity: 1"/>
      <stop offset="50%" style="stop-color: #AAD0E8; stop-opacity: 1"/>
      <stop offset="100%" style="stop-color: #ADC393; stop-opacity: 1"/>
    </linearGradient>
    <circle id="circle-test" r="100" />
    <rect id="square-test" width="200" height="200" />
  </defs>
  
  <rect style="fill: url( #background-gradient );" width="1600" height="400"/>
  
  <g id="burst-container" transform="scale(2), translate(400,100)" style="opacity:0.3;">
    
    <g id="burst" style="fill:#FFFFFF;" transform="rotate(20.961)">
      
      <g id="quad">
        <path id="ray" d="M0,0 -22,-500 22,-500 z"/>
        <use xlink:href="#ray" transform="rotate(10)"/>
        <use xlink:href="#ray" transform="rotate(20)"/>
        <use xlink:href="#ray" transform="rotate(30)"/>
        <use xlink:href="#ray" transform="rotate(40)"/>
        <use xlink:href="#ray" transform="rotate(50)"/>
        <use xlink:href="#ray" transform="rotate(60)"/>
        <use xlink:href="#ray" transform="rotate(70)"/>
        <use xlink:href="#ray" transform="rotate(80)"/>
      </g>
      <use xlink:href="#quad" transform="rotate(90)"/>
      <use xlink:href="#quad" transform="rotate(180)"/>
      <use xlink:href="#quad" transform="rotate(270)"/>
      
      <animateTransform attributeName="transform" attributeType="XML" begin="0s" dur="240s" type="rotate" from="0" to="360" repeatCount="indefinite"/>
    </g>
  </g>
  
  <use xlink:href="#circle-test" fill="#000000" opacity="0.3" x="402" y="202"/>
  
  <use xlink:href="#circle-test" fill="#FFFFFF" x="400" y="200"/>
  
  <use xlink:href="#square-test" fill="#000000" opacity="0.3" x="1102" y="102"/>
  
  <use xlink:href="#square-test" fill="#FFFFFF" x="1100" y="100"/>
</svg>
<br />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="1600px" height="400px" viewBox="0 0 1600 400" xml:space="preserve">
  <title>SVG SMIL Animation Test</title>
  <defs>
    <linearGradient id="background-gradient-2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color: #F3BE8D; stop-opacity: 1"/>
      <stop offset="50%" style="stop-color: #AAD0E8; stop-opacity: 1"/>
      <stop offset="100%" style="stop-color: #ADC393; stop-opacity: 1"/>
    </linearGradient>
    <circle id="circle-test" r="100" />
    <rect id="square-test" width="200" height="200" />
  </defs>
  
  <rect style="fill: url( #background-gradient-2 );" width="1600" height="400"/>
  
  <g id="burst-container-2" style="opacity:0.3;">
    
    <g id="burst-2" style="fill:#FFFFFF;" transform="rotate(20.961)">
      
      <g id="quad-2">
        <path id="ray-2" d="M0,0 -22,-500 22,-500 z"/>
        <use xlink:href="#ray-2" transform="rotate(10)"/>
        <use xlink:href="#ray-2" transform="rotate(20)"/>
        <use xlink:href="#ray-2" transform="rotate(30)"/>
        <use xlink:href="#ray-2" transform="rotate(40)"/>
        <use xlink:href="#ray-2" transform="rotate(50)"/>
        <use xlink:href="#ray-2" transform="rotate(60)"/>
        <use xlink:href="#ray-2" transform="rotate(70)"/>
        <use xlink:href="#ray-2" transform="rotate(80)"/>
      </g>
      <use xlink:href="#quad-2" transform="rotate(90)"/>
      <use xlink:href="#quad-2" transform="rotate(180)"/>
      <use xlink:href="#quad-2" transform="rotate(270)"/>
    </g>
  </g>
  
  <use xlink:href="#circle-test" fill="#000000" opacity="0.3" x="402" y="202"/>
  
  <use xlink:href="#circle-test" fill="#FFFFFF" x="400" y="200"/>
  
  <use xlink:href="#square-test" fill="#000000" opacity="0.3" x="1102" y="102"/>
  
  <use xlink:href="#square-test" fill="#FFFFFF" x="1100" y="100"/>
</svg>
@keyframes rotate {
  from {
    transform: scale(2) translate(400px,100px) rotate(0deg);
  }
  to { 
    transform: scale(2) translate(400px,100px) rotate(360deg);
  }
}
#burst-container-2 {
  animation: rotate 240s infinite linear;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.