Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save artlung/eff1573eb516ecc7d3c2493015e80eb9 to your computer and use it in GitHub Desktop.
Save artlung/eff1573eb516ecc7d3c2493015e80eb9 to your computer and use it in GitHub Desktop.
ConicGradient vs LinearGradient vs ClipPath vs MaskImage

ConicGradient vs LinearGradient vs ClipPath vs MaskImage

A demonstration of 4 different techniques to make an element into a particular geometric shape.

A Pen by Joe Crawford on CodePen.

License.

<details class="conical">
<summary>conic-gradients!</summary>
<p>4 <code>conic-gradient</code>s in a <code>background</code>.</p>
</details>
<details class="linear">
<summary>linear gradients!</summary>
<p>9 <code>conic-gradient</code>s in a <code>background</code>. Seams may be visible at some resolutions. Especially in Chrome.</p>
</details>
<details class="clipper">
<summary>clipping path!</summary>
<p>1 <code>polygon clip-path</code>.<br />points specified in percentages. Clips the contents.</p>
</details>
<details class="maskimage">
<summary>svg mask image!</summary>
<p>1 <code>svg</code> loaded as a <code>data:image/svg+xml</code> into <code>mask-image.</code> Clips the contents.</p>
</details>
html {
height: 100%;
}
body {
height: 98%;
display: flex;
align-items: center;
justify-content: space-around;
font-family: sans-serif;
background-color: #999;
font-size: 1.2rem;
gap: 1vw;
flex-wrap: wrap;
}
details {
summary {
width: min-content;
white-space: nowrap;
position: absolute;
top: 25%;
left: 12.5%;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 0.2rem;
}
p {
margin: 0;
position: absolute;
top: 40%;
left: 15%;
text-align: left;
width: 75%;
}
position: relative;
box-sizing: border-box;
text-align: center;
--color: yellow;
--bgcolor: darkblue;
padding: 0;
margin: 0;
color: var(--color);
width: clamp(200px, 50vh, 500px);
box-sizing: border-box;
aspect-ratio: 2/1;
background: var(--bgcolor);
&.clipper {
clip-path: polygon(
12.5% 0,
25% 25%,
37.5% 0,
50% 25%,
62.5% 0,
75% 25%,
87.5% 0,
100% 25%,
87.5% 50%,
100% 75%,
87.5% 100%,
75% 75%,
62.5% 100%,
50% 75%,
37.5% 100%,
25% 75%,
12.5% 100%,
0 75%,
12.5% 50%,
0 25%
);
&[open] {
--bgcolor: black;
}
}
&.conical {
background: conic-gradient(
at 50% 0,
#0000 135deg,
var(--c1, var(--bgcolor)) 0 225deg,
#0000 0)
0 0 / 25% 25% repeat-x,
conic-gradient(
at 50% 100%,
var(--c2, var(--bgcolor)) 45deg,
#0000 0 315deg,
var(--c2, var(--bgcolor)) 0)
bottom 0 right 0 / 25% 25% repeat-x,
conic-gradient(
from 225deg at 25%,
#0000 90deg,
var(--c3, var(--bgcolor)) 0)
0 50% / 50% 50% no-repeat,
conic-gradient(
from 45deg at 75% 50%,
#0000 90deg,
var(--c4, var(--bgcolor)) 0)
100% 50% / 50% 50% no-repeat;
&[open] {
animation: 6s conic-colors steps(5, end) infinite;
&:hover {
animation: none;
}
}
}
// Chrome has some visible seams as this scales
&.linear {
background:
linear-gradient(
var(--l1, var(--bgcolor)),
var(--l1, var(--bgcolor))
) 50% 50%/ 50% 50% no-repeat,
linear-gradient(
45deg,
#0000 50%,
var(--l2, var(--bgcolor)) 0
) bottom 0 left 0 / 37.5% 75% no-repeat,
linear-gradient(
-45deg,
#0000 50%,
var(--l3, var(--bgcolor)) 0
) bottom 0 right 0 / 37.5% 75% no-repeat,
linear-gradient(
135deg,
#0000 50%,
var(--l4, var(--bgcolor)) 0
) top 0 left 0 / 37.5% 75% no-repeat,
linear-gradient(
-135deg,
#0000 50%,
var(--l5, var(--bgcolor)) 0
) top 0 right 0 / 37.5% 75% no-repeat,
linear-gradient(
135deg,
#0000 66.67%,
var(--l6, var(--bgcolor)) 0,
) 50% 0 / 25% 25% repeat-x,
linear-gradient(
-135deg,
#0000 66.6%,
var(--l7, var(--bgcolor)) 0,
) 50% 0 / 25% 25% repeat-x,
linear-gradient(
45deg,
#0000 66.6%,
var(--l8, var(--bgcolor)) 0,
) bottom 0 left 50% / 25% 25% repeat-x,
linear-gradient(
-45deg,
#0000 66.6%,
var(--l9, var(--bgcolor))0,
) bottom 0 left 50% / 25% 25% repeat-x;
animation: none;
&[open] {
animation: 9s linear-colors steps(10, end) infinite;
&:hover {
animation: none;
}
}
}
&.maskimage {
mask-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100%" height="100%" viewBox="0, 0, 96, 48"><g><path d="M0,12 L12,-0 L24,12 L36,0 L48,12 L60,0 L72,12 L84,0 L96,12 L84,24 L96,36 L84,48 L72,36 L60,48 C60,48 48,36 48,36 C48,36 36,48 36,48 L24.315,36 L12,48 L0,36 L11,24 L0,12 z" /></g></svg>');
&[open] {
--bgcolor: darkgreen;
}
}
}
@keyframes conic-colors {
0% {
--c1: red;
--c2: var(--bgcolor);
--c3: var(--bgcolor);
--c4: var(--bgcolor);
}
25% {
--c1: var(--bgcolor);
--c2: green;
--c3: var(--bgcolor);
--c4: var(--bgcolor);
}
50% {
--c1: var(--bgcolor);
--c2: var(--bgcolor);
--c3: orange;
--c4: var(--bgcolor);
}
75% {
--c1: var(--bgcolor);
--c2: var(--bgcolor);
--c3: var(--bgcolor);
--c4: black;
}
100% {
--c1: red;
--c2: green;
--c3: orange;
--c4: black;
}
}
@keyframes linear-colors {
0% {
--l1: red;
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
10% {
--l1: var(--bgcolor);
--l2: orange;
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
20% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: black;
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
30% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: violet;
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
40% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: brown;
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
50% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: magenta;
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
60% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: pink;
--l8: var(--bgcolor);
--l9: var(--bgcolor);
}
70% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: rebeccapurple;
--l9: var(--bgcolor);
}
80% {
--l1: var(--bgcolor);
--l2: var(--bgcolor);
--l3: var(--bgcolor);
--l4: var(--bgcolor);
--l5: var(--bgcolor);
--l6: var(--bgcolor);
--l7: var(--bgcolor);
--l8: var(--bgcolor);
--l9: silver;
}
100% {
--l1: red;
--l2: orange;
--l3: black;
--l4: violet;
--l5: brown;
--l6: magenta;
--l7: pink;
--l8: rebeccapurple;
--l9: silver;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment