Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS Square Symbol Art
<div class="squares"></div>
<footer>Complete <a href="">Square Symbol</a> Collection</footer>
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)} 80% 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);
.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;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.