use blend mode in svg for vector shapes - HTML CSS SVG

HTML CSS examples for SVG:Path

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

Description

use blend mode in svg for vector shapes

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
path {<!-- w  w w . ja v a  2 s .c  o m-->
   mix-blend-mode:multiply;
}
</style> 
 </head> 
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="100 100 200 200"> 
   <path d="M100 100 L200 100 L200 200 L100 200 Z" fill="#00FFFF" /> 
   <path d="M150 150 L250 150 L250 250 L150 250 Z" fill="#CC3300" /> 
   <path d="M175 175 L275 175 L275 275 L175 275 Z" fill="#FFFF00" /> 
  </svg>  
 </body>
</html>

Related Tutorials