Letter drawing in SCSS for pixel logos
How do I make an letter drawing in scss for pixel logos?
Draw out letters or shapes in SCSS arrays to describe pixels to display in HTML.Apply cool animations to the separate pixels. What is a letter drawing in scss for pixel logos? How do you make a letter drawing in scss for pixel logos? This script and codes were developed by Stove on 07 July 2022, Thursday.
Letter drawing in SCSS for pixel logos Previews
Letter drawing in SCSS for pixel logos - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Letter drawing in SCSS for pixel logos</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="animated-logo"> <div class="letter s"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div> <div class="letter t"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div> <div class="letter e"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div> <div class="letter v"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div> <div class="letter e"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>
Letter drawing in SCSS for pixel logos - Script Codes CSS Codes
.animated-logo { position: relative;
}
.letter .pixel { background-color: #6f6f6f; width: 20px; height: 20px; position: absolute; -webkit-transform: scale(0.02); transform: scale(0.02); opacity: 0; -webkit-backface-visibility: hidden;
}
.letter .pixel.enter { opacity: 1; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.letter:nth-child(1) .pixel:nth-child(1) { top: 0px; left: 20px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 1570.5ms; animation-delay: 1570.5ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 15ms; transition-delay: 15ms;
}
.letter:nth-child(1) .pixel:nth-child(2) { top: 0px; left: 40px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 1047ms; animation-delay: 1047ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 22.5ms; transition-delay: 22.5ms;
}
.letter:nth-child(1) .pixel:nth-child(3) { top: 20px; left: 0px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 6282ms; animation-delay: 6282ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 15ms; transition-delay: 15ms;
}
.letter:nth-child(1) .pixel:nth-child(4) { top: 40px; left: 0px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 9423ms; animation-delay: 9423ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 22.5ms; transition-delay: 22.5ms;
}
.letter:nth-child(1) .pixel:nth-child(5) { top: 60px; left: 20px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 6282ms; animation-delay: 6282ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 60ms; transition-delay: 60ms;
}
.letter:nth-child(1) .pixel:nth-child(6) { top: 80px; left: 40px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 5235ms; animation-delay: 5235ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 112.5ms; transition-delay: 112.5ms;
}
.letter:nth-child(1) .pixel:nth-child(7) { top: 100px; left: 40px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 6282ms; animation-delay: 6282ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 135ms; transition-delay: 135ms;
}
.letter:nth-child(1) .pixel:nth-child(8) { top: 120px; left: 0px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 21987ms; animation-delay: 21987ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 52.5ms; transition-delay: 52.5ms;
}
.letter:nth-child(1) .pixel:nth-child(9) { top: 120px; left: 20px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 10993.5ms; animation-delay: 10993.5ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 105ms; transition-delay: 105ms;
}
.letter:nth-child(2) .pixel:nth-child(1) { top: 0px; left: 100px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 6282ms; animation-delay: 6282ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 15ms; transition-delay: 15ms;
}
.letter:nth-child(2) .pixel:nth-child(2) { top: 0px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 3141ms; animation-delay: 3141ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 30ms; transition-delay: 30ms;
}
.letter:nth-child(2) .pixel:nth-child(3) { top: 0px; left: 140px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 2094ms; animation-delay: 2094ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 45ms; transition-delay: 45ms;
}
.letter:nth-child(2) .pixel:nth-child(4) { top: 20px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 6282ms; animation-delay: 6282ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 60ms; transition-delay: 60ms;
}
.letter:nth-child(2) .pixel:nth-child(5) { top: 40px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 9423ms; animation-delay: 9423ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 90ms; transition-delay: 90ms;
}
.letter:nth-child(2) .pixel:nth-child(6) { top: 60px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 12564ms; animation-delay: 12564ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 120ms; transition-delay: 120ms;
}
.letter:nth-child(2) .pixel:nth-child(7) { top: 80px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 15705ms; animation-delay: 15705ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 150ms; transition-delay: 150ms;
}
.letter:nth-child(2) .pixel:nth-child(8) { top: 100px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 18846ms; animation-delay: 18846ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 180ms; transition-delay: 180ms;
}
.letter:nth-child(2) .pixel:nth-child(9) { top: 120px; left: 120px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 21987ms; animation-delay: 21987ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 210ms; transition-delay: 210ms;
}
.letter:nth-child(3) .pixel:nth-child(1) { top: 0px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 9423ms; animation-delay: 9423ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 22.5ms; transition-delay: 22.5ms;
}
.letter:nth-child(3) .pixel:nth-child(2) { top: 0px; left: 220px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 4711.5ms; animation-delay: 4711.5ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 45ms; transition-delay: 45ms;
}
.letter:nth-child(3) .pixel:nth-child(3) { top: 0px; left: 240px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 3141ms; animation-delay: 3141ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 67.5ms; transition-delay: 67.5ms;
}
.letter:nth-child(3) .pixel:nth-child(4) { top: 20px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 18846ms; animation-delay: 18846ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 45ms; transition-delay: 45ms;
}
.letter:nth-child(3) .pixel:nth-child(5) { top: 40px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 28269ms; animation-delay: 28269ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 67.5ms; transition-delay: 67.5ms;
}
.letter:nth-child(3) .pixel:nth-child(6) { top: 60px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 37692ms; animation-delay: 37692ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 90ms; transition-delay: 90ms;
}
.letter:nth-child(3) .pixel:nth-child(7) { top: 60px; left: 220px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 18846ms; animation-delay: 18846ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 180ms; transition-delay: 180ms;
}
.letter:nth-child(3) .pixel:nth-child(8) { top: 60px; left: 240px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 12564ms; animation-delay: 12564ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 270ms; transition-delay: 270ms;
}
.letter:nth-child(3) .pixel:nth-child(9) { top: 80px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 47115ms; animation-delay: 47115ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 112.5ms; transition-delay: 112.5ms;
}
.letter:nth-child(3) .pixel:nth-child(10) { top: 100px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 56538ms; animation-delay: 56538ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 135ms; transition-delay: 135ms;
}
.letter:nth-child(3) .pixel:nth-child(11) { top: 120px; left: 200px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 65961ms; animation-delay: 65961ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 157.5ms; transition-delay: 157.5ms;
}
.letter:nth-child(3) .pixel:nth-child(12) { top: 120px; left: 220px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 32980.5ms; animation-delay: 32980.5ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 315ms; transition-delay: 315ms;
}
.letter:nth-child(3) .pixel:nth-child(13) { top: 120px; left: 240px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 21987ms; animation-delay: 21987ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 472.5ms; transition-delay: 472.5ms;
}
.letter:nth-child(4) .pixel:nth-child(1) { top: 0px; left: 300px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 12564ms; animation-delay: 12564ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 30ms; transition-delay: 30ms;
}
.letter:nth-child(4) .pixel:nth-child(2) { top: 0px; left: 380px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 2512.8ms; animation-delay: 2512.8ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 150ms; transition-delay: 150ms;
}
.letter:nth-child(4) .pixel:nth-child(3) { top: 20px; left: 300px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 25128ms; animation-delay: 25128ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 60ms; transition-delay: 60ms;
}
.letter:nth-child(4) .pixel:nth-child(4) { top: 20px; left: 380px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 5025.6ms; animation-delay: 5025.6ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 300ms; transition-delay: 300ms;
}
.letter:nth-child(4) .pixel:nth-child(5) { top: 40px; left: 300px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 37692ms; animation-delay: 37692ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 90ms; transition-delay: 90ms;
}
.letter:nth-child(4) .pixel:nth-child(6) { top: 40px; left: 380px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 7538.4ms; animation-delay: 7538.4ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 450ms; transition-delay: 450ms;
}
.letter:nth-child(4) .pixel:nth-child(7) { top: 60px; left: 320px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 25128ms; animation-delay: 25128ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 240ms; transition-delay: 240ms;
}
.letter:nth-child(4) .pixel:nth-child(8) { top: 60px; left: 360px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 12564ms; animation-delay: 12564ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 480ms; transition-delay: 480ms;
}
.letter:nth-child(4) .pixel:nth-child(9) { top: 80px; left: 320px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 31410ms; animation-delay: 31410ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 300ms; transition-delay: 300ms;
}
.letter:nth-child(4) .pixel:nth-child(10) { top: 80px; left: 360px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 15705ms; animation-delay: 15705ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 600ms; transition-delay: 600ms;
}
.letter:nth-child(4) .pixel:nth-child(11) { top: 100px; left: 340px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 25128ms; animation-delay: 25128ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 540ms; transition-delay: 540ms;
}
.letter:nth-child(4) .pixel:nth-child(12) { top: 120px; left: 340px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 29316ms; animation-delay: 29316ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 630ms; transition-delay: 630ms;
}
.letter:nth-child(5) .pixel:nth-child(1) { top: 0px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 15705ms; animation-delay: 15705ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 37.5ms; transition-delay: 37.5ms;
}
.letter:nth-child(5) .pixel:nth-child(2) { top: 0px; left: 460px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 7852.5ms; animation-delay: 7852.5ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 75ms; transition-delay: 75ms;
}
.letter:nth-child(5) .pixel:nth-child(3) { top: 0px; left: 480px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 5235ms; animation-delay: 5235ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 112.5ms; transition-delay: 112.5ms;
}
.letter:nth-child(5) .pixel:nth-child(4) { top: 20px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 31410ms; animation-delay: 31410ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 75ms; transition-delay: 75ms;
}
.letter:nth-child(5) .pixel:nth-child(5) { top: 40px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 47115ms; animation-delay: 47115ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 112.5ms; transition-delay: 112.5ms;
}
.letter:nth-child(5) .pixel:nth-child(6) { top: 60px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 62820ms; animation-delay: 62820ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 150ms; transition-delay: 150ms;
}
.letter:nth-child(5) .pixel:nth-child(7) { top: 60px; left: 460px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 31410ms; animation-delay: 31410ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 300ms; transition-delay: 300ms;
}
.letter:nth-child(5) .pixel:nth-child(8) { top: 60px; left: 480px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 20940ms; animation-delay: 20940ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 450ms; transition-delay: 450ms;
}
.letter:nth-child(5) .pixel:nth-child(9) { top: 80px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 78525ms; animation-delay: 78525ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 187.5ms; transition-delay: 187.5ms;
}
.letter:nth-child(5) .pixel:nth-child(10) { top: 100px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 94230ms; animation-delay: 94230ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 225ms; transition-delay: 225ms;
}
.letter:nth-child(5) .pixel:nth-child(11) { top: 120px; left: 440px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 109935ms; animation-delay: 109935ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 262.5ms; transition-delay: 262.5ms;
}
.letter:nth-child(5) .pixel:nth-child(12) { top: 120px; left: 460px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 54967.5ms; animation-delay: 54967.5ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 525ms; transition-delay: 525ms;
}
.letter:nth-child(5) .pixel:nth-child(13) { top: 120px; left: 480px; -webkit-animation: flash 3141ms ease-in-out infinite alternate; animation: flash 3141ms ease-in-out infinite alternate; -webkit-animation-delay: 36645ms; animation-delay: 36645ms; -webkit-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transition-delay: 787.5ms; transition-delay: 787.5ms;
}
@-webkit-keyframes flash { 0% { background-color: #6f6f6f; } 100% { background-color: #a2a2a2; }
}
Letter drawing in SCSS for pixel logos - Script Codes JS Codes
var pixels = document.getElementsByClassName("pixel");
function enter(pixel){ setTimeout(function(){ pixel.className += " enter go"; });
}
function exit(pixel){ setTimeout(function(){ pixel.className = "pixel"; });
}
for(var i = 0; i < pixels.length; i+=1){ enter(pixels[i]);
}
setInterval(function(){ for(var i = 0; i < pixels.length; i+=1){ exit(pixels[i]); } setTimeout(function(){ for(var i = 0; i < pixels.length; i+=1){ enter(pixels[i]); } }, 2500)
},5000);
| Developer | Stove |
| Username | stevn |
| Uploaded | July 07, 2022 |
| Rating | 3 |
| Size | 3,963 Kb |
| Views | 38,456 |
Do you need developer help for Letter drawing in SCSS for pixel logos?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Stove (stevn) Script Codes
| Name | Size |
| Favourite interaction and animation | 2,448 Kb |
| Google burger arrow | 2,547 Kb |
| Tippy-tappy-typer | 2,699 Kb |
| FRAPS counter | 2,137 Kb |
| Android Nougat update animation | 2,790 Kb |
| Sinusoidal goodness | 3,321 Kb |
| A Pen by Stove | 2,460 Kb |
| Colour interpolation | 2,121 Kb |
| Pure JS word cloud. | 3,163 Kb |
| A better loading spinner | 3,265 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| To Do List with Delete | Mattlbrody | 2,068 Kb |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| Cofee and sugar | Tripack | 2,094 Kb |
| Starfield old school style | Bolloxim | 5,214 Kb |
| Simple checkbox style | Vncnz | 2,628 Kb |
| Atom | Bhlaird | 1,932 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Donald Trump - The New Yorker | Agbales | 2,502 Kb |
| Gradients | Karpovsystems | 2,394 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!