title
A prototype
Number of item:
body{ margin-top:100px; font-size:24px; } main div{ height: 1em; width:1em; display:inline-block; position:relative; background:purple; border-radius:100%; } p span{ border:1px solid gray; font-family:monospace; padding:1px; }
function spray(){ let sprayArray = [] let res = 1 let nbr = 20 let amp = 40 for(let i=-nbr/2; i <= nbr/2; i++){ let s = i*i //let s = i*i / amp * nbr * i //let s = i*i / amp * (i*i) //let s = i*i / amp * i s = Math.round(s) sprayArray.push(s) } return sprayArray } function arc(nbrItem, max, min) { const result = [] const step = Math.PI / (nbrItem - 1) for (let i = 0; i < nbrItem; i++) { const num = max - Math.sin(i * step) * (max - min) result.push(Math.round(num * 10) / 10) } return result; } let l = 0 arc(5,75,1).forEach(s => { let d = document.createElement("div") d.style.bottom = s+"px" document.querySelector('main').appendChild(d) let e = document.createElement("span") e.innerText = s document.querySelector('p').appendChild(e) l++ }) document.querySelector('i').innerHTML = l
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