mirror of
https://github.com/Aroy-Art/Aroy-Art-Site.git
synced 2024-10-18 22:09:36 +00:00
77 lines
2.3 KiB
HTML
77 lines
2.3 KiB
HTML
<!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>
|