block by micahstubbs 33eac2eb80931673cfe1e9955d784f0f

css-svg-clipping

Full Screen

the first example from @SaraSoueidan nice 2014 post on css-svg-clipping

working through this to better understand clipPaths 😊

index.html

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CSS &amp; SVG Clipping Demo #2</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

    </head>
    <body>
        <style>
            .css-clipped {
                width: 800px;
                height: 500px;
                -webkit-clip-path: polygon(150px 463px,765px 236px,687px 31px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
                clip-path: polygon(626px 463px,765px 236px,687px 20px,271px 100px,70px 10px,49px 250px,133px 406px,374px 462px,529px 393px);
            }
        </style>
        <img class="css-clipped" src="https://i.imgur.com/2gDNron.jpg" alt="Cherry Blossoms.">
    </body>
</html>