CodePen

HTML

            
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800">
<defs>
	<clipPath id="cut">
		<circle cx="200" cy="200" r="50"/>
	</clipPath>
	<filter id="grayscale">
		<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
	</filter>
	<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
		<circle cx="520" cy="200" r="50" fill="gray"/>
	</mask>
</defs>
<rect x="100" y="100" width="300" height="300" fill="blue" style="outline: blue 5px auto; clip-path: url(#cut);"/>
<rect x="100" y="420" width="300" height="300" fill="blue" style="outline: blue 5px auto; filter: url(#grayscale)"/>
<rect x="420" y="100" width="300" height="300" fill="blue" style="outline: blue 5px auto; mask: url(#mask)"/>
<rect x="320" y="420" width="300" height="300" fill="blue" style="outline: blue 5px auto;"/>
<rect x="320" y="420" width="300" height="300" fill="green" style="outline: blue 5px auto; mix-blend-mode: difference;"/>
</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 ..................