More Clip Path Practice


by Jeremy Caudle
code

I can’t work with clip-path without looking up the syntax. I want to change that, so I thought today’s post would involve clip-path in some capacity. It may have just been for quick reference, but I think I found something neat in polygon clip-paths today!

Circle clip-path Ellipse clip-path Inset clip-path Polygon clip-path Path clip-path SVG Path clip-path

View the code:

HTML and JS 
<svg height="0" width="0">
            <defs>
                <clipPath id="petal" width="300" height="300" viewbox="0 0 300 300"><path d="M42.501,11.25c0,0-2.75-14.5-17.75-6.75S2.501,44.25,3.251,53s11.75,22.75,13.75,27s21,15.75,26,15.75S65.751,82,69.251,77.5s8.25-13.5,7.5-19.25c1.75-8.75,7.5-18.75-0.25-32.25c-8.25-9-10.5-11.25-11.75-14.25s-13-6.75-16-6.75S42.251,8.25,42.501,11.25z"/>
                </clipPath>
            </defs>
        </svg>
        
				<div class="code-block">

                <img src="https://place-hold.it/300x300/.gif/?text=[circle]" alt="Circle clip-path" class="circle-clip" width="300" height="300" />
                <img src="https://place-hold.it/300x300/.gif/?text=[ellipse]" alt="Ellipse clip-path" class="ellipse-clip" width="300" height="300" />
                <img src="https://place-hold.it/300x300/.gif/?text=[inset]" alt="Inset clip-path" class="inset-clip" width="300" height="300" />
                <img src="https://place-hold.it/300x300/.gif/?text=[polygon]" alt="Polygon clip-path" class="polygon-clip" width="300" height="300" />
                <img src="https://place-hold.it/85x98/.gif/?text=[path]"  alt="Path clip-path" class="path-clip" width="85" height="98" />
                <img src="https://place-hold.it/85x98/.gif/?text=[svg-path]"  alt="SVG Path clip-path" class="svg-path-clip" width="85" height="98" />

        </div>
CSS 
.code-block {
                width: clamp(16em, 90vw, 60em);
                padding: 1rem;
                margin: 1rem auto;
            }

            .code-block img {
                width: 100%;
                height: auto;
                transition: clip-path .5s ease-in-out;
            }

            .circle-clip { clip-path: circle(50% at 50% 50%); }
            .circle-clip:hover { clip-path: circle(50% at 0% 50%); }
            .ellipse-clip { clip-path: ellipse(30% 50% at 50% 50%); }
            .ellipse-clip:hover { clip-path: ellipse(50% 30% at 50% 50%); }
            .inset-clip { clip-path: inset(1rem round 1rem);}
            .inset-clip:hover { clip-path: inset(1rem round 0);}
            .svg-path-clip {
                clip-path: url(#petal);
                max-width: 85px;
                max-height: 98px;
            }
            .svg-path-clip:hover {
                max-width: 80px;
                max-height: 94px;
            }
            .path-clip {
                clip-path: path('M42.501,11.25c0,0-2.75-14.5-17.75-6.75S2.501,44.25,3.251,53s11.75,22.75,13.75,27 s21,15.75,26,15.75S65.751,82,69.251,77.5s8.25-13.5,7.5-19.25c1.75-8.75,7.5-18.75-0.25-32.25c-8.25-9-10.5-11.25-11.75-14.25s-13-6.75-16-6.75S42.251,8.25,42.501,11.25z');
                max-width: 85px;
                max-height: 98px;
            }
            .path-clip:hover { clip-path: path('M42.501,11.25c0,0-2.75-14.5-17.75-6.75S2.501,48.25,3.251,53s11.75,32.75,13.75,27 s21,15.75,26,15.75S65.751,82,69.251,77.5s8.25-11.5,7.5-19.25c1.75-8.75,7.5-25.75-0.25-32.25c-8.25-9-10.5-11.25-11.75-14.25s-11-1.75-16-2.75S42.251,8.25,42.501,11.25z');
            }
            .polygon-clip { clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%); }
            .polygon-clip:hover { clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0); }

            @supports (display: grid) {
                .code-block {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                }

                .code-block img {
                    align-self: center;
                    justify-self: center;
                }
            }

            .hidden {
                display: none;
                visibility: hidden;
            }

Tags