#nickname
    svg(viewBox='0 0 1000 500')
        g(fill='none' fill-rule='evenodd' stroke='#FAFF70' stroke-width='5')
            path(d='M309 -194c143 0 222 64 222 157c0 185 -244 177 -285 354c-78 23 -108 77 -120 113c-29 89 5 208 75 260l11 -16c-63 -46 -94 -157 -68 -238c12 -36 39 -78 99 -98c-2 11 -2 22 -2 34c0 180 150 293 327 293c60 0 110 -18 144 -49c30 -28 46 -67 46 -108 c0 -74 -55 -151 -155 -151c-25 0 -47 5 -64 15c-16 -12 -65 -42 -121 -56c86 -80 240 -137 240 -276c0 -150 -126 -256 -324 -256c-81 0 -148 21 -193 60c-39 33 -60 79 -60 130c0 85 64 173 172 173c43 0 78 -12 101 -34c21 -19 32 -46 32 -76c0 -55 -39 -113 -96 -113 c-31 0 -56 10 -73 28c-29 29 -28 70 -27 72l19 -1s-1 -35 22 -58c13 -14 33 -21 59 -21c46 0 77 48 77 93c0 24 -9 47 -26 62c-19 19 -50 29 -88 29c-96 0 -153 -78 -153 -154c0 -45 19 -86 54 -116c41 -36 78 -52 155 -52zM525 383c-30 27 -46 69 -46 111 c0 57 30 102 84 102c43 0 67 -25 67 -73c0 -47 -28 -99 -73 -139c13 -6 28 -10 46 -10c88 0 136 69 136 134c0 36 -14 69 -40 94c-31 28 -76 44 -131 44c-219 0 -280 -240 -167 -317c58 13 108 43 124 54zM562 578c-41 0 -63 -35 -63 -84c0 -37 13 -76 41 -99 c39 28 70 81 70 128c0 37 -16 55 -48 55z')
    svg(viewBox='0 0 1000 500')
        g(fill='none' fill-rule='evenodd' stroke='#FAFF70' stroke-width='5')
            path(d='M172 -70h-121l77 432h-61l2 18h62l16 86c21 133 62 182 147 182c45 0 83 -33 83 -106c0 -56 -22 -110 -43 -162h38l-2 -18h-44c-18 -45 -34 -88 -34 -129h-18c0 45 15 87 33 129h-58c-25 -133 -53 -293 -77 -432zM301 630c-7 -26 -26 -124 -49 -250h62 c22 50 44 102 44 162c0 48 -25 88 -57 88z')
    svg(viewBox='0 0 1000 500')
        g(fill='none' fill-rule='evenodd' stroke='#FAFF70' stroke-width='5')
            path(d='M248 389l-69 -378c20 2 37 12 50 28l15 -12c-19 -23 -45 -36 -75 -36c-62 0 -96 35 -96 83c0 31 9 67 16 109l33 179h-42l2 18h43c77 0 123 9 123 9zM135 536c0 40 32 73 72 73s73 -33 73 -73s-33 -72 -73 -72s-72 32 -72 72z')
    svg(viewBox='0 0 1000 500')
        g(fill='none' fill-rule='evenodd' stroke='#FAFF70' stroke-width='5')
            path(d='M205 -9c-80 0 -139 62 -139 146c0 166 159 260 239 260v-21c-67 0 -126 -120 -126 -243c0 -81 35 -105 80 -105c69 0 167 95 167 199c0 53 -26 87 -67 87c-24 0 -45 -8 -57 -23c-28 -27 -26 -78 -26 -78h-20c0 2 0 58 31 91c17 18 44 29 72 29c53 0 86 -41 86 -106 c0 -94 -93 -236 -240 -236z')
    svg(viewBox='0 0 1000 500')
        g(fill='none' fill-rule='evenodd' stroke='#FAFF70' stroke-width='5')
            path(d='M413 98l17 -6c-8 -34 -42 -101 -134 -101c-118 0 -133 28 -192 28c-29 0 -45 -19 -45 -19h-18l262 354c-95 4 -107 16 -154 16c-40 0 -64 -25 -64 -61c0 -23 13 -43 13 -43l-18 -7s-16 20 -16 52c0 45 32 78 83 78c64 0 83 -19 196 -19c76 1 98 8 102 9l-265 -353 c50 -15 63 -16 116 -17c91 0 117 89 117 89z')
    svg(viewBox='0 0 1000 500')
        g(fill='none' fill-rule='evenodd' stroke='#FAFF70' stroke-width='5')
            path(d='M82 133c0 63 35 150 39 236c-26 0 -50 -28 -50 -28l-15 12s19 36 84 36c60 0 91 -29 91 -82c0 -68 -38 -163 -38 -222c0 -32 13 -48 40 -48c44 0 89 65 116 166l33 177c77 0 121 9 121 9l-63 -354c-24 -135 -112 -219 -253 -219c-85 0 -132 31 -132 82c0 35 22 71 87 71 c57 0 71 -21 113 -27l-2 -18c-42 4 -57 26 -111 26c-46 0 -66 -23 -66 -50c0 -44 47 -64 101 -64c84 0 115 57 128 125l25 138c-24 -53 -60 -92 -127 -92c-78 0 -121 47 -121 126z')
View Compiled
@use postcss-nested;

* {
    box-sizing: border-box;
}

body {
    background: #260F26;
    overflow: hidden;
}

#nickname {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%) translateY(-50%) rotateX(180deg);
    
    svg {
        height: 15vw;
        width: 15vw;
        
        &:nth-of-type(1) { transform: translateX(200%); }
        &:nth-of-type(2) { transform: translateX(165%); }
        &:nth-of-type(3) { transform: translateX(95%); }
        &:nth-of-type(4) { transform: translateX(15%); }
        &:nth-of-type(5) { transform: translateX(-47%); }
        &:nth-of-type(6) { transform: translateX(-108%); }
    }
}
View Compiled
anime({
    targets: '#nickname path',
    strokeDashoffset: [anime.setDashoffset, 0],
    fill: [
        { value: '#260F26' },
        { value: '#FFFFFF' }
    ],
    easing: 'easeInOutSine',
    duration: 3000,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
});
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js