CodePen

HTML

            
              <svg width="500px" height="500px" viewBox="0 0 1000 1000">
  
<defs>

<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
  
  <path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">   
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="45 250 180" dur="1.5s" 
     additive="replace" fill="freeze"/>
  </path>
  
  <path id="green" transform="rotate(90 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="90 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path> 
  
  <path id="greenblue" transform="rotate(135 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="135 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
  <path id="blue" transform="rotate(180 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="180 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
    <path id="violet" transform="rotate(225 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="225 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
      <path id="pink" transform="rotate(270 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="270 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path>
  
      <path id="red" transform="rotate(315 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" >
          <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0 250 180" to="315 250 180" dur="1.5s"
     additive="replace" fill="freeze"/>
  </path> 
  
  <filter id="blendit">
    <feImage xlink:href="#orange" x="0" y="0" result="1"/>
    <feImage xlink:href="#yellow" x="0" y="0" result="2"/>
        <feImage xlink:href="#green" x="0" y="0" result="3"/>
        <feImage xlink:href="#greenblue" x="0" y="0" result="4"/>
        <feImage xlink:href="#blue" x="0" y="0" result="5"/>
        <feImage xlink:href="#violet" x="0" y="0" result="6"/>
        <feImage xlink:href="#pink" x="0" y="0" result="7"/>
        <feImage xlink:href="#red" x="0" y="0" result="8"/>
    
    <feBlend mode="multiply" in="1" in2="2" result="12"/>
        <feBlend mode="multiply" in="12" in2="3" result="123"/>
        <feBlend mode="multiply" in="123" in2="4" result="1234"/>
        <feBlend mode="multiply" in="1234" in2="5" result="12345"/>
        <feBlend mode="multiply" in="12345" in2="6" result="123456"/>
        <feBlend mode="multiply" in="123456" in2="7"result="1234567"/>
        <feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/>
    <feColorMatrix type="hueRotate" values="0">
      <animate attributeName="values" attributeType="XML" values="0; 0; 0 ; 0 ; 0 ; 0 ;180;360;360" dur="12s" repeatCount="indefinite"/>
    </feColorMatrix>

</filter>
  
</defs>
  
  <rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
  
</svg>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................