Skip to content

Instantly share code, notes, and snippets.

@drok
Created January 6, 2023 20:44
Show Gist options
  • Save drok/c647dbb205444b6b40d065eaed6ccff1 to your computer and use it in GitHub Desktop.
Save drok/c647dbb205444b6b40d065eaed6ccff1 to your computer and use it in GitHub Desktop.
CSS only cubic pattern
html {
--s: 48px; /* control the size */
--c1: green;
--c2: #ffffff;
--c3: lightgreen;
--_g: var(--c3) 0 120deg,#0000 0;
background:
conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
conic-gradient(from 60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%,
var(--c1) 0 calc(500%/6),var(--c2) 0);
background-size: calc(1.732*var(--s)) var(--s);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment