Skip to content

Instantly share code, notes, and snippets.

@w-biggs

w-biggs/input.scss

Created Dec 24, 2020
Embed
What would you like to do?
Generated by SassMeister.com.
@function quick-sort($list) {
$less: ();
$equal: ();
$large: ();
@if length($list) > 1 {
$seed: nth($list, ceil(length($list) / 2));
@each $item in $list {
@if ($item == $seed) {
$equal: append($equal, $item);
} @else if ($item < $seed) {
$less: append($less, $item);
} @else if ($item > $seed) {
$large: append($large, $item);
}
}
@return join(join(quick-sort($less), $equal), quick-sort($large));
}
@return $list;
}
.star-small, .star-medium, .star-large {
width: 24px;
height: 24px;
position: fixed;
background-size: auto 24px;
background-position: 0px 0px;
image-rendering: crisp-edges;
z-index: -5;
}
.star-small {
background-image: url('https://i.imgur.com/VQJRbzZ.png');
animation: star-small 6s infinite step-end;
}
$small-percents: quick-sort([random(10000)/10000, random(10000)/10000, random(10000)/10000]);
$small-positions: -24px, 0px, -24px;
@keyframes star-small {
0% { background-position: 0px 0px; }
@for $i from 1 through 3 {
#{percentage(nth($small-percents, $i))} {
background-position: #{nth($small-positions, $i)} 0px;
}
}
}
$medium-percents: ();
$medium-positions: (1);
@for $i from 1 through 6 {
$medium-percents: append($medium-percents, random(10000)/10000);
@if nth($medium-positions, -1) == 0 or nth($medium-positions, -1) == 2 {
$medium-positions: append($medium-positions, 1);
} @else if random() < 0.5 {
$medium-positions: append($medium-positions, 2);
} @else {
$medium-positions: append($medium-positions, 0);
}
}
$medium-percents: quick-sort($medium-percents);
.star-medium {
background-image: url('https://i.imgur.com/fM1biij.png');
animation: star-medium 9s infinite step-end;
animation-delay: (random(90) / 10) * -1s;
}
@keyframes star-medium {
0% { background-position: 0px 0px; }
@for $i from 1 through 6 {
#{percentage(nth($medium-percents, $i))} {
background-position: #{nth($medium-positions, $i) * -24px} 0px;
}
}
}
$large-percents: ();
$large-positions: (1);
@for $i from 1 through 6 {
$large-percents: append($large-percents, random(10000)/10000);
@if nth($large-positions, -1) == 0 or nth($large-positions, -1) == 2 {
$large-positions: append($large-positions, 1);
} @else if random() < 0.5 {
$large-positions: append($large-positions, 2);
} @else {
$large-positions: append($large-positions, 0);
}
}
$large-percents: quick-sort($large-percents);
.star-large {
background-image: url('https://i.imgur.com/fM1biij.png');
animation: star-large 9s infinite step-end;
animation-delay: (random(90) / 10) * -1s;
}
.star-large-offset {
animation-delay: (random(90) / 10) * -1s;
}
@keyframes star-large {
0% { background-position: 0px 0px; }
@for $i from 1 through 6 {
#{percentage(nth($large-percents, $i))} {
background-position: #{nth($large-positions, $i) * -24px} 0px;
}
}
}
@for $i from 1 through 25 {
.star-small:nth-of-type(#{$i}) {
top: random(100) + vh;
left: random(100) + vw;
}
.star-medium:nth-of-type(#{$i}) {
top: random(100) + vh;
left: random(100) + vw;
}
.star-large:nth-of-type(#{$i}) {
top: random(100) + vh;
left: random(100) + vw;
}
}
.star-small, .star-medium, .star-large {
width: 24px;
height: 24px;
position: fixed;
background-size: auto 24px;
background-position: 0px 0px;
image-rendering: crisp-edges;
z-index: -5;
}
.star-small {
background-image: url("https://i.imgur.com/VQJRbzZ.png");
animation: star-small 6s infinite step-end;
}
@keyframes star-small {
0% {
background-position: 0px 0px;
}
25.81% {
background-position: -24px 0px;
}
43.47% {
background-position: 0px 0px;
}
59.63% {
background-position: -24px 0px;
}
}
.star-medium {
background-image: url("https://i.imgur.com/fM1biij.png");
animation: star-medium 9s infinite step-end;
animation-delay: -1.4s;
}
@keyframes star-medium {
0% {
background-position: 0px 0px;
}
0.61% {
background-position: -24px 0px;
}
20.72% {
background-position: 0px 0px;
}
23.66% {
background-position: -24px 0px;
}
25.17% {
background-position: -48px 0px;
}
68.63% {
background-position: -24px 0px;
}
84.76% {
background-position: -48px 0px;
}
}
.star-large {
background-image: url("https://i.imgur.com/fM1biij.png");
animation: star-large 9s infinite step-end;
animation-delay: -7.4s;
}
.star-large-offset {
animation-delay: -0.2s;
}
@keyframes star-large {
0% {
background-position: 0px 0px;
}
14.32% {
background-position: -24px 0px;
}
21.28% {
background-position: 0px 0px;
}
40.3% {
background-position: -24px 0px;
}
56.13% {
background-position: 0px 0px;
}
57.88% {
background-position: -24px 0px;
}
83.83% {
background-position: -48px 0px;
}
}
.star-small:nth-of-type(1) {
top: 61vh;
left: 37vw;
}
.star-medium:nth-of-type(1) {
top: 11vh;
left: 40vw;
}
.star-large:nth-of-type(1) {
top: 31vh;
left: 19vw;
}
.star-small:nth-of-type(2) {
top: 27vh;
left: 96vw;
}
.star-medium:nth-of-type(2) {
top: 71vh;
left: 60vw;
}
.star-large:nth-of-type(2) {
top: 5vh;
left: 58vw;
}
.star-small:nth-of-type(3) {
top: 1vh;
left: 96vw;
}
.star-medium:nth-of-type(3) {
top: 70vh;
left: 76vw;
}
.star-large:nth-of-type(3) {
top: 22vh;
left: 80vw;
}
.star-small:nth-of-type(4) {
top: 52vh;
left: 47vw;
}
.star-medium:nth-of-type(4) {
top: 20vh;
left: 28vw;
}
.star-large:nth-of-type(4) {
top: 5vh;
left: 69vw;
}
.star-small:nth-of-type(5) {
top: 100vh;
left: 14vw;
}
.star-medium:nth-of-type(5) {
top: 89vh;
left: 22vw;
}
.star-large:nth-of-type(5) {
top: 83vh;
left: 9vw;
}
.star-small:nth-of-type(6) {
top: 64vh;
left: 35vw;
}
.star-medium:nth-of-type(6) {
top: 6vh;
left: 4vw;
}
.star-large:nth-of-type(6) {
top: 7vh;
left: 77vw;
}
.star-small:nth-of-type(7) {
top: 47vh;
left: 24vw;
}
.star-medium:nth-of-type(7) {
top: 5vh;
left: 81vw;
}
.star-large:nth-of-type(7) {
top: 22vh;
left: 87vw;
}
.star-small:nth-of-type(8) {
top: 64vh;
left: 37vw;
}
.star-medium:nth-of-type(8) {
top: 45vh;
left: 22vw;
}
.star-large:nth-of-type(8) {
top: 63vh;
left: 57vw;
}
.star-small:nth-of-type(9) {
top: 11vh;
left: 90vw;
}
.star-medium:nth-of-type(9) {
top: 97vh;
left: 97vw;
}
.star-large:nth-of-type(9) {
top: 77vh;
left: 77vw;
}
.star-small:nth-of-type(10) {
top: 82vh;
left: 58vw;
}
.star-medium:nth-of-type(10) {
top: 32vh;
left: 75vw;
}
.star-large:nth-of-type(10) {
top: 53vh;
left: 100vw;
}
.star-small:nth-of-type(11) {
top: 100vh;
left: 28vw;
}
.star-medium:nth-of-type(11) {
top: 42vh;
left: 83vw;
}
.star-large:nth-of-type(11) {
top: 48vh;
left: 17vw;
}
.star-small:nth-of-type(12) {
top: 65vh;
left: 5vw;
}
.star-medium:nth-of-type(12) {
top: 67vh;
left: 65vw;
}
.star-large:nth-of-type(12) {
top: 31vh;
left: 27vw;
}
.star-small:nth-of-type(13) {
top: 49vh;
left: 16vw;
}
.star-medium:nth-of-type(13) {
top: 93vh;
left: 34vw;
}
.star-large:nth-of-type(13) {
top: 1vh;
left: 85vw;
}
.star-small:nth-of-type(14) {
top: 1vh;
left: 13vw;
}
.star-medium:nth-of-type(14) {
top: 73vh;
left: 73vw;
}
.star-large:nth-of-type(14) {
top: 86vh;
left: 91vw;
}
.star-small:nth-of-type(15) {
top: 35vh;
left: 84vw;
}
.star-medium:nth-of-type(15) {
top: 33vh;
left: 3vw;
}
.star-large:nth-of-type(15) {
top: 89vh;
left: 29vw;
}
.star-small:nth-of-type(16) {
top: 22vh;
left: 7vw;
}
.star-medium:nth-of-type(16) {
top: 3vh;
left: 92vw;
}
.star-large:nth-of-type(16) {
top: 58vh;
left: 32vw;
}
.star-small:nth-of-type(17) {
top: 67vh;
left: 23vw;
}
.star-medium:nth-of-type(17) {
top: 15vh;
left: 43vw;
}
.star-large:nth-of-type(17) {
top: 86vh;
left: 95vw;
}
.star-small:nth-of-type(18) {
top: 48vh;
left: 94vw;
}
.star-medium:nth-of-type(18) {
top: 62vh;
left: 85vw;
}
.star-large:nth-of-type(18) {
top: 8vh;
left: 5vw;
}
.star-small:nth-of-type(19) {
top: 17vh;
left: 39vw;
}
.star-medium:nth-of-type(19) {
top: 92vh;
left: 19vw;
}
.star-large:nth-of-type(19) {
top: 10vh;
left: 14vw;
}
.star-small:nth-of-type(20) {
top: 6vh;
left: 24vw;
}
.star-medium:nth-of-type(20) {
top: 33vh;
left: 78vw;
}
.star-large:nth-of-type(20) {
top: 4vh;
left: 49vw;
}
.star-small:nth-of-type(21) {
top: 89vh;
left: 70vw;
}
.star-medium:nth-of-type(21) {
top: 3vh;
left: 98vw;
}
.star-large:nth-of-type(21) {
top: 74vh;
left: 16vw;
}
.star-small:nth-of-type(22) {
top: 89vh;
left: 21vw;
}
.star-medium:nth-of-type(22) {
top: 87vh;
left: 14vw;
}
.star-large:nth-of-type(22) {
top: 2vh;
left: 17vw;
}
.star-small:nth-of-type(23) {
top: 32vh;
left: 71vw;
}
.star-medium:nth-of-type(23) {
top: 88vh;
left: 64vw;
}
.star-large:nth-of-type(23) {
top: 73vh;
left: 61vw;
}
.star-small:nth-of-type(24) {
top: 76vh;
left: 64vw;
}
.star-medium:nth-of-type(24) {
top: 55vh;
left: 71vw;
}
.star-large:nth-of-type(24) {
top: 73vh;
left: 24vw;
}
.star-small:nth-of-type(25) {
top: 99vh;
left: 42vw;
}
.star-medium:nth-of-type(25) {
top: 10vh;
left: 71vw;
}
.star-large:nth-of-type(25) {
top: 73vh;
left: 50vw;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment