title
A prototype
body{ background:black; } main{ display:flex; justify-content:center; align-items:center; position:relative; width:1500px; height:1500px; border: solid 1px white; } div{ top:30px; left:30px; height:10vh; position:absolute; width:210px; height:297px; }
let d = document let b = d.body let m = d.querySelector('main') let number = 10 let colors = ["cyan","red","green", "purple", 'tomato', 'gold'] for (var i = 0; i < number; i++) { let r1 = Math.floor(Math.random() * 20) - 10 let r2 = Math.floor(Math.random() * 10) let r3 = Math.floor(Math.random() * colors.length) let r4 = Math.floor(Math.random() * 10) let r5 = Math.floor(Math.random() * 10) let item = d.createElement("div") item.style.rotate = r1 + "deg" item.style.margin = r2 + "px " + r5 + "px " item.style.background = colors[r3] item.title = r1 m.appendChild(item) }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code