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 20 {
.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;
}
13.86% {
background-position: -24px 0px;
}
33.93% {
background-position: 0px 0px;
}
97.43% {
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.8s;
}
@keyframes star-medium {
0% {
background-position: 0px 0px;
}
11.43% {
background-position: -24px 0px;
}
21.51% {
background-position: 0px 0px;
}
23.11% {
background-position: -24px 0px;
}
26.69% {
background-position: 0px 0px;
}
66.22% {
background-position: -24px 0px;
}
82.48% {
background-position: 0px 0px;
}
}
.star-large {
background-image: url("https://i.imgur.com/fM1biij.png");
animation: star-large 9s infinite step-end;
animation-delay: -8.4s;
}
.star-large-offset {
animation-delay: -7.4s;
}
@keyframes star-large {
0% {
background-position: 0px 0px;
}
6.21% {
background-position: -24px 0px;
}
23.58% {
background-position: 0px 0px;
}
24.06% {
background-position: -24px 0px;
}
52.02% {
background-position: -48px 0px;
}
91.01% {
background-position: -24px 0px;
}
92.43% {
background-position: 0px 0px;
}
}
.star-small:nth-of-type(1) {
top: 68vh;
left: 94vw;
}
.star-medium:nth-of-type(1) {
top: 39vh;
left: 48vw;
}
.star-large:nth-of-type(1) {
top: 49vh;
left: 58vw;
}
.star-small:nth-of-type(2) {
top: 73vh;
left: 24vw;
}
.star-medium:nth-of-type(2) {
top: 5vh;
left: 19vw;
}
.star-large:nth-of-type(2) {
top: 8vh;
left: 39vw;
}
.star-small:nth-of-type(3) {
top: 29vh;
left: 7vw;
}
.star-medium:nth-of-type(3) {
top: 78vh;
left: 93vw;
}
.star-large:nth-of-type(3) {
top: 64vh;
left: 55vw;
}
.star-small:nth-of-type(4) {
top: 49vh;
left: 26vw;
}
.star-medium:nth-of-type(4) {
top: 82vh;
left: 82vw;
}
.star-large:nth-of-type(4) {
top: 84vh;
left: 59vw;
}
.star-small:nth-of-type(5) {
top: 56vh;
left: 88vw;
}
.star-medium:nth-of-type(5) {
top: 23vh;
left: 11vw;
}
.star-large:nth-of-type(5) {
top: 5vh;
left: 27vw;
}
.star-small:nth-of-type(6) {
top: 65vh;
left: 7vw;
}
.star-medium:nth-of-type(6) {
top: 35vh;
left: 66vw;
}
.star-large:nth-of-type(6) {
top: 9vh;
left: 89vw;
}
.star-small:nth-of-type(7) {
top: 55vh;
left: 79vw;
}
.star-medium:nth-of-type(7) {
top: 16vh;
left: 16vw;
}
.star-large:nth-of-type(7) {
top: 94vh;
left: 48vw;
}
.star-small:nth-of-type(8) {
top: 27vh;
left: 89vw;
}
.star-medium:nth-of-type(8) {
top: 74vh;
left: 1vw;
}
.star-large:nth-of-type(8) {
top: 68vh;
left: 49vw;
}
.star-small:nth-of-type(9) {
top: 83vh;
left: 73vw;
}
.star-medium:nth-of-type(9) {
top: 58vh;
left: 80vw;
}
.star-large:nth-of-type(9) {
top: 34vh;
left: 68vw;
}
.star-small:nth-of-type(10) {
top: 36vh;
left: 47vw;
}
.star-medium:nth-of-type(10) {
top: 14vh;
left: 14vw;
}
.star-large:nth-of-type(10) {
top: 33vh;
left: 38vw;
}
.star-small:nth-of-type(11) {
top: 69vh;
left: 24vw;
}
.star-medium:nth-of-type(11) {
top: 6vh;
left: 7vw;
}
.star-large:nth-of-type(11) {
top: 74vh;
left: 83vw;
}
.star-small:nth-of-type(12) {
top: 78vh;
left: 64vw;
}
.star-medium:nth-of-type(12) {
top: 83vh;
left: 28vw;
}
.star-large:nth-of-type(12) {
top: 46vh;
left: 4vw;
}
.star-small:nth-of-type(13) {
top: 1vh;
left: 44vw;
}
.star-medium:nth-of-type(13) {
top: 69vh;
left: 54vw;
}
.star-large:nth-of-type(13) {
top: 7vh;
left: 27vw;
}
.star-small:nth-of-type(14) {
top: 46vh;
left: 35vw;
}
.star-medium:nth-of-type(14) {
top: 41vh;
left: 99vw;
}
.star-large:nth-of-type(14) {
top: 39vh;
left: 36vw;
}
.star-small:nth-of-type(15) {
top: 94vh;
left: 98vw;
}
.star-medium:nth-of-type(15) {
top: 89vh;
left: 41vw;
}
.star-large:nth-of-type(15) {
top: 71vh;
left: 28vw;
}
.star-small:nth-of-type(16) {
top: 18vh;
left: 45vw;
}
.star-medium:nth-of-type(16) {
top: 65vh;
left: 76vw;
}
.star-large:nth-of-type(16) {
top: 29vh;
left: 90vw;
}
.star-small:nth-of-type(17) {
top: 63vh;
left: 94vw;
}
.star-medium:nth-of-type(17) {
top: 58vh;
left: 46vw;
}
.star-large:nth-of-type(17) {
top: 28vh;
left: 78vw;
}
.star-small:nth-of-type(18) {
top: 42vh;
left: 51vw;
}
.star-medium:nth-of-type(18) {
top: 44vh;
left: 4vw;
}
.star-large:nth-of-type(18) {
top: 54vh;
left: 62vw;
}
.star-small:nth-of-type(19) {
top: 98vh;
left: 1vw;
}
.star-medium:nth-of-type(19) {
top: 98vh;
left: 42vw;
}
.star-large:nth-of-type(19) {
top: 36vh;
left: 85vw;
}
.star-small:nth-of-type(20) {
top: 39vh;
left: 96vw;
}
.star-medium:nth-of-type(20) {
top: 60vh;
left: 28vw;
}
.star-large:nth-of-type(20) {
top: 12vh;
left: 44vw;
}
{
"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