SVG donut-shape with access of both circles - HTML CSS SVG

HTML CSS examples for SVG:Circle

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

Description

SVG donut-shape with access of both circles

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">
#donut:hover<!--  w  w  w. j  av a2  s.c o m-->
 {
   mask:;
}
</style> 
 </head> 
 <body> 
  <svg width="500" height="500"> 
   <defs> 
    <mask id="bigmask"> 
     <rect width="100%" height="100%" fill="white" /> 
     <circle cx="250" cy="250" r="50" /> 
    </mask> 
    <mask id="smallmask"> 
     <circle cx="250" cy="250" r="150" fill="white" /> 
     <circle cx="250" cy="250" r="100" /> 
    </mask> 
   </defs> 
   <circle id="donut" cx="250" cy="250" r="200" mask="url(#bigmask)" /> 
  </svg>  
 </body>
</html>

Related Tutorials