<div class="container">
        <div class="pencil">
            <div class="mid-shadow"></div>

            <div class="clip">
                <div class="base">
                    <div class="base-strip">
                        <div class="clip-outer">
                            <div class="clip-inner">
                                <p>RONNIE</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="end">
                <div class="end-shadow"></div>
            </div>
            <div class="mid">
                <div class="color-effect"></div>
                <div class="shine-1"></div>
                <div class="shine-2"></div>
                <div class="shine-3"></div>
                <div class="shine-4"></div>

                <div class="shine-5"></div>
            </div>
            <div class="grip">
                <div class="layer-1 layer"></div>
                <div class="layer-2 layer"></div>
                <div class="layer-3 layer"></div>
                <div class="layer-4 layer"></div>
                <div class="layer-5 layer"></div>
                <div class="layer-6 layer"></div>
                <div class="layer-7 layer"></div>
                <div class="layer-8 layer"></div>

                <div class="layer-9 layer"></div>
                <div class="layer-10 layer"></div>
                <div class="layer-11 layer"></div>
                <div class="layer-12 layer"></div>
            </div>
            <div class="nib">
                <div class="part-1 part"></div>
                <div class="part-2 part"></div>
                <div class="part-3 part"></div>
                <div class="part-4 part"></div>
                <div class="part-5 part"></div>
                <div class="lead">
                    <div class="lead-shadow"></div>
                    <div class="break"></div>
                </div>
            </div>
        </div>
    </div>

body {
    height: 98vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    z-index: 0;
}

:root {
    --speed: 20s;
}

body * {
    position: absolute;
    content: "";
    z-index: 1;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 500px;
    width: 900px;
    /* background-color: #f3bcbc42; */
    z-index: 1;
}

.mid {
    height: 30px;
    width: 300px;
    background-color: #414141;
    position: absolute;
    top: 0;
    left: -230px;
    z-index: 1;
    overflow: hidden;
}

.mid::after {
    content: "";
    width: 10px;
    height: inherit;
    background-color: #d1d1d1;
    top: 0;
    right: 0;
    position: absolute;
}

.mid::before {
    content: "";
    z-index: 2;
    width: 10px;
    height: 3px;
    background-color: #4b4b4b;
    top: 25px;
    right: 0;
    position: absolute;
    filter: blur(1px);
}

.color-effect {
    height: 30px;
    width: 290px;
    background: linear-gradient(to bottom, #ecffeffb, transparent);
    filter: blur(3px);
}

.shine-1 {
    height: 2px;
    width: 320px;
    background-color: rgb(41, 41, 41);
    filter: blur(1.4px);
    top: 2px;
    z-index: 1;
}

.shine-2 {
    height: 2px;
    width: inherit;
    background-color: #ffffff;
    top: 3px;
    filter: blur(12px);
    z-index: 1;
}

.shine-3 {
    height: 9px;
    width: inherit;
    background-color: #e9e9e9;
    top: 12px;
    filter: blur(2px);
    z-index: 1;
}

.shine-4 {
    height: 2px;
    width: inherit;
    background-color: #d1d1d1;
    bottom: 4px;
    filter: blur(2px);
    z-index: 1;
}

.shine-5 {
    height: 3px;
    width: 320px;
    background-color: #000;
    filter: blur(3px);
    bottom: 2px;
    z-index: 1;
}

.grip {
    height: 32px;
    width: 90px;
    background-color: #414141;
    background: linear-gradient( to bottom, #8f8f8f, #6e6e6e, #585858, #4d4d4d, #3b3b3b);
    top: -1;
    left: 70px;
    border-radius: 4px 4px 4px 4px;
    /* overflow: hidden; */
}

.layer {
    height: 36px;
    width: 5px;
    background: linear-gradient(to right, #474747 50%, #999999);
    border-radius: 40%;
    top: -2px;
    filter: blur(0.7px);
}

.layer-1 {
    left: 0px;
}

.layer-2 {
    left: 8px;
}

.layer-3 {
    left: 16px;
}

.layer-4 {
    left: 24px;
}

.layer-5 {
    left: 32px;
}

.layer-6 {
    left: 40px;
}

.layer-7 {
    left: 48px;
}

.layer-8 {
    left: 56px;
}

.layer-9 {
    left: 64px;
}

.layer-10 {
    left: 72px;
}

.layer-11 {
    left: 80px;
}

.nib {
    background-color: transparent;
    height: 30px;
    width: 60px;
    left: 160px;
}

.part {
    border-left: 1px solid #c0c0c0;
}

.part-1 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    height: 30px;
    width: 8px;
    border: none;
}

.part-2 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
    height: 30px;
    width: 10px;
    left: 8px;
}

.part-3 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
    height: 20px;
    width: 15px;
    left: 19px;
    top: 5px;
}

