SVG height with horizontal scaling - HTML CSS SVG

HTML CSS examples for SVG:Filter

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

Description

SVG height with horizontal scaling

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">

.scoop__wrapper {<!--from  w ww  .j  av  a2s .c om-->
   background-color: black; }


      </style> 
 </head> 
 <body> 
  <div class="scoop__wrapper"> 
   <svg width="100%" height="392" viewbox="0 0 1440 392" preserveaspectratio="none"> 
    <defs> 
     <path id="b" d="M1440 .826V620H0V.826v22.826C241.31 82.55 481.31 112 720 112s478.69-29.45 720-88.348V.826z" /> 
     <filter id="a" width="106.9%" height="116%" x="-3.4%" y="-8.5%" filterunits="objectBoundingBox"> 
      <feoffset dy="-3" in="SourceAlpha" result="shadowOffsetOuter1" /> 
      <fegaussianblur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="16" /> 
      <fecolormatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" /> 
     </filter> 
    </defs> 
    <g fill="none" fill-rule="evenodd" transform="translate(-1 9)"> 
     <use fill="#000" filter="url(#a)" xlink:href="#b" /> 
     <use fill="#FFF" xlink:href="#b" /> 
    </g> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials