<div class="mic">
  <i class="mic-icon"></i>
  <div class="mic-shadow"></div>
</div>
body {
  overflow: hidden;
    background: rgb(59, 14, 104);
    background: radial-gradient(circle, rgba(59, 14, 104, 1) 0%, rgba(26, 8, 78, 1) 100%);
}
.mic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        z-index: 2;
        box-shadow: 0 0 20px 20px #1c084f;
    }

    &::before {
        width: 400px;
        height: 400px;
        background-color: #1a084e;
    }

    &::after {
        width: 250px;
        height: 250px;
        background-color: #2f1e5f;
        animation: circle-size 0.8s linear infinite alternate;
    }

    &-icon {
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(5);
        display: block;
        width: 16px;
        height: 12px;
        border-bottom-left-radius: 120px;
        border-bottom-right-radius: 120px;
        border: 2px solid;
        border-top: 0;
        margin-top: 20px;
        z-index: 3;

        &::before,
        &::after {
            content: "";
            display: block;
            box-sizing: border-box;
            position: absolute;
        }

        &::before {
            width: 2px;
            height: 5px;
            top: calc(100% + 1px);
            left: 50%;
          transform: translate(-50%, 0);
            background-color: #fff;
        }

        &::after {
            border: 2px solid;
            width: 8px;
            height: 18px;
            left: 50%;
            top: -10px;
            border-radius: 4px;
          transform: translate(-50%, 0);
        }
    }

    &-shadow {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        //transform: translate(-50%, -50%);
        border-radius: 100%;
        z-index: 1;
        box-shadow: 10px -55px 30px 15px #823ca6, 24px -10px 47px 10px #aab3d2, -21px -25px 97px 10px #5acee3, 51px 5px 17px 10px #1b7d8f, 3px 2px 77px 10px #f30bf5;
        animation: shadow-rotate 1.5s linear infinite;
        transform-origin: center;
    }
}

@keyframes circle-size {
    from {
        width: 250px;
        height: 250px;
    }
    to {
        width: 300px;
        height: 300px;
    }
}


@keyframes shadow-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
View Compiled
//
 
// ¯\_(ツ)_/¯

//

/*
Inspired by Alexis Doreau
AI Input - Listening & Thinking:
https://dribbble.com/shots/12006456-AI-Input-Listening-Thinking
*/

External CSS

  1. https://codepen.io/abdullahturkmen/pen/ZEypWjK.css

External JavaScript

  1. https://codepen.io/abdullahturkmen/pen/ZEypWjK.js