Я пытался размыть SVG clip-path
.
Пробовал разные решения, но ни одно не помогло.
Я не уверен, есть ли другое решение, кроме фильтра.
Pseudocode
SVG clip-path
должен раскрывать текст ниже- Края, если
SVG clip-path
применен должны быть размытыми
HTML
.wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.h1, blur {
width: 100vw;
height: 100vh;
}
.h1 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 4em;
clip-path: url(#svgPath);
background-color: blue;
}
.blur {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 4em;
color: blue;
background-color: white;
filter: blur(8px)
}
<div class="wrapper">
<h1 class="blur">
Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
</h1>
<h1 class="h1">
Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
</h1>
</div>
<svg id="googlesMain" height="0" width="0">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<clipPath id="svgPath">
<circle id="clipPath" cx="250" cy="250" r="250"/>
</clipPath>
</svg>