Skip to content

Instantly share code, notes, and snippets.

@EE2dev

EE2dev/.block

Created August 3, 2019 14:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EE2dev/6eccadfc5d1f10472baa09d5fe186486 to your computer and use it in GitHub Desktop.
Save EE2dev/6eccadfc5d1f10472baa09d5fe186486 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Filters on straight lines
Raw
.block
license: mit
Raw
README.md

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

Built with blockbuilder.org

Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment