<!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>