Glitch mode

[funwithtriangles]

Amazing stuff. Truly is! I Had to have some fun with it though and started to play around with silly JS in the console. Here's something to get you started, post your own ones too!

setInterval(() => document.querySelectorAll('div').forEach(item => {
item.style = 'transform: translate('+Math.random() * 10+'px,'+Math.random() * 10 +'px)'}), 1)

[cyanharlow]

Awesome!! I wish 'transform' could add transformations rather than overriding. 'margin' is also a decent positioning option:

setInterval(() => document.querySelectorAll('div').forEach(item => { item.style = 'margin-left: ' + (Math.random() 20 - 10) + 'px; margin-top: ' + (Math.random() 20 - 10) + 'px;'}), 1)

[funwithtriangles]

@cyanharlow Derp mode!

[dvdrtrgn]

var divlist = $$('.container div');
var time = 33;

var isShown = (e) => !e.hidden;
var hasKids = (e) => !e.children.length;
var togThis = (e) => e.hidden = !e.hidden;
var makeArray = (e) => [].slice.call(e);

var isLeafy = (e) => !makeArray(e.children).filter(isShown).length;
var getLeaves = () => divlist.filter(isShown).filter(isLeafy).filter(togThis);

function getBits() {
  var x, arr = [];
  do arr.push(...(x = getLeaves()));
  while (x.length);
  return arr;
}

getBits().reverse().forEach(function (e, i) {
  setTimeout(() => togThis(e), i * time);
  console.log('done');
});

[cyanharlow]

@dvdrtrgn omg that is SO COOL. It's like the closest thing to seeing it drawn! Also - your JS syntax makes me feel like a JS failure. Very well done.