Create a SVG blurred rectangle

A simple example of creating a SVG blurred rectangle.
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>

   <svg height="300" width="300">
      <defs>
        <filter id="myFilter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
        </filter>
      </defs>
      <rect width="120" height="120" stroke="green" stroke-width="10"
      fill="green" filter="url(#myFilter)" />
    </svg>

  </body>
</html>

Responses

0 Replies