Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <p class="intro">Built as a part of ThoughtSpot hackathon. <!-- Thanks <a href="http://thisweidesign.com/" target="_blank">Wei Zheng</a> for the awesome animations. -->
</p>
<div class="badges">
    <div class="animated_badge animated_badge_1 hide">
        <div class="animated_stars">
            <div class="animated_star plus"></div>
            <div class="animated_star donut yellow"></div>
            <div class="animated_star plus"></div>
            <div class="animated_star donut"></div>
            <div class="animated_star plus yellow"></div>
        </div>
        <svg class="animated_badge_svg" width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="badge_ribbon left"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="#A5ACB9" />
            <path class="badge_ribbon left"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="#A5ACB9" />
            <path class="badge_ribbon left"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="url(#paint0_linear)" />
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="57" width="44" height="43">
                <path
                    d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                    fill="#999999" />
                <path
                    d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                    fill="url(#paint1_linear)" />
            </mask>
            <g class="badge_ribbon left" mask="url(#mask0)">
                <rect x="30" y="60" width="15" height="40" fill="#EAEDF2" />
            </g>
            <circle class="badge_circle" cx="37.5" cy="37.5" r="33.5" fill="#C0C6CF" stroke="#777E8B" stroke-width="8" />
            <path class="badge_number" d="M36.272 45H38.772V30.7H36.572C36.332 32.28 35.292 32.82 32.832 32.88V34.78H36.272V45Z" fill="white" />
            <defs>
                <linearGradient id="paint0_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#616468" />
                    <stop offset="1" stop-color="#A5ACB9" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint1_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
            </defs>
        </svg>
    </div>


    <div class="animated_badge animated_badge_2 hide">
        <div class="animated_stars">
            <div class="animated_star plus"></div>
            <div class="animated_star donut yellow"></div>
            <div class="animated_star plus"></div>
            <div class="animated_star donut"></div>
            <div class="animated_star plus yellow"></div>
        </div>
        <svg class="animated_badge_svg" width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="badge_ribbon"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="#71A1F4" />
            <path class="badge_ribbon"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="#71A1F4" />
            <path class="badge_ribbon"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="url(#paint0_linear)" />
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="57" width="44" height="43">
                <path
                    d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                    fill="#71A1F4" />
                <path
                    d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                    fill="url(#paint1_linear)" />
            </mask>
            <g class="badge_ribbon" mask="url(#mask0)">
                <rect x="30" y="60" width="15" height="40" fill="#ABC7F9" />
            </g>
            <circle class="badge_circle" cx="37.5" cy="37.5" r="33.5" fill="#71A1F4" stroke="#CEDCF5" stroke-width="8" />
            <path class="badge_number"
                d="M41.1783 45V42.86H35.0183C37.2183 40.82 41.1783 38.44 41.1783 34.8C41.1783 32.3 39.3983 30.42 36.4383 30.42C33.3583 30.42 31.6983 32.54 31.6983 35.14C31.6983 35.18 31.7183 35.22 31.7183 35.28H34.0983C34.1183 33.76 34.8383 32.62 36.4383 32.62C37.8183 32.62 38.6383 33.52 38.6383 34.86C38.6383 36.22 37.8583 37.38 36.0583 39.04C34.3783 40.62 31.8183 42.92 31.8183 42.92V45H41.1783Z"
                fill="white" />
            <defs>
                <linearGradient id="paint0_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint1_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
            </defs>
        </svg>
    </div>



    <div class="animated_badge animated_badge_3 hide">
        <div class="animated_stars">
            <div class="animated_star plus"></div>
            <div class="animated_star donut yellow"></div>
            <div class="animated_star plus"></div>
            <div class="animated_star donut"></div>
            <div class="animated_star plus yellow"></div>
        </div>
        <svg class="animated_badge_svg" width="75" height="100" viewBox="0 0 75 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="badge_ribbon"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="#71A1F4" />
            <path class="badge_ribbon"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="#71A1F4" />
            <path class="badge_ribbon"
                d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                fill="url(#paint0_linear)" />
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="16" y="57" width="44" height="43">
                <path
                    d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                    fill="#71A1F4" />
                <path
                    d="M16 86.7506V62C16 59.2386 18.2386 57 21 57H55C57.7614 57 60 59.2386 60 62V86.8112C60 88.7561 58.8722 90.5246 57.1087 91.3448L40.5616 99.0411C39.2517 99.6504 37.7424 99.6633 36.4223 99.0766L18.9693 91.3197C17.1637 90.5172 16 88.7266 16 86.7506Z"
                    fill="url(#paint1_linear)" />
            </mask>
            <g class="badge_ribbon" mask="url(#mask0)">
                <rect x="23" y="60" width="8" height="40" fill="#ABC7F9" />
                <rect x="43" y="60" width="8" height="40" fill="#ABC7F9" />
            </g>
            <circle cx="37.5" cy="37.5" r="33.5" fill="#C0C6CF" stroke="#C0C6CF" stroke-width="8" />
            <circle class="badge_circle" cx="37.5" cy="37.5" r="29.5" fill="#C0C6CF" stroke="#EAEDF2" stroke-width="4" />
            <path class="badge_number"
                d="M32.72 40.88C32.9 43.36 34.62 45.26 37.64 45.26C40.72 45.26 42.66 43.42 42.66 40.78C42.66 39.02 41.72 37.68 40.02 37.12C41.16 36.52 41.94 35.5 41.94 34.16C41.94 31.94 40.28 30.42 37.7 30.42C35.12 30.42 33.48 32.04 33.42 34.26H35.72C35.84 33.14 36.6 32.5 37.64 32.5C38.64 32.5 39.46 33.06 39.48 34.24C39.48 35.76 38.24 36.24 36.66 36.24V38.24H37.22C38.86 38.24 40.14 38.96 40.14 40.7C40.14 42.06 39.2 43.16 37.7 43.16C36.14 43.16 35.32 42.24 35.16 40.88H32.72Z"
                fill="white" />
            <defs>
                <linearGradient id="paint0_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint1_linear" x1="38" y1="57" x2="38" y2="89.5" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
            </defs>
        </svg>
    </div>



    <div class="animated_badge animated_badge_4 hide">
        <div class="animated_stars">
            <div class="animated_star plus"></div>
            <div class="animated_star donut yellow"></div>
            <div class="animated_star plus"></div>
            <div class="animated_star donut"></div>
            <div class="animated_star plus yellow"></div>
        </div>
        <svg class="animated_badge_svg" width="75" height="98" viewBox="0 0 75 98" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="badge_ribbon right"
                d="M18 96.2589L18 60C18 59.4477 18.4477 59 19 59H57.3843C57.9366 59 58.3843 59.4477 58.3843 60V96.2334C58.3843 96.9469 57.6586 97.4308 56.9999 97.1566L39.0269 89.6734C38.7859 89.573 38.5153 89.5709 38.2728 89.6674L19.3697 97.188C18.7131 97.4493 18 96.9656 18 96.2589Z"
                fill="#FCC838" />
            <path class="badge_ribbon right"
                d="M18 96.2589L18 60C18 59.4477 18.4477 59 19 59H57.3843C57.9366 59 58.3843 59.4477 58.3843 60V96.2334C58.3843 96.9469 57.6586 97.4308 56.9999 97.1566L39.0269 89.6734C38.7859 89.573 38.5153 89.5709 38.2728 89.6674L19.3697 97.188C18.7131 97.4493 18 96.9656 18 96.2589Z"
                fill="url(#paint0_linear)" />
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="17" y="58" width="42" height="38">
                <path
                    d="M18 90.3625V64C18 61.2386 20.2386 59 23 59H53.3843C56.1457 59 58.3843 61.2386 58.3843 64V90.2351C58.3843 93.8024 54.7557 96.2222 51.4624 94.851L40.5301 90.2992C39.3254 89.7977 37.9723 89.7869 36.7599 90.2693L24.8484 95.0083C21.5653 96.3145 18 93.8959 18 90.3625Z"
                    fill="#71A1F4" />
                <path
                    d="M18 90.3625V64C18 61.2386 20.2386 59 23 59H53.3843C56.1457 59 58.3843 61.2386 58.3843 64V90.2351C58.3843 93.8024 54.7557 96.2222 51.4624 94.851L40.5301 90.2992C39.3254 89.7977 37.9723 89.7869 36.7599 90.2693L24.8484 95.0083C21.5653 96.3145 18 93.8959 18 90.3625Z"
                    fill="url(#paint1_linear)" />
                <path
                    d="M18 90.3625V64C18 61.2386 20.2386 59 23 59H53.3843C56.1457 59 58.3843 61.2386 58.3843 64V90.2351C58.3843 93.8024 54.7557 96.2222 51.4624 94.851L40.5301 90.2992C39.3254 89.7977 37.9723 89.7869 36.7599 90.2693L24.8484 95.0083C21.5653 96.3145 18 93.8959 18 90.3625Z"
                    stroke="#8C62F5" />
            </mask>
            <g class="badge_ribbon right" mask="url(#mask0)">
                <rect width="12.9378" height="46.9542" transform="matrix(0.99996 -0.008926 0.0199657 0.999801 32.0576 65.3011)"
                    fill="#FCD977" />
            </g>
            <circle cx="37.5" cy="37.5" r="33.5" fill="#DBDFE7" stroke="#8C62F5" stroke-width="8" />
            <circle class="badge_circle" cx="37.5" cy="37.5" r="29.5" fill="#8C62F5" stroke="#D1C0FB" stroke-width="4" />
            <path class="badge_number"
                d="M43.16 39.98H41.28V30.7H39.04C39 30.76 37.64 32.78 36.82 33.96L32.54 40.12V42.08H39.02V45H41.28V42.08H43.16V39.98ZM39.06 33.9C39.04 34.58 39.02 35.68 39.02 36.46V39.98H35.02C35.02 39.98 35.84 38.76 36.52 37.78L37.46 36.4C38.1 35.46 38.86 34.16 39.02 33.9H39.06Z"
                fill="#E3D9FC" />
            <defs>
                <linearGradient id="paint0_linear" x1="38.1921" y1="59" x2="38.1921" y2="97.1461"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#DFAC28" />
                    <stop offset="1" stop-color="#FCC838" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint1_linear" x1="38.1921" y1="59" x2="38.1921" y2="97.1461"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
            </defs>
        </svg>
    </div>



    <div class="animated_badge animated_badge_5 hide">
        <div class="animated_stars">
            <div class="animated_star plus"></div>
            <div class="animated_star donut yellow"></div>
            <div class="animated_star plus"></div>
            <div class="animated_star donut"></div>
            <div class="animated_star plus yellow"></div>
        </div>
        <svg class="animated_badge_svg" width="84" height="99" viewBox="0 0 84 99" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="badge_ribbon"
                d="M0.761166 82.9447L17.3041 50.8886C17.5574 50.3979 18.1606 50.2053 18.6513 50.4586L43.875 63.4756C44.3658 63.7289 44.5583 64.332 44.305 64.8228L27.7788 96.8466C27.4294 97.5236 26.4817 97.5769 26.0586 96.9435L17.8756 84.694C17.6881 84.4133 17.3716 84.2461 17.0341 84.2495L1.65981 84.4033C0.906487 84.4108 0.415676 83.6142 0.761166 82.9447Z"
                fill="#F04152" />
            <path class="badge_ribbon"
                d="M0.761166 82.9447L17.3041 50.8886C17.5574 50.3979 18.1606 50.2053 18.6513 50.4586L43.875 63.4756C44.3658 63.7289 44.5583 64.332 44.305 64.8228L27.7788 96.8466C27.4294 97.5236 26.4817 97.5769 26.0586 96.9435L17.8756 84.694C17.6881 84.4133 17.3716 84.2461 17.0341 84.2495L1.65981 84.4033C0.906487 84.4108 0.415676 83.6142 0.761166 82.9447Z"
                fill="url(#paint0_linear)" />
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="1" y="50" width="44" height="46">
                <path
                    d="M3.80623 77.0441L15.4697 54.4432C16.7361 51.9893 19.752 51.0266 22.2059 52.293L40.3204 61.6412C42.7743 62.9076 43.737 65.9235 42.4707 68.3774L30.8904 90.817C29.1437 94.2016 24.4052 94.4685 22.2895 91.3014L19.0777 86.4935C18.1402 85.09 16.5578 84.2543 14.8701 84.2712L8.29946 84.3369C4.53283 84.3745 2.07879 80.3915 3.80623 77.0441Z"
                    fill="#71A1F4" />
                <path
                    d="M3.80623 77.0441L15.4697 54.4432C16.7361 51.9893 19.752 51.0266 22.2059 52.293L40.3204 61.6412C42.7743 62.9076 43.737 65.9235 42.4707 68.3774L30.8904 90.817C29.1437 94.2016 24.4052 94.4685 22.2895 91.3014L19.0777 86.4935C18.1402 85.09 16.5578 84.2543 14.8701 84.2712L8.29946 84.3369C4.53283 84.3745 2.07879 80.3915 3.80623 77.0441Z"
                    fill="url(#paint1_linear)" />
            </mask>
            <g class="badge_ribbon" mask="url(#mask0)">
                <rect width="9.73445" height="46.9502" transform="matrix(0.894023 0.448022 -0.445194 0.895434 24.272 60.4499)"
                    fill="#FCD977" />
            </g>
            <path class="badge_ribbon right"
                d="M56.5365 97.1074L38.5 65.8673C38.2239 65.389 38.3877 64.7774 38.866 64.5013L63.4476 50.3091C63.9259 50.0329 64.5375 50.1968 64.8137 50.6751L82.832 81.8838C83.2129 82.5435 82.7458 83.3698 81.9841 83.3836L67.2552 83.6511C66.9177 83.6572 66.6061 83.8332 66.4266 84.1191L58.2494 97.1392C57.8487 97.7772 56.9132 97.7598 56.5365 97.1074Z"
                fill="#F04152" />
            <path class="badge_ribbon right"
                d="M56.5365 97.1074L38.5 65.8673C38.2239 65.389 38.3877 64.7774 38.866 64.5013L63.4476 50.3091C63.9259 50.0329 64.5375 50.1968 64.8137 50.6751L82.832 81.8838C83.2129 82.5435 82.7458 83.3698 81.9841 83.3836L67.2552 83.6511C66.9177 83.6572 66.6061 83.8332 66.4266 84.1191L58.2494 97.1392C57.8487 97.7772 56.9132 97.7598 56.5365 97.1074Z"
                fill="url(#paint2_linear)" />
            <mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="38" y="49" width="45" height="47">
                <path
                    d="M53.2165 91.357L40.5 69.3314C39.1193 66.9399 39.9387 63.882 42.3301 62.5013L59.9835 52.3091C62.375 50.9283 65.4329 51.7477 66.8137 54.1392L79.4394 76.0076C81.3438 79.3061 79.0082 83.4376 75.2001 83.5068L69.419 83.6118C67.7314 83.6424 66.1732 84.5224 65.2756 85.9517L61.7808 91.5162C59.7774 94.7061 55.0999 94.6192 53.2165 91.357Z"
                    fill="#71A1F4" />
                <path
                    d="M53.2165 91.357L40.5 69.3314C39.1193 66.9399 39.9387 63.882 42.3301 62.5013L59.9835 52.3091C62.375 50.9283 65.4329 51.7477 66.8137 54.1392L79.4394 76.0076C81.3438 79.3061 79.0082 83.4376 75.2001 83.5068L69.419 83.6118C67.7314 83.6424 66.1732 84.5224 65.2756 85.9517L61.7808 91.5162C59.7774 94.7061 55.0999 94.6192 53.2165 91.357Z"
                    fill="url(#paint3_linear)" />
            </mask>
            <g class="badge_ribbon right" mask="url(#mask1)">
                <rect width="9.73445" height="46.9502" transform="matrix(0.860033 -0.510239 0.512954 0.858416 50.3103 65.1699)"
                    fill="#FCD977" />
            </g>
            <circle cx="40.5" cy="37.5" r="33.5" fill="#DBDFE7" stroke="#FCD977" stroke-width="8" />
            <circle class="badge_circle" cx="40.5" cy="37.5" r="29.5" fill="#FCD977" stroke="#FFA826" stroke-width="4" />
            <path class="badge_number"
                d="M35.26 38.42C36.04 38.52 36.74 38.66 37.5 38.78C37.86 38.1 38.56 37.56 39.64 37.56C41.26 37.56 42.22 38.8 42.22 40.34C42.22 42 41.28 43.2 39.62 43.2C38.18 43.2 37.4 42.28 37.18 41.08H34.72C34.98 43.56 36.86 45.3 39.68 45.3C42.68 45.3 44.7 43.14 44.7 40.26C44.7 37.42 42.86 35.46 40.16 35.46C39.16 35.46 38.36 35.76 37.68 36.2L37.84 35.06C37.94 34.34 37.98 33.62 38.1 32.9H43.7V30.7H36.14C35.84 33.32 35.58 35.78 35.26 38.42Z"
                fill="#FFA826" />
            <defs>
                <linearGradient id="paint0_linear" x1="31.2632" y1="56.9671" x2="13.7695" y2="90.8654"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A31523" />
                    <stop offset="1" stop-color="#F04152" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint1_linear" x1="31.2632" y1="56.9671" x2="13.7695" y2="90.8654"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint2_linear" x1="51.1568" y1="57.4052" x2="70.2299" y2="90.4407"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A31523" />
                    <stop offset="1" stop-color="#F04152" stop-opacity="0" />
                </linearGradient>
                <linearGradient id="paint3_linear" x1="51.1568" y1="57.4052" x2="70.2299" y2="90.4407"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#27539F" />
                    <stop offset="1" stop-color="#71A1F4" stop-opacity="0" />
                </linearGradient>
            </defs>
        </svg>
    </div>
