Drawing a circle with a dropshadow in SVG and clipping the edges - HTML CSS SVG

HTML CSS examples for SVG:Circle

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

Description

Drawing a circle with a dropshadow in SVG and clipping the edges

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!-- ww w . ja v  a 2s.c om-->
 <body> 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewport="0 0 200 200" style="border:1px solid red"> 
   <defs> 
    <filter id="f1" x="-40%" y="-40%" height="200%" width="200%"> 
     <feoffset result="offOut" in="SourceAlpha" dx="4" dy="4" /> 
     <fegaussianblur result="blurOut" in="offOut" stdDeviation="8" /> 
     <feblend in="SourceGraphic" in2="blurOut" mode="normal" /> 
    </filter> 
   </defs> 
   <circle r="30" cx="50" cy="50" style="stroke:gray; fill:aliceblue; stroke-width:3px" filter="url(#f1)" /> 
  </svg>  
 </body>
</html>

Related Tutorials