Aroy/Aroy-Art-Site
1
0
Fork 0
mirror of https://github.com/Aroy-Art/Aroy-Art-Site.git synced 2024-12-26 07:54:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Add: small tool to randomly generated clip-paths

Browse source
This commit is contained in:
Aroy-Art 2024-07-23 22:22:08 +02:00
parent 5affd7b8c1
commit 191b29442b
Signed by: Aroy
GPG key ID: DB9689E9391DD156
1 changed files with 77 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
static/tools/randomly-generated-clip-path/index.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#output {
flex-grow: 2;
flex-shrink: 0;
height: 80vh;
width: 65vw;
background: #333;
clip-path: var(--path);
}
#gen-btn {
width: 30vw;
}
#output-field {
width: 30vw;
height: 80vh;
}
.container {
display: flex;
flex-direction: row;
gap: 8px;
}
</style>
</head>
<body>
<h1>Randomly Generated Clip Path</h1>
<div class="container">
<div>
<button id="gen-btn">Generate</button>
<textarea id="output-field"></textarea>
</div>
<div id="output"></div>
</div>
<script>
const target = document.querySelector("#output");
const button = document.querySelector("#gen-btn");
const outputField = document.querySelector("#output-field");
const generatePoints = () => {
const number = Math.floor(Math.random() * 60);
const points = [];
let x = 0;
let y = 0;
for (let i = 0; i < number; i++) {
// Alternate between x and y
if (i % 2) {
x = Math.floor(Math.random() * 100);
} else {
y = Math.floor(Math.random() * 100);
}
points.push(`${x}% ${y}%`);
}
target.style.setProperty("--path", `polygon(${points.join(",")})`);
outputField.value = `clip-path: polygon(${points.join(",")});`
console.log(`clip-path: polygon(${points});`);
};
// Run on page load & when button is clicked
generatePoints();
button.addEventListener("click", generatePoints);
</script>
</body>
</html>