</div>
!

CSS 

              
                * {
  box-sizing: border-box;
}

.hide {
  display: none !important;
}

body {
  font-family: Helvetica Neue;
}
.intro {
  margin-top: 32px;
  text-align: center;
}

.badges {
	 display: flex;
/* 	 flex-direction: column; */
	 justify-content: flex-start;
  flex-wrap: wrap;
	 align-items: center;
	 padding: 32px 0;
  text-align: center;
  width: 100%;
}
.badges .animated_badge_svg {
	 display: block;
	 position: relative;
}
.badges .animated_badge {
	 position: relative;
	 display: flex;
	 flex-direction: row;
	 justify-content: center;
	 align-items: center;
	 width: 156px;
	 height: 156px;
	 margin: 24px 64px;
	 background-color: #fff;
	 border-radius: 100px;
	 box-shadow: 0px 2px 4px rgba(25, 35, 49, 0.02), 0px 24px 32px rgba(25, 35, 49, 0.08), 0px 4px 40px rgba(0, 0, 0, 0.12);
	 animation: fade-in-top 1.5s ease forwards;
	 will-change: transform, opacity;
	 opacity: 0;
}
.badges .animated_badge::before {
	 content: '';
	 position: absolute;
	 left: 19px;
	 top: 19px;
	 width: 118px;
	 height: 118px;
	 background-color: #f1f1eb;
	 border-radius: 100px;
	 opacity: 0;
	 animation: fade-in 1.5s ease forwards;
	 will-change: transform, opacity;
}

