clip-path demo

by Richard Hunter

HTML

<svg width="0" height="0" >
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <circle r="0.05" cy="0.0625" cx="0.1625" />
            <circle r="0.09322" cy="0.29375" cx="0.2424" />
            <circle r="0.0587" cy="0.135" cx="0.933" />
            <circle r="0.0545" cy="0.8197" cx="0.8336" />
            <circle r="0.0439" cy="0.603" cx="0.3192" />
            <!-- this circles appear at corners of container -->
            <circle r="0.05" cy="1" cx="0"/>
            <circle r="0.05" cy="0" cx="0"/>
            <circle r="0.05" cy="1" cx="1"/>
            <circle r="0.05" cy="0" cx="1"/>
        </clipPath>
    </defs>
</svg>
<div class="content centered">
<div class="clipped"></div>
</div>

SCSS

.clipped {
    width : 100%;
    background: #c8c;
    height : 100%;
    -webkit-clip-path: url(#svgPath);
}
.content {
    font-size : 12px; // change this to adjust scale
    border : solid 1px black;
    height : 10em;
    width : 10em;   
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}