Animated letters based on CSS clip-path polygon style

Animated letters based on CSS clip-path polygon style

by Alex Tade

HTML

<div class="container">
  <div class="polygons">
    <div data-char="a" class="animchar"></div> 
  </div>  
    <a href="https://alextade.me/apps/css_shape2/animated-letters/index.html">alex tade</a><br>
    <a href="https://alextade.me/apps/css_shape2/minimal-bold/index.html">Here</a> you could see the pure CSS alphabet "MINIMAL BOLD".
</div>

CSS

.container{
      text-align: center;
}
a{
    color: #23a6d5;
    text-decoration: none;
}
.animchar{
    margin: 100px auto;
    background-color: #47a2da;
    width: 100px;
    height: 100px;
    transition: all 500ms linear;
}

/* alextade minimal bold letters */
.animchar[data-char="a"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 60% 100%, 60% 30%, 40% 30%, 40% 50%, 60% 50%, 60% 80%, 40% 80%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="b"]{
    clip-path:polygon(0% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 60% 20%, 40% 20%, 40% 40%, 60% 40%, 60% 60%, 40% 60%, 40% 80%, 60% 80%, 60% 100%, 0% 100%);
}
.animchar[data-char="c"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 40%, 100% 40%, 40% 40%, 40% 40%, 40% 40%, 40% 60%, 40% 60%, 100% 60%, 100% 60%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="d"]{
    clip-path:polygon(0% 0%, 0% 0%, 80% 0%, 80% 0%, 100% 20%, 100% 20%, 100% 81%, 80% 100%, 60% 100%, 60% 50%, 40% 30%, 40% 70%, 60% 50%, 60% 100%, 60% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="e"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 60%, 40% 60%, 40% 80%, 100% 80%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="f"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 20%, 40% 40%, 80% 40%, 80% 60%, 40% 60%, 40% 60%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="g"]{
    clip-path:polygon(0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 20%, 100% 20%, 40% 20%, 40% 80%, 80% 80%, 80% 60%, 60% 60%, 60% 40%, 100% 40%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="h"]{
    clip-path:polygon(0% 0%, 0% 0%, 40% 0%, 40% 0%, 40% 40%, 40% 40%, 60% 40%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 60%, 40% 60%, 40% 100%, 40% 100%, 0% 100%, 0% 100%);
}
.animchar[data-char="i"]{
    clip-path:polygon(30% 0%, 30% 0%, 30% 0%, 30% 0%,...

JavaScript

/* alextade.me | All Rights Reserved. */

$(document).ready(function() {
    
    var alphaBet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    var i = 0;
    var $animChar = $('.animchar');

    setInterval(function(){ 
        if(i < alphaBet.length){
            i += 1;
        } else {
            i = 0;
        }
        $animChar.attr('data-char', alphaBet[i]);
    }, 1000);

});