A demonstration of 4 different techniques to make an element into a particular geometric shape.
A Pen by Joe Crawford on CodePen.
Created
November 23, 2024 16:32
-
-
Save artlung/eff1573eb516ecc7d3c2493015e80eb9 to your computer and use it in GitHub Desktop.
ConicGradient vs LinearGradient vs ClipPath vs MaskImage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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