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

Reposition buttons using JavaScript

I attempted to modify the button that appears at the top of an HTML page. <div class='play'> <input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" /> </div> <div class='pause ...

javascripthtmlcssbutton

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

javascripthtmlcssreactjstailwind-css

Dynamic WordPress Website Designs

Seeking recommendations for responsive WordPress themes that offer extensive CSS and structural customization options. The goal is to retain all of WordPress's built-in features, such as blogging capabilities, while having the freedom to completely co ...

wordpresscsswordpress-theming

Animation in CSS/transform drifting out of view

I have a challenge with animating text to each corner of the screen, where the text is rotated in every corner. However, I am facing an issue where the text goes off-screen in the top right and bottom left corners. It seems like the rotation might be causi ...

htmlcsscss-animationscss-transforms

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

javascriptcssmedia-queries

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

htmlcsscenteringnavigationbar

Adjust the background color of Bootstrap 4 checkboxes

I'm trying to figure out how I can modify the background color of a Bootstrap 4 checkbox in this specific scenario. .custom-control-label::before, .custom-control-label::after { top: .8rem; width: 1.25rem; height: 1.25rem; } <link rel="style ...

htmlcssbootstrap-4

Is it possible to incorporate HTML content into the metadata within the head section of a Nuxt application?

Received HTML content from the backend that needs to be incorporated into the meta tag of the HTML head using nuxt. Encountered an error when attempting to display the received content View Error Outlined below is the code implementation: Snippet of Code ...

javascripthtmlcssvue.jsnuxt.js

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

cssreactjs

Shape with smoothed corners

Is there a way to create rectangles with rounded corners using CSS, SVG, or other methods while maintaining straight horizontal and vertical sides? I attempted to use border-radius for the rounded corners, but found that it created curved edges on both ho ...

htmlcsssvgcss-shapes

Ways to cap the height of elements at predetermined values ("stepped") depending on the content within

After posting a question on this topic here, I am seeking advice on how to implement "step-based heights" for a div element. To further clarify, my goal is to have each box with a height that is a multiple of 400px. For example, if the height is 345px, it ...

htmlcss

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

I'm looking to enhance the user experience on my dashboard by allowing users to set their preferred default tab view upon logging in. Using an AJAX call to retrieve the value from the database in MVC, I am working on the JS/Razor side of things to mak ...

jquerycsstwitter-bootstrap

Utilize CSS block display for ::before and ::after pseudo elements within a div container

I have a CSS file that contains the following code snippet: .loader { width: 250px; height: 50px; line-height: 50px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-fam ...

htmlcssdisplay

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

I receive an [object HTMLCollection] as the output

I am currently working on recreating a login page and I want it so that when the button is clicked, it displays the name you entered, but instead, it returns [object HTMLCollection]. My expectation was to have the name displayed as entered. var nombre ...

javascripthtmlcssbutton

Avoid repeating media queries in MUI JSS by combining them efficiently

Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be: [theme.breakpoints.up('xl')]: { color: 'red', backgroundColor: 'gre ...

cssreactjsmaterial-uijss

Set the height of the unordered list (ul) to be

I came across a design on Facebook that resembles a timeline, but I am having trouble adjusting the height of the ul element. <ul class="timeline">...</ul> I want the line in the middle to fill the height of the page even when there is less c ...

jqueryhtmlcss

Looking to prevent horizontal scrolling on smartphones in an HTML webview - how can I do this?

Currently, I am dealing with a webview and encountering some peculiar behavior. The overflow-x property is set to hidden, which works perfectly on browsers. However, when accessed on a mobile device, the overflow seems to be ignored completely. Here is t ...

htmlcsswebview

Tips for successfully using `cols=""` within a grid container alongside a textarea

It seems that both Chrome and Firefox are not following the cols attribute on textarea elements within a grid container: .grid { display: grid; } textarea:not([cols]) { width: 100%; } <h2>Not in a grid container:</h2> <div> <tex ...

htmlcsstextareacss-grid

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

javascriptcssjquery-uiautocompleteinternet-explorer-7