Playing with clip-path and an orange cat
Today I wanted to work more with using SVGs within the clip-path property. I spotted this cat earlier today while out for a walk. It was a bit shy, but I got a few good pictures of it. An unfortunate thing I just learned after creating this post is the path doesn't quite fit within the current layout (as of today, 2021/2/10) of these code posts, but hopefully I can sort out a better solution in the future. I tend to build each of these posts on a single HTML page outside of CMS, and end up having to make tweaks afterwards to make things display correctly afterwards. Ah technical debt, we meet again.
Orange Cat
View the code:
HTML and JS
<section class="code-block">
<h1>Orange Cat</h1>
<img class="orange_cat" src="/ygg/resources/orangenekojc20210210lowband.png" alt="Orange cat with short tail walking up an incline near a golf range in Yokosuka, Japan." width="480" height="360">
</section>CSS
:root {
--bg-color: gray;
--card-bg: white;
--main-color: midnightblue;
--radius-main: 1rem;
}
html { box-sizing: border-box; z-index: 0; }
html * { box-sizing: inherit; }
section.code-block {
display: grid;
place-items: center;
background-color: var(--bg-color, gray);
z-index: 1;
padding: 1rem;
margin: 3rem auto;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
z-index: 1;
}
.code-block h1 {
grid-column: 4 / 5;
grid-row: 1 / 4;
z-index: 3;
margin: 0;
font-family: Impact, Imperial Gothic, sans-serif;
text-transform: uppercase;
color: white;
text-align: right;
padding-right: 3rem;
display: inline-block;
font-size: 2rem;
writing-mode: vertical-rl;
}
.code-block h1::selection {
background: #ff940a;
}
img.orange_cat {
grid-column: 1 / 5;
grid-row: 1 / 4;
display: block;
width: 100%;
max-width: 960px;
height: auto;
background-blend-mode: multiply;
background-image: linear-gradient(-176deg, #ff940a 76%, gray);
box-shadow: 6px 8px 0px -2px black;
z-index: 2;
}
@media (max-width: 375px) {
.code-block h1 {
writing-mode: inherit;
grid-column: 2 / 5;
grid-row: 3 / 4;
font-size: 1.5rem;
text-transform: capitalize;
font-weight: normal;
color: black;
}
}
@media (min-width: 780px) and (max-width: 1247px) {
.code-block h1 {
grid-column: 4 / 5;
grid-row: 1 / 4;
font-size: 3.5rem;
}
}
@media (min-width: 1248px) {
section.code-block {
background: linear-gradient(-171deg, gray 77%, black 77%);
}
.code-block h1 {
writing-mode: vertical-rl;
font-size: 6rem;
}
img.orange_cat {
background: #ff940a;
clip-path: path('M112.321,99.006c0,0-16.667,10.667-13.333,32.667c0,0-1.667,5.667,0,10.667c-5,1.667-7.999,12-3.666,65.667c0,6.333,5,12.666,9.333,25.667s10,23.333,13,53.333c-2.667,13,13.333,45,21.667,63s40.333,69.334,43.333,80.667s0.667,4.999,0.667,10.999s3.333,9.333,3.333,23s2.333,65.334-0.667,75.334s-2.666,12.333-8.333,12.333c0,0-18.333,3.666-22,16.333c-1.333,9.667,3.667,6.334,7.667,8.334s25.333,5.332,31,5.666s10-0.667,11.333,1s4,4.666,6.333-2s11.667-28.333,11.667-32.333s0-3.666,2.333-11.333s2-12.001,4-19.334s9.667-23,9.667-23s1.333,12.001,1,20.334s-2.667,8.666-1.333,18.666s3,6.334,0,18.334s-2.333,6.667-7.333,10s-10.667,0.666-13,10.666s-1.667,12.001,3.333,14.334s4.667-1,6.667,1.333s9,2,10.667,2s4.666,2.333,8.333,2s8.333,1.333,11,2.333s9.667,6.334,14-2.666s9.667-19.999,9.667-34.333c3.667-19,2.333-26.666,5.333-33s1.333,0.666,3-6.334s3.667-16.666,6.667-29.333s5.333-23.666,7.333-22.333s18,2.999,28,8.666s17.334-3.334,24.667,6s24.333,13.001,31,25.334s5,23.666,35.667,38.333c28.667,6.667,38-1.666,44.667-2.333s13.666-2.333,24,6s8,27.666,8,27.666c-2.667,7-7.666,23-11.333,24s-20.667-1-24.667,5.667s-3.667,12.666-1,16.333c2.667,6,4.333,5,7.667,6s8,1.001,11.667,1.334s16,1.334,21,2s17.334,4.666,22.334-2.667s18.666-36.667,21.666-42.667s5.667-12.999,7.334-20.666s5.666-27.666,6.333-45c0.667-10.667,0.334-7.667,3.667-12.667s6.667-7,9-18s3.001-9.999,6.667-13.333s9.666-3.666,16.333-25c2.667-5.334,5.334-13.334,7.667-14.667s2.666-3,9.666-3s17-10.999,20-24.666s3.999-34.333-4.667-37s-9-0.333-11.333-3s-7-3.334-10.333-3.334s-7.666,0.334-12.333-6.666s-21-22.667-21.667-31.334s-3.668-15.667-19.334-27c-6.666-10-15.999-24.666-73.666-41.666c-42.667-17-9.667-14-83.333-37c-32.667-18-63.667-20.333-93.333-21c0,0-22-1.667-28.333-2s-12-6-16.333-11s-9.333-0.667-18-9s-9-8-6.667-19s0.333-5.667,2.333-11s3-7.667,4-11.333s2-7,4.667-14s4.333-9,3-11.333s-4-1.667-7.333-0.667s-6,2.333-7.333,0s-4-4.333-7.667-0.333s-10,11.334-13.667,11.667s-4.333,0-9,1s-8-1-13,1s-8.667-2-12.667-2s-12-2.667-14.667-0.667s-3.333,1-7-0.667s-4,0.333-6.667,0.667s-5,2.667-8.667-2.333S129.987,99.672,112.321,99.006z');
}
}