/* .badges .animated_badge_1 {
  animation-delay: 0s;
}
.badges .animated_badge_2 {
  animation-delay: 2s;
}
.badges .animated_badge_3 {
  animation-delay: 4s;
}
.badges .animated_badge_4 {
  animation-delay: 6s;
}
.badges .animated_badge_5 {
  animation-delay: 8s;
} */

.badges .animated_badge .badge_ribbon {
	 opacity: 0;
	 transform: translate(-5px, -10px) rotate(75deg) scale(0.5);
	 transform-origin: center;
	 animation: badge-ribbon-left-animation 1s 0.5s ease forwards;
	 will-change: transform, opacity;
}
.badges .animated_badge .badge_ribbon.right {
	 opacity: 0;
	 transform: translate(5px, -10px) rotate(-75deg) scale(0.5);
	 transform-origin: center;
	 animation: badge-ribbon-right-animation 1s 0.5s ease forwards;
	 will-change: transform, opacity;
}
.badges .animated_stars {
	 position: absolute;
	 left: 0;
	 top: 0;
}
.badges .animated_stars .animated_star {
	 position: absolute;
	 opacity: 0;
	 animation: star-animation 0.6s 1s ease forwards;
	 will-change: transform, opacity;
}
.badges .animated_stars .animated_star:nth-of-type(1) {
	 left: -6px;
	 top: 26px;
	 animation-delay: 1s;
}
.badges .animated_stars .animated_star:nth-of-type(2) {
	 left: 32px;
	 top: 14px;
	 animation-delay: 1.05s;
}
.badges .animated_stars .animated_star:nth-of-type(3) {
	 left: 75px;
	 top: -12px;
	 animation-delay: 1.1s;
}
.badges .animated_stars .animated_star:nth-of-type(4) {
	 left: 121px;
	 top: 9px;
	 animation-delay: 1.15s;
}
.badges .animated_stars .animated_star:nth-of-type(5) {
	 left: 152px;
	 top: 35px;
	 animation-delay: 1.2s;
}
.badges .animated_stars .animated_star.plus {
	 width: 12px;
	 height: 12px;
}
.badges .animated_stars .animated_star.plus::before {
	 content: '';
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 margin: auto;
	 width: 12px;
	 height: 4px;
	 background-color: #d5d4d1;
	 border-radius: 10px;
}
.badges .animated_stars .animated_star.plus::after {
	 content: '';
	 position: absolute;
	 left: 0;
	 right: 0;
	 top: 0;
	 bottom: 0;
	 margin: auto;
	 width: 4px;
	 height: 12px;
	 background-color: #d5d4d1;
	 border-radius: 10px;
}
.badges .animated_stars .animated_star.plus.yellow::before, .badges .animated_stars .animated_star.plus.yellow::after {
	 background-color: #fcd977;
}
.badges .animated_stars .animated_star.donut {
	 position: relative;
	 width: 10px;
	 height: 10px;
	 border: 3px solid #fcd977;
	 background-color: transparent;
	 border-radius: 10px;
}

