block by EE2dev 6eccadfc5d1f10472baa09d5fe186486

SVG Filters on straight lines

Full Screen

To apply an SVG filter to straight lines, set filterUnits=”userSpaceOnUse”, otherwise the straight lines/ paths are not shown.

Built with blockbuilder.org

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    path {
      stroke: blue;
      stroke-width: 5px;
      fill: black;
    }
  </style>
</head>

<body>
  <svg width="300" height="300">

    <filter id="blurMe" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>

    <path d= "M 100 100 L 200 100" filter="url(#blurMe)"/>
    <path d= "M 200 100 L 200 200" filter="url(#blurMe)"/>
    <path d= "M 200 200 L 100 200" filter="url(#blurMe)"/>
    <path d= "M 100 200 L 100 100" filter="url(#blurMe)"/>
    <path d= "M 100 100 L 200 200" filter="url(#blurMe)"/>
    <path d= "M 200 100 L 100 200" filter="url(#blurMe)"/>

  </svg>
</body>
</html>