Create Wave Border with SVG and CSS Clip-Path

Image for post
Image for post
Pinned text with ScrollMagic vanishing behind a clip-path’d wave.
clip-path: url(#wave);
<svg>
<defs>
<clipPath id=”wave” clipPathUnits=”objectBoundingBox”>
<path class=”st0" d=”M1,0c0,0–0.3,0.1– 0.5,0.1S0.3,0,0,0.1V1h1L1,0z”/>
</clipPath>
</defs>
</svg>
Image for post
Image for post
<svg>
<defs>
<clipPath id=”wave” clipPathUnits=”objectBoundingBox”>
<path class=”st0" d=”M1,0c0,0–0.3,0.1– 0.5,0.1S0.3,0,0,0.1V1h1L1,0z”/>
</clipPath>
</defs>
</svg>
clip-path: url(#wave);

Written by

Front-end Web Developer. Language lover. Traveler. Dude.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store