CodePen

HTML

            
              <svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
 <!-- Fake SMIL animation polyfill for IE -->
  
<script type="text/ecmascript" xlink:href="http://www.codedread.com/lib/smil.user.js"/>
  
  <defs>
    <filter id="blurry" x="-20%" y="-20%" height="140%" width="140%" primitiveUnits="userSpaceOnUse">
      <feImage x="0" y="0" width="500" height="500" xlink:href="#squares" result="mySquares"/>
      <feGaussianBlur stdDeviation="10" in="mySquares" result="blurSquares"/>
      <feComponentTransfer in="blurSquares" result="moaralpha">
        <feFuncA type="linear" slope="4" intercept="0"/>
      </feComponentTransfer>
      <feComposite operator="in" in="moaralpha" in2="SourceGraphic" result="clipBlur"/>
      <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="white" flood-opacity="0.6" result="whitesquare"/>
      <feBlend mode="screen" in="clipBlur" in2="whitesquare" result="final"/>

    </filter>
  </defs>
  
  <g id="squares">
    <rect x="10" y="10" height="235" width="235" fill="rgb(244,81,16)">
      <animate attributeName="x" from="-200" to="10" dur="1s"/>
      <animate attributeName="y" from="-200" to="10" dur="1s"/>
    </rect>
    <rect x="255" y="10" height="235" width="235" fill="rgb(123,186,0)" >
            <animate attributeName="x" from="500" to="255" dur="1s"/>
      <animate attributeName="y" from="-200" to="10" dur="1s"/>
         </rect>
    <rect x="10" y="255" height="235" width="235" fill="rgb(0,161,240)" >
         <animate attributeName="x" from="-200" to="10" dur="1s"/>
      <animate attributeName="y" from="600" to="255" dur="1s"/>
       </rect>
    <rect x="255" y="255" height="235" width="235" fill="rgb(255,185,0)">
            <animate attributeName="x" from="600" to="255" dur="1s"/>
      <animate attributeName="y" from="600" to="255" dur="1s"/>
       </rect>
  </g>

    <rect filter="url(#blurry)" x="50" y="50" height="400" width="400"/>
</svg>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              svg {
  
  position: absolute;
  left: 100px;
  top: 100px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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