Skip to content

Instantly share code, notes, and snippets.

@quincynyan
Created March 3, 2022 07:20
Show Gist options
  • Save quincynyan/733b292b46e78075bba58c774300c1ed to your computer and use it in GitHub Desktop.
Save quincynyan/733b292b46e78075bba58c774300c1ed to your computer and use it in GitHub Desktop.
Better but worse. Takes up a bit of CPU and makes discord lags a little bit more.
:root {
--thickness: 2px;
--radius: 0px;
--speed: 10s;
--color-1: red;
--color-2: orange;
--color-3: yellow;
--color-4: green;
--color-5: blue;
--color-6: indigo;
--color-7: violet;
}
body {
padding: var(--thickness);
background: #fc466b;
background: -webkit-conic-gradient(
var(--color-1),
var(--color-2),
var(--color-3),
var(--color-4),
var(--color-5),
var(--color-6),
var(--color-7),
var(--color-1)
);
background: conic-gradient(
var(--color-1),
var(--color-2),
var(--color-3),
var(--color-4),
var(--color-5),
var(--color-6),
var(--color-7),
var(--color-1)
);
}
body:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: #fc466b;
background: -webkit-conic-gradient(
var(--color-1),
var(--color-2),
var(--color-3),
var(--color-4),
var(--color-5),
var(--color-6),
var(--color-7),
var(--color-1)
);
background: conic-gradient(
var(--color-1),
var(--color-2),
var(--color-3),
var(--color-4),
var(--color-5),
var(--color-6),
var(--color-7),
var(--color-1)
);
animation: spin var(--speed) linear infinite;
}
#app-mount {
width: calc(100% - (var(--thickness) * 2));
height: calc(100% - (var(--thickness) * 2));
border-radius: var(--radius);
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment