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
![Orange cat with short tail walking up an incline near a golf range in Yokosuka, Japan.](/ygg/resources/orangenekojc20210210lowband.png)
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');
}
}