| #main | |
| - for (var x = 0; x < 800; x++) | |
| svg(viewBox="0 0 10 10") | |
| polygon(class="▲" fill="rgba(255,255,255,0)" points="5 0, 10 10, 0 10") |
| //Set up variables | |
| const main = document.getElementById("main"); | |
| var col = getComputedStyle(document.documentElement).getPropertyValue('--cols') | |
| var allShapes = document.getElementsByClassName("▲"); | |
| var activeShapes = document.getElementsByClassName("▲ is--active"); | |
| //Set click event on container to refresh content | |
| main.addEventListener('click', randomize); | |
| function generateShapes(){ | |
| //Loop through all shapes | |
| for(i = 0; i < allShapes.length; i++) { | |
| //Set random number | |
| var d = Math.random(); | |
| //Set current shape | |
| var shape = allShapes[i]; | |
| //Activate shapes with increasing likelihood according to the iteration shape (i), dom order (col), and random number (d) | |
| if( i < (col*4) && d < .1 || | |
| i > (col*4) && i < (col*8) && d < .2 || | |
| i > (col*8) && i < (col*12) && d < .3 || | |
| i > (col*12) && i < (col*16) && d < .4 || | |
| i > (col*16) && i < (col*20) && d < .5 || | |
| i > (col*20) && i < (col*24) && d < .6 || | |
| i > (col*24) && i < (col*28) && d < .7 || | |
| i > (col*28) && i < (col*32) && d < .8 || | |
| i > (col*32) && i < (col*36) && d < .9 || | |
| i > (col*36) && i < (col*40) && d < 1 ) { | |
| shape.classList += " is--active"; | |
| } | |
| //If activated, set opacity to the random number | |
| if(shape.classList.contains("is--active")) { | |
| shape.setAttribute("fill","rgba(255,255,255," + d + ")"); | |
| } | |
| } | |
| } | |
| //Reset all active shaps to default fill and classes | |
| function clearAll() { | |
| while (activeShapes[0]) { | |
| activeShapes[0].setAttribute("fill","rgba(255,255,255,0)"); | |
| activeShapes[0].classList.remove('is--active') | |
| } | |
| } | |
| //Clear all active shapes and randomize | |
| function randomize() { | |
| clearAll(); | |
| generateShapes(); | |
| } | |
| //Generate shapes on initial page load | |
| generateShapes(); |
| :root { | |
| --cols: 20; | |
| --rows: 40; | |
| } | |
| body{ | |
| display: flex; | |
| align-items: flex-end; | |
| justify-content: center; | |
| height: 100vh; | |
| background-color: #111; | |
| margin: 0; | |
| } | |
| #main { | |
| display: grid; | |
| cursor: pointer; | |
| grid-gap: 3px 0; | |
| grid-template-columns: repeat(var(--cols), 15px); | |
| grid-template-rows: repeat(var(--rows), 15px); | |
| } | |
| svg { | |
| &:nth-child(even) { | |
| transform: rotate(180deg); | |
| } | |
| .▲{ | |
| transform-origin: center; | |
| &.is--active { | |
| animation: 500ms fadeIn cubic-bezier(0.2, 0.9, 0.3, 1.2); | |
| } | |
| } | |
| } | |
| @keyframes fadeIn { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(20px)scale(0); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0px)scale(1); | |
| } | |
| } |
▲ Click to regenerate the triangles! ▼
This generative art demo populates a 20 x 40 css grid with triangles. The chances of a triangle being displayed increase with the number of rows. If a triangle is displayed, it's given a random transparency. Upon click, the triangles get regenerated and a css animation introduces them to the dom.
A Pen by Rob DiMarzo on CodePen.