.part-4 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%);
    height: 12px;
    width: 15px;
    left: 34px;
    top: 9px;
}

.part-5 {
    background: linear-gradient( to bottom, #fff 1%, #3f3f3f 10%, #fff 60%, #2e2e2e 80%, #fff 100%);
    height: 4px;
    width: 6px;
    left: 49px;
    top: 13px;
}

.lead {
    height: 2px;
    width: 0px;
    /* width: 200px; */
    background: linear-gradient(to bottom, #bdbdbd, #333333);
    left: 55px;
    top: 14px;
    /* top: 30px; */
    animation: enlargeLead var(--speed) linear forwards;
    transform-origin: left;
}

@keyframes enlargeLead {
    99.9% {
        top: 14px;
        width: 200px;
    }
    100% {
        top: 30px;
        width: 200px;
    }
}

.break {
    height: 2px;
    width: 2px;
    background-color: rgb(253, 253, 253);
    left: 70px;
    /* top: -10px; */
    animation: break var(--speed) linear forwards;
    opacity: 0;
}

@keyframes break {
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.end {
    height: 20px;
    width: 30px;
    background: linear-gradient( to bottom, rgb(218, 218, 218) 1%, #5f5f5f 10%, rgb(131, 131, 131) 60%, #1f1f1f 80%, rgb(231, 231, 231) 100%);
    top: 5px;
    left: -260px;
    border-radius: 5px 0 0 5px;
    animation: moveEnd 0.5s linear forwards 40;
}

@keyframes moveEnd {
    50% {
        left: -245px;
    }
    100% {
        left: -260px;
    }
}

.clip {
    height: 34px;
    width: 40px;
    top: -2px;
    /* background-color: rgba(255, 0, 0, 0.123); */
    left: -220px;
    z-index: 2;
}

.base {
    height: 34px;
    width: 40px;
    background: linear-gradient( to bottom, rgb(46, 46, 46) 1%, #242424 30%, rgb(61, 61, 61) 60%, #3b3b3b 80%, rgb(17, 17, 17) 100%);
    /* background: rgba(39, 39, 39, 0.774); */
    /* top: 2px; */
    border-radius: 2px;
}

.base-strip {
    height: 34px;
    width: 30%;
    background: linear-gradient(rgba(0, 0, 0, 0.452), rgba(36, 36, 36, 0.719)), linear-gradient( to bottom, #fff 1%, #3f3f3f 20%, #fff 50%, #2e2e2e 80%, #fff 90%);
    left: 13px;
}

.clip-outer {
    height: 14px;
    width: 110px;
    background: #818181;
    background: linear-gradient( to right, #3030309d 2%, #474747a1 50%, #474747a1 50%, #30303083 98%), linear-gradient( #fff 1%, #3f3f3f 20%, rgb(112, 112, 112) 50%, #2e2e2e 80%, #fff 98%);
    left: -8px;
    top: 10px;
    border-radius: 3px;
}

.clip-inner {
    height: 10px;
    width: 106px;
    background: linear-gradient( to right, #1818189d 2%, #1a1919a1 50%, #1a1a1aa1 50%, #0e0e0e83 98%), linear-gradient( #fff 1%, #6e6e6e 20%, rgb(252, 252, 252) 50%, #919191 80%, rgb(49, 49, 49) 98%);
    top: 2px;
    left: 2px;
    filter: blur(0.5px);
}

p {
    margin: 0;
    font-size: 12px;
    top: -3px;
    left: 27px;
    font-family: sans-serif;
    color: #ffffff7e;
}

.mid-shadow {
    height: 5px;
    width: 447px;
    background-color: #8d8d8d;
    top: 33px;
    left: -230px;
    filter: blur(6px);
}

.end-shadow {
    height: 3px;
    width: 25px;
    background-color: #505050;
    top: 22px;
    left: 0px;
    filter: blur(6px);
    animation: moveEndShadow 0.5s linear forwards 40;
    transform-origin: right;
    transform: scaleX(1);
}

@keyframes moveEndShadow {
    50% {
        transform: scaleX(0.6);
    }
    100% {
        transform: scaleX(1);
    }
}

.lead-shadow {
    height: 1px;
    width: 0px;
    background-color: #9e9e9e;
    top: 14px;
    filter: blur(3px);
    animation: moveLeadShadow var(--speed) linear forwards;
}

@keyframes moveLeadShadow {
    99.9% {
        width: 200px;
        top: 14px;
    }
    100% {
        width: 200px;
        top: 7px;
    }
}

// TWITTER - @_ronnieTech