Clip a text using polyline - css

Question

I want to clip a text such as a heading1 using svg polyline, the idea is to put the H1 behind the polyline background and make it appear like a frosted or blurred, I've done it before but somehow forgot
<svg height="200" width="100%"viewBox="0 0 100 200" preserveAspectRatio="none">
<polyline id="cliptop" points="
8.3,40
16.6,50
24.9,90
33.2,70
41.5,80
49.8,60
58.1,20
66.4,70
74.4,60
83,40
91.3,50
99.6,80
99.6,200
8.3,200
"
style="fill:rgba(255,255,255,0.75);stroke:none;"
/>
<polyline points="
8.3,40
16.6,50
24.9,90
33.2,70
41.5,80
49.8,60
58.1,20
66.4,70
74.4,60
83,40
91.3,50
99.6,80
"
style="fill:none;stroke:rgba(30,0,0,0.8);stroke-width:7;"vector-
effect="non-scaling-stroke"
/>
</svg>
i'd like to use #cliptop as clip-path in css, I tried the clip-path: url(#cliptop). thanks, any advise would be appreciated

Answer 1

This is one ay of doing it. In this case the points are relative to a very small box (a square of 1x1) and `clipPathUnits="objectBoundingBox"``
h1{
padding: 0;
background: silver;
background-size: cover;
height: 50vh;
-webkit-clip-path: url(#clip);
clip-path: url(#clip);
}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<polyline points="
.083,.4
.166,.50
.249,.90
.332,.70
.415,.80
.498,.60
.581,.20
.664,.70
.744,.60
.83,.40
.913,.50
.996,.80
.996,2.00
.083,2.00
" />
</clipPath>
</defs>
</svg>
<h1></h1>

Answer 2

I've figured it out just like enxaneta replied, here's how it look
<svg height="200" width="100%"viewBox="0 0 100 200"
preserveAspectRatio="none">
<defs>
<filter id="dropshadow" height="100%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.8"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<polyline points="
8.3,40
16.6,50
24.9,90
33.2,70
41.5,80
49.8,60
58.1,20
66.4,70
74.4,60
83,40
91.3,50
99.6,80
"
style="fill:none;stroke:rgba(30,0,0,0.8);stroke-width:3;"vector-effect="non-
scaling-stroke"
/>
</svg>
<h1 class="clipped">70.4%</h1>
<h1 class="clipped2">70.4%</h1>
</div>
<svg height="0" width="0">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<polyline points="
.083,.2
.166,.25
.249,.45
.332,.35
.415,.4
.498,.3
.581,.1
.664,.35
.744,.3
.83,.2
.913,.25
.996,.4
.996,2.00
0,2.00
0,0
" />
</clipPath>
<clipPath id="clip2" clipPathUnits="objectBoundingBox">
<polyline points="
.083,.2
.166,.25
.249,.45
.332,.35
.415,.4
.498,.3
.581,.1
.664,.35
.744,.3
.83,.2
.913,.25
.996,.4
.996,0
0,0
" />
</clipPath>
</defs>
</svg>
and the style
<style>
.framer .clipped,.framer .clipped2{
position: absolute;
top: 0;
margin: 0 auto;
width: 100%;
height: 200px;
line-height: 120px;
font-size: 120px;
letter-spacing: -5px;
text-align: center;
z-index: -2;
}
.framer .clipped{
color: transparent;
text-shadow: 0 0 8px rgba(130,100,100,0.5);
-webkit-clip-path: url(#clip);
clip-path: url(#clip);filter:
}
.framer .clipped2{
-webkit-clip-path: url(#clip2);
clip-path: url(#clip2);
color: #300;
}
</style>