@keyframes star-animation {
	 0% {
		 opacity: 1;
		 transform: scale(0.2);
	}
	 50% {
		 opacity: 1;
		 transform: scale(1.5);
	}
	 100% {
		 opacity: 1;
		 transform: scale(1);
	}
}
@keyframes badge-circle-animation {
	 0% {
		 opacity: 0;
		 transform: translateY(-6px) scale(0.5);
	}
	 100% {
		 opacity: 1;
		 transform: translateY(0) scale(1);
	}
}
@keyframes badge-ribbon-left-animation {
	 0% {
		 opacity: 0;
		 transform: translate(-5px, -10px) rotate(75deg) scale(0.5);
	}
	 100% {
		 opacity: 1;
		 transform: translate(0) rotate(0deg) scale(1);
	}
}
@keyframes badge-ribbon-right-animation {
	 0% {
		 opacity: 0;
		 transform: translate(5px, -10px) rotate(-75deg) scale(0.5);
	}
	 100% {
		 opacity: 1;
		 transform: translate(0) rotate(0deg) scale(1);
	}
}

@keyframes fade-in-top {
    0% {
       opacity: 0;
       transform: translateY(20px);
    }

    100% {
      opacity: 1;
      transform: translateY(0px);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
!

JS 

              
                setTimeout(() => {
  document.querySelector(".animated_badge_1").classList.remove("hide");
}, 0);

setTimeout(() => {
  document.querySelector(".animated_badge_2").classList.remove("hide");
}, 1600);

setTimeout(() => {
  document.querySelector(".animated_badge_3").classList.remove("hide");
}, 3200);

setTimeout(() => {
  document.querySelector(".animated_badge_4").classList.remove("hide");
}, 4800);

setTimeout(() => {
  document.querySelector(".animated_badge_5").classList.remove("hide");
}, 6400);
!
999px

Console