Applying A Backdrop-filter: Blur(); To An Svg Path

I am trying to recreate an effect in CSS using an SVG. We have text saved as an SVG and needing to blur the backdrop behind the text only. I know this is possible with block

Solution 1:

using clipPath SVG and clipping a duplicate img with the blur filter will get you something like this:

body {
  margin10px;
}

.clipped {
  position: absolute;
  top: 10px;
  left: 10px;
  clip-path: url(#svgTextPath);
  filter: blur(10px);
}

<imgsrc="https://picsum.photos/id/99/500/300"><imgclass="clipped"src="https://picsum.photos/id/99/500/300"><svgheight="0"width="0"><defs><clipPathid="svgTextPath"><textx="50"y="200"textLength="400px"font-family="Vollkorn"font-size="200px"font-weight="700"> Text </text></clipPath></defs></svg>

Share