Cut out a passage by using a polyline shape

I am looking to create a unique effect by clipping a text like a heading1 using an svg polyline. The concept is to place the H1 text behind the polyline background and make it appear frosted or blurred. I have successfully achieved this in the past but seem to have forgotten the exact steps

    <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 would like to implement #cliptop as a clip-path in CSS. I tried using clip-path: url(#cliptop). Any suggestions or advice on achieving this effect would be greatly appreciated

csssvg

Answer №1

Here is one method for achieving this effect. The coordinates in this example are based on a small square (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

After following enxaneta's suggestion, I finally cracked the code. Here's what it looks like:

<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>

Regarding the style aspect:

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The element vanishes from sight after being detached and re-appended

Currently, I am utilizing hQuery's draggable and droppable features. My goal is to move an element from its original parent to its new dropped parent after dragging it. However, when I detach and append the element, it seems to disappear! What could ...

javascriptjquerycss

Can you provide some examples of CSS code snippets?

Can someone share some CSS codes similar to :hover that can be used in the : part for different effects? I tried looking it up but couldn't find much, so any help would be greatly appreciated. ...

htmlcsscss-selectors

Steps for displaying a div when clicking a link in the navigation

Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly.... Objective The goal is to have a navigation bar where each item, when clicked on, will display a div with content ...

htmlcssnavigationhover

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow To view my code, please visit: Codepen .next { position:absolut ...

javascripthtmlcss

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons. In my pallet div, there are over 200 questions which are dynamically generated. However, th ...

javascriptjqueryhtmlcss

What is the best way to arrange my crimson blocks to sit next to each other?

Is there a way to align the red boxes side by side with some space in between them for separation, and how can I ensure that the signin/signup button appears against the blue background of the header? I attempted using float but encountered issues. The d ...

htmlcss

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

javascripthtmlcss

The CSS table-cell element causes adjacent table-cell content to reposition

The table inside the "center" div is causing the contents in the "left" div to be offset by a few pixels from the top (about 8 in my browser). When you add some text before the table, this offset disappears. Why is this happening? Is there a way to preven ...

htmlcsscss-tables

Stylish CSS popup backdrop

I have very limited CSS knowledge and struggle with the syntax, but I am trying to customize my Wikipedia experience using Chrome and the Stylish addon. I found some code online and modified it to create a dark theme, but now I'm stuck because I need ...

htmlcssstylish

What is the best way to send an inline SVG string to my controller?

I am trying to send an inline svg string along with some other properties to my controller. When I replace the svg string with a normal string like "blabla", it successfully reaches my controller. However, with the actual svg string, it never makes it to ...

javascriptc#jqueryajaxsvg

Tips for maximizing the efficiency of a callback when utilizing the filter function in Primefaces for 'myDataTable'

Currently using Primefaces 5.1, and I've encountered a situation where I want to hide a table until after the filter is applied in Javascript. My initial thought was to simply set the css of the table to visibility:hidden;, followed by running the fol ...

javascriptjquerycssjsfprimefaces

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

Accelerate Image Preloading速

I am currently in the process of creating a website that features divs with background images. Although I am new to JavaScript, I am eager to learn more about it. My main goal is to preload these images so that visitors do not encounter any delays or bla ...

javascriptjqueryhtmlcss

The styled components can create identical CSS classes with varying conditions

Below are the CSS styles I am currently using: import styled, { css } from "styled-components"; const H4 = css` font-family: "Futura"; font-style: normal; font-weight: 500; font-size: 20px; line-height: 140%; color: #3a786a ...

cssreactjsjsxstyled-components

Is it feasible to organize checkboxes into columns using CSS?

Can checkboxes be reflowed into columns horizontally as the container's height changes dynamically with an unknown number of checkboxes? Here is a visual representation to illustrate the concept: Height = 180px (20px * 9 checkboxes): [ ] Checkbox 1 ...

htmlcss

Unleash the power of WordPress Revolution Slider captions with exclusive CSS styling

Struggling with adding custom captions? I'm using a Multisite WordPress setup and trying to avoid editing the captions.css file in the plugins folder. Here's what I attempted: .rev_slider .tp-caption .my_head{ position: absolute; ...

csswordpress

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components. Typi ...

cssangularjsreactjsresponsive-designvue.js

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

htmlcssangularstylesngx-editor

Utilizing CSS to apply unique styles to individual radio buttons

I have 4 radio buttons in my quiz application. I need to style only one of them, which is the correct answer option. Here's the HTML snippet that was generated: <p> <input id="SelectedAnswer" type="radio" value="5" name="SelectedAnswer"> ...

htmlcss

How can we prevent the navigation from fading out when scrolling back up, as JQuery control the opacity of the Nav to fade in?

Looking for some guidance on jQuery assistance. I currently have a fixed navigation bar at the top of my webpage with an initial opacity set to 0 upon page load. As the user scrolls down, I want the navigation bar to fade in using the following code: fun ...

jquerycss