JS Square Symbol Art

index.html

<div class="squares"></div>
<footer>Complete <a href="">Square Symbol</a> Collection</footer>

js-square-symbol-art.markdown

JS Square Symbol Art

Check out this Complete Square Symbol Collection

A Pen by Ion Emil Negoita on CodePen.

License.

script.js

var squareSymbols = "◧◨◩◪◫";
var container = document.querySelector(".squares");
var rows = 20,
  cols = 30;
var cells = [];
for (var row = 0; row < rows; row++) {
  console.log(row);
  var rowEl = document.createElement("div");
  rowEl.className += "row";
  container.appendChild(rowEl);
  for (var col = 0; col < cols; col++) {
    var colEl = document.createElement("span");
    colEl.className = "col square";
    colEl.style.animationDelay = col / 10 + "s";
    colEl.style.color = randomColor();
    colEl.setAttribute(
      "square-symbol",
 squareSymbols[Math.round(Math.random() * 100) % squareSymbols.length]
    );
    
    container.appendChild(colEl);
    cells.push(colEl);
  }
}

function randomColor(){
  return `hsl(${Math.round(Math.random()*360)} 50% 50%)`;
}

function animationStep() {
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.color = randomColor();
    cells[i].setAttribute(
      "square-symbol",
      squareSymbols[Math.round(Math.random() * 100) % squareSymbols.length]
    );
  }

  setTimeout(function () {
    window.requestAnimationFrame(animationStep);
  }, 200);
}

window.requestAnimationFrame(animationStep);

style.css

.squares{
  font-size:30px;
  line-height: 19.5px;
  letter-spacing:-6px;
}

.col.square:after{
  content:attr(square-symbol);
/*   animation-name:zoom-in-out;   */
  animation-duration:3s;
  animation-iteration-count: infinite;
  animation-delay:inherit;
}



@keyframes zoom-in-out {
  0%   {font-size:1em;}
  50%  {font-size:1.5em;}
  100% {font-size:1em;}
}