Skip to content

Commit c42d4eb

Browse files
HoverbearHoverbear
committed
Magic css randomization
1 parent 77877aa commit c42d4eb

File tree

7 files changed

+128
-28
lines changed

7 files changed

+128
-28
lines changed

‎sass/_logo.scss

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11

2+
23
svg.logo {
4+
// Set in logo.html in the `svg.logo[viewBox]` attribute
5+
--viewbox-width: 2160px;
6+
--viewbox-height: 1444px;
7+
--star-max-radius: 5px;
38
width: 100vw;
49
height: 100vh;
510

@@ -10,7 +15,25 @@ svg.logo {
1015
animation-fill-mode: both;
1116
animation-duration: 1.5s;
1217

13-
#bear {
18+
g#starfield circle {
19+
// Reference for how to calculate a random x/y from some index goes to https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd
20+
// Specifically these numbers are derived from https://codepen.io/hypersphere/pen/poVwwxK
21+
// They seem to work well, and seem to be 'magic', so I left them.
22+
23+
// x
24+
@include primeRandom("x");
25+
cx: calc(var(--x) * var(--viewbox-width));
26+
27+
// y
28+
@include primeRandom("y");
29+
cy: calc(var(--y) * var(--viewbox-height));
30+
31+
// r
32+
@include primeRandom("r");
33+
r: calc(var(--r) * var(--star-max-radius));
34+
}
35+
36+
g#bear {
1437
fill: none;
1538
stroke: white;
1639

‎sass/_magic.scss

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Reference for this idea of using a primeCounter to know which 'index' a star is goes to https://medium.com/hypersphere-codes/counting-in-css-unlock-magic-of-css-variables-8e610881097a
2+
@function isPrime($n, $primesList) {
3+
@each $prime in $primesList {
4+
@if ($n % $prime == 0) {
5+
@return false;
6+
}
7+
}
8+
@return true;
9+
}
10+
11+
@mixin primeCounter($selector, $upperBound: 2000) {
12+
13+
$curr: 2;
14+
$primesList: [];
15+
16+
@while $curr <= $upperBound {
17+
@if isPrime($curr, $primesList) {
18+
$primesList: append($primesList, $curr);
19+
}
20+
$curr: $curr + 1;
21+
}
22+
:root {
23+
@each $prime in $primesList {
24+
--prime#{$prime}: 1;
25+
}
26+
}
27+
$mult: "1";
28+
@each $prime in $primesList {
29+
$mult: $mult " * var(--prime#{$prime})";
30+
$val: $prime;
31+
@while $val <= $upperBound {
32+
#{$selector}:nth-child(#{$val}n) {
33+
--prime#{$prime}: #{$val};
34+
}
35+
$val: $val * $prime;
36+
}
37+
}
38+
39+
#{$selector} {
40+
--index: calc(#{$mult});
41+
}
42+
}
43+
44+
@include primeCounter("*", 600);
45+
46+
47+
// Reference for using a integer lock to make a 'floor' function goes to https://medium.com/hypersphere-codes/randomness-in-css-b55a0845c8dd
48+
@property --x-floor {
49+
syntax: '<integer>';
50+
initial-value: 0;
51+
inherits: true
52+
}
53+
54+
@property --y-floor {
55+
syntax: '<integer>';
56+
initial-value: 0;
57+
inherits: true
58+
}
59+
60+
@property --r-floor {
61+
syntax: '<integer>';
62+
initial-value: 0;
63+
inherits: true
64+
}
65+
66+
@mixin primeRandom($property) {
67+
--#{$property}-floating: calc(var(--random-seed) * var(--index) * #{random()} + var(--index) * var(--index) * #{random()} * var(--random-seed) * var(--random-seed));
68+
--#{$property}-floor: calc(var(--#{$property}-floating) - 0.5);
69+
--#{$property}: calc(var(--#{$property}-floating) - var(--#{$property}-floor));
70+
}

‎sass/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
:root {
2+
--random-seed: #{random()};
23
--color-background: rgb(22, 22, 22);
34
--color-code-background: rgb(28, 28, 28);
45
--color-muted: rgb(42, 42, 42);

‎sass/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import 'reset';
22

3+
@import 'magic';
34
@import 'logo';
45
@import 'syntax-highlighting';
56
@import 'text';

‎templates/partials/head.html

+7
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,11 @@
8585
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
8686
integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
8787
onload="renderMathInElement(document.body);"></script>
88+
89+
<!-- Set a random CSS seed on load (there is a fallback statically built in) -->
90+
<script defer async>
91+
(function set_random_seed() {
92+
document.documentElement.style.setProperty("--random-seed", Math.random());
93+
})()
94+
</script>
8895
</head>

‎templates/partials/header.html

+23-24
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,31 @@ <h1 id="main-title">
1717
{%- if title == config.title -%}
1818
<script defer async>
1919
(function internationalize_hoverbear() {
20-
const data = {{ load_data(path = "static/internationalized-hoverbear.json") | json_encode | safe
21-
}};
22-
const langs = Object.keys(data);
23-
let current_lang = "english";
24-
let num_languages = langs.length;
25-
window.setInterval(function () {
26-
let new_lang;
27-
// Guard against same result.
28-
do {
29-
new_lang = langs[Math.floor(Math.random() * num_languages)];
30-
} while (current_lang == new_lang);
20+
const data = {{ load_data(path = "static/internationalized-hoverbear.json") | json_encode | safe }};
21+
const langs = Object.keys(data);
22+
let current_lang = "english";
23+
let num_languages = langs.length;
24+
window.setInterval(function () {
25+
let new_lang;
26+
// Guard against same result.
27+
do {
28+
new_lang = langs[Math.floor(Math.random() * num_languages)];
29+
} while (current_lang == new_lang);
3130

32-
let new_display = data[new_lang].display;
33-
let main_title = document.getElementById("main-link");
31+
let new_display = data[new_lang].display;
32+
let main_title = document.getElementById("main-link");
3433

35-
// Reflow
36-
let parent = main_title.parentElement;
37-
let old_animation = parent.style.animation;
38-
parent.style.opacity = 0;
39-
parent.style.animation = 'none';
40-
parent.offsetHeight;
41-
parent.style.animation = old_animation;
42-
43-
main_title.innerText = `${new_display}`;
44-
}, 5000);
45-
}) ()
34+
// Reflow
35+
let parent = main_title.parentElement;
36+
let old_animation = parent.style.animation;
37+
parent.style.opacity = 0;
38+
parent.style.animation = 'none';
39+
parent.offsetHeight;
40+
parent.style.animation = old_animation;
41+
42+
main_title.innerText = `${new_display}`;
43+
}, 5000);
44+
}) ()
4645
</script>
4746
{%- endif %}
4847

‎templates/partials/logo.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<g id="starfield">
33
{%- for idx in range(end=600) -%}
44
<circle
5-
cx="{{ get_random(start=0, end=2160) }}"
6-
cy="{{ get_random(start=0, end=1444) }}"
7-
r="{{ get_random(start=10, end=100) | float / 30 }}"
5+
6+
87
/>
98
{%- endfor -%}
109
</g>

0 commit comments

Comments
 (0)