<footer>
<input type="number" value="1234">
<button>Generate</button>
</footer>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
font-family: system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #1d1934;
}
svg {
width: 75vmin;
height: 75vmin;
}
footer {
position: absolute;
bottom: 0;
right: 0;
padding: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
height: 2rem;
background: #7257fa;
color: #fff;
border: 0;
width: 6rem;
cursor: pointer;
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
input {
width: 6rem;
height: 2rem;
border-right: 0;
padding-left: 0.5rem;
border: 1px solid #e6e5eb;
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
color: inherit;
}
import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
import gsap from "https://cdn.skypack.dev/gsap@3.7.0";
const width = 200;
const height = 200;
const svg = SVG().viewbox(0, 0, width, height).addTo("body");
const cols = 10;
const rows = 10;
const colSize = width / cols;
const rowSize = height / rows;
let seed = 1234;
function mulberry32(a) {
return function () {
a |= 0;
a = (a + 0x6d2b79f5) | 0;
var t = Math.imul(a ^ (a >>> 15), 1 | a);
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};
}
function generate() {
const random = mulberry32(seed);
for (let x = 0; x < width; x += colSize) {
for (let y = 0; y < height; y += rowSize) {
const number = ~~(random() * 10);
svg
.text(number)
.cx(x + colSize / 2)
.cy(y + rowSize / 2);
}
}
}
document.querySelector("input").addEventListener("change", (e) => {
seed = Number(e.target.value);
});
document.querySelector("button").addEventListener("click", () => {
svg.clear();
generate();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.