5+ JavaScript Badge Examples

This post contains a total of 5+ JavaScript Badge Examples with Source Code. All these Badges are made using JavaScript & Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Badge Examples

1. Badge animations

Made by Samrat Ambadekar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
* {
  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;
    }
}
</style>
</head>
<body>
<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>
      <script>
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);
    </script>
</body>
</html>

2. Notification Badge Animation

Made by Valery Alikin. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html,
body {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #010001;
  font-family: "Raleway", sans-serif;
}

.box {
  position: relative;
  margin-top: 80px;
}
.box img {
  width: 200px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}
.box .count {
  font-size: 60px;
  color: #fff;
  position: absolute;
  top: -33px;
  right: -7px;
  z-index: 1;
  display: inline-block;
}
.box .count::before {
  content: "";
  position: absolute;
  top: 63%;
  left: 39%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: -6px 7px 55px #ff2900;
  opacity: 1;
}
.box svg {
  overflow: visible !important;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.bubbles {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
}

#organic-blob {
  position: absolute;
  right: -65px;
  top: -169px;
}
</style>
</head>
<body>
  <div class="box">
    <img src="https://alikinvv.github.io/notification-badge/build/icon.svg" alt="">
    <span class="count">5</span>

    <svg id="organic-blob" width="150" height="250" xmlns="http://www.w3.org/2000/svg"  fill="#ff2900">

        <g filter="url(#goo)">
        <circle r="50" cy="172.5" cx="75">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 72.5 175" to="360 72.5 175" dur="2s" repeatCount="indefinite"/>
            </circle>
        <circle r="50" cy="177.5" cx="75">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 77.5 175" to="0 77.5 175" dur="3s" repeatCount="indefinite"/>
            </circle>
        <circle r="50" cy="175" cx="72.5">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 75 172.5" to="360 75 172.5" dur="4s" repeatCount="indefinite"/>
            </circle>
        <circle r="50" cy="175" cx="77.5">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 75 177.5" to="0 75 177.5" dur="3.5s" repeatCount="indefinite"/>
            </circle>

        </g>

        <g filter="url(#goo)" class="bubbles" cy="20"></g>
    </svg>

    <svg class="mask" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8" result="goo" />
            <feBlend in="SourceGraphic" in2="goo" />
          </filter>
        </defs>
      </svg>
</div>

<style>
.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
      <script>
let bubblesCount = 70;
let bubbles = document.querySelector('.bubbles');

let getRandomInt = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

for (let i = 0; i < bubblesCount; i++) {if (window.CP.shouldStopExecution(0)) break;
  let circle = document.createElement('circle');

  circle.setAttribute('r', getRandomInt(5, 15));
  circle.setAttribute('cy', 300);
  circle.setAttribute('cx', getRandomInt(40, 110));
  circle.setAttribute('fill', '#ff2900');
  bubbles.append(circle);
}window.CP.exitedLoop(0);

let html = $('.bubbles').html();
$('.bubbles').html(html);

let circles = document.querySelectorAll('.bubbles circle');

for (let i = 0; i < circles.length; i++) {if (window.CP.shouldStopExecution(1)) break;
  let del = getRandomInt(0, 1000 * 3);
  let xv = getRandomInt(-35, 35);

  anime({
    targets: circles[i],
    r: {
      value: 0,
      duration: 500,
      delay: del + 1000 },

    translateX: {
      value: xv,
      duration: 800,
      delay: del },

    translateY: {
      value: [0, -150],
      duration: 2000,
      delay: del },

    loop: true,
    easing: 'linear' });

}window.CP.exitedLoop(1);
    </script>
</body>
</html>

3. Notification badge

Made by Yuriy. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body {
  height: 100%;
}

body {
  background: linear-gradient(90deg, #4984fc 20%, #039ae5 98%);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body button {
  background: #fff;
  border: 1px solid transparent;
  padding: 10px 15px;
  border-radius: 8px;
  color: #039ae5;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.6px;
  cursor: pointer;
  outline: none !important;
  will-change: color, background, border;
  transition: 0.2s border ease-in-out, 0.2s background ease-in-out, 0.2s color ease-in-out;
}
body button:hover {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
}

.notification {
  width: 38px;
  height: 38px;
  position: relative;
  display: block;
}
.notification-link {
  position: relative;
  width: 38px;
  height: 70px;
  cursor: pointer;
  display: block;
  margin: 0 0 20px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.notification-link:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.notification-link:hover .notification-icon:after, .notification-link:focus .notification-icon:after {
  -webkit-animation: scale-over 2s ease-out infinite;
          animation: scale-over 2s ease-out infinite;
}
.notification-icon {
  font-size: 28px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}
.notification-icon:before, .notification-icon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMSAyMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogbm9uZTsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8ZyBpZD0iR3JvdXBfMSIgZGF0YS1uYW1lPSJHcm91cCAxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDgwIC0xNjUpIj4KICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMSIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMSIgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ4MCAxNjUpIi8+CiAgICA8cGF0aCBpZD0iYmVsbC1vX2NvcHkiIGRhdGEtbmFtZT0iYmVsbC1vIGNvcHkiIGNsYXNzPSJjbHMtMiIgZD0iTTE3LjMsMTUuN2wtMi4xLTMuMXYtNGE2LjQyMSw2LjQyMSwwLDAsMC00LjYtNi4xVjEuN0ExLjY4NSwxLjY4NSwwLDAsMCw4LjksMCwxLjg0NCwxLjg0NCwwLDAsMCw3LjEsMS43di44QTYuNDIxLDYuNDIxLDAsMCwwLDIuNSw4LjZ2My45TC40LDE1LjZhMS42NjksMS42NjksMCwwLDAtLjEsMS44LDEuNjUsMS42NSwwLDAsMCwxLjUuOUg2QTIuOTg4LDIuOTg4LDAsMCwwLDguOCwyMGgwYTMuMDc3LDMuMDc3LDAsMCwwLDIuOC0xLjhoNC4yYTEuODU5LDEuODU5LDAsMCwwLDEuNS0uOUExLjM0OCwxLjM0OCwwLDAsMCwxNy4zLDE1LjdabS0xLDEuMmEuNTUuNTUsMCwwLDEtLjUuM0gxMC43bC0uMS40YTEuOTIyLDEuOTIyLDAsMCwxLTEuOCwxLjNBMS43NSwxLjc1LDAsMCwxLDcsMTcuNmwtLjEtLjRIMS44YS41NS41NSwwLDAsMS0uNS0uMy42MzguNjM4LDAsMCwxLDAtLjZsMi40LTMuNVY4LjZhNS4xMjcsNS4xMjcsMCwwLDEsNC4xLTVsLjUtLjFWMS43YS41LjUsMCwxLDEsMSwwVjMuNWwuNS4xYTUuMTI3LDUuMTI3LDAsMCwxLDQuMSw1djQuM2wyLjMsMy41QzE2LjQsMTYuNSwxNi40LDE2LjcsMTYuMywxNi45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDgxLjYxNCAxNjUuNSkiLz4KICA8L2c+Cjwvc3ZnPgo=");
}
.notification-icon:after {
  opacity: 0;
}
.notification-badge {
  display: block;
  position: absolute;
  top: 5px;
  right: 1px;
  background: #fff;
  border-radius: 100%;
  overflow: hidden;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  will-change: transform, background;
  transition: 0.2s transform ease-in-out, 0.2s background ease-in-out;
  transform: scale(0);
  box-sizing: border-box;
  box-shadow: 0 0 0 3px #4984fc;
}
.notification-badge--active {
  transform: scale(1);
}
.notification-badge--limit {
  background: #F74D4D;
}
.notification-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #F74D4D;
  font-weight: 600;
  font-family: "Open Sans", sans-serif, sans-serif;
  font-size: 11px;
  line-height: 18;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.5px;
  transform: translate3d(0, 0, 0) scaleY(1);
  opacity: 1;
  will-change: opacity, transform;
  transition: 0.3s transform ease-in-out, 0.3s opacity ease-in-out;
}
.notification-counter--old {
  transform: translate3d(0, 100%, 0) scaleY(0);
  opacity: 0;
}
.notification-counter--new {
  transform: translate3d(0, -100%, 0) scaleY(0);
  opacity: 0;
}

@-webkit-keyframes scale-over {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  20% {
    transform: scale(1.5);
    opacity: 0;
  }
  20.0001% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@keyframes scale-over {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  20% {
    transform: scale(1.5);
    opacity: 0;
  }
  20.0001% {
    transform: scale(1);
    opacity: 0.7;
  }
}
</style>
</head>
<body>
  <a id="notificationMenuButton" 
   class="notification-link">
  <span class="notification">
    <span class="notification-icon"></span>
  </span>
</a>

<div class="controls">
  <button class="increase" type="button">Increase</button>
  <button class="decrease" type="button">Decrease</button>
  <button class="set" type="button">Set 100</button>
  <button class="hide" type="button">Set 0</button>
  <button class="get" type="button">Get</button>
</div>
      <script>
class Badge {
  constructor(element, options) {
    this.value = 0;
    this.options = options || {
      badgeClass: 'notification-badge',
      badgeCounterClass: 'notification-counter',
      animationSpeed: 150 };

    if (!element) return;
    this.element = element;
    this.render();
    this.badgeElement = element.querySelector('.' + this.options.badgeClass);
    this.badgeCounterElement = element.querySelector('.' + this.options.badgeCounterClass);
  }

  render() {
    let counter = document.createElement('SPAN');
    counter.className = this.options.badgeClass;
    counter.innerHTML = `<span class="${this.options.badgeCounterClass}">0</span>`;

    this.element.appendChild(counter);
  }

  set(n) {
    n = n || 0;
    let newCounterElement = this.badgeCounterElement.cloneNode();

    // If value is somehow become wrong, wrong type, less than 0, or NaN. 
    // Then hide everything and log an error.
    if (typeof n != 'number' || n < 0 || isNaN(n)) {
      console.error('Wrong type or n(' + n + ') is less then 0!');
      this.badgeElement.classList.remove('notification-badge--active');
      this.badgeCounterElement.innerHTML = '';

      return false;
    }

    if (n === 0) {
      this.badgeElement.classList.remove('notification-badge--active');
      this.badgeCounterElement.innerHTML = '';

      return false;
    }

    if (n > 99) {
      this.badgeElement.classList.add('notification-badge--limit');
    } else {
      this.badgeElement.classList.remove('notification-badge--limit');
    }

    if (!this.badgeElement.classList.contains('notification-badge--active')) {
      this.badgeElement.classList.add('notification-badge--active');
    }

    let timer;
    let animate = new Promise((resolve, reject) => {
      newCounterElement.innerHTML = n;
      newCounterElement.classList.add('notification-counter--new');
      this.badgeCounterElement.classList.add('notification-counter--old');
      this.badgeCounterElement.after(newCounterElement);

      if (timer) clearTimeout(timer);
      timer = setTimeout(resolve, 0);
    });

    animate.then(() => {
      newCounterElement.classList.remove('notification-counter--new');
      setTimeout(() => {
        this.badgeCounterElement.remove();
        this.badgeCounterElement = newCounterElement;
      }, this.options.animationSpeed);
    }, () => false);
  }

  get() {
    let n = parseInt(this.element.querySelector('.' + this.options.badgeCounterClass).innerHTML) || 0;
    return typeof n != 'number' ? this.value : n;
  }

  decrease(n) {
    n = n || 1;
    this.value = this.get() || 0;

    if (this.value - n < 0) {
      return false;
    }

    this.set(this.value - n);
  }

  increase(n) {
    n = n || 1;
    this.value = this.get() || 0;

    if (this.value + n < 0) {
      return false;
    }

    this.set(this.value + n);
  }}



// API usage example:
let notificationElement = document.querySelector('.notification');
let customNotification = new Badge(notificationElement);

document.querySelector('.increase').addEventListener('click', () => {
  customNotification.increase();
});
document.querySelector('.decrease').addEventListener('click', () => {
  customNotification.decrease();
});
document.querySelector('.set').addEventListener('click', () => {
  customNotification.set(100);
});
document.querySelector('.hide').addEventListener('click', () => {
  customNotification.set(0);
});
document.querySelector('.get').addEventListener('click', () => {
  window.alert('Notifications count = ' + customNotification.get());
});
    </script>
</body>
</html>

4. Animated, styleable SVG Envelop

Made by Kyle Wagner. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  background-color: #bdf;
}

.env {
  border-radius: 10px;
}
.env__emails {
  cursor: pointer;
  fill: #eee;
  transition: opacity 0.5s, transform 0.5s;
}
.env__emails:hover {
  transform: translateY(-20px);
}
[data-emails="0"] ~ .env .env__emails {
  opacity: 0;
  transform: translateY(-100%);
}
.env__back {
  cursor: pointer;
  fill: #1c2f41;
}
.env__fold-left {
  fill: #2b4865;
}
.env__fold-right {
  fill: #2b4865;
}
.env__fold-top {
  fill: #357;
}
.env__fold-bottom {
  fill: #357;
}

.badge {
  position: absolute;
  right: -20px;
  top: 45px;
}
.badge::after {
  background-color: #d30;
  border-radius: 50%;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  color: #fff;
  content: attr(data-emails);
  display: block;
  font-size: 30px;
  line-height: 80px;
  height: 80px;
  width: 80px;
  text-align: center;
}

/* extra junk */
html, body {
  height: 100%;
}

body {
  display: flex;
  font-family: sans-serif;
}

main {
  margin: auto;
  position: relative;
}
</style>
</head>
<body>
  <main>
  <div class="badge js-badge" data-emails="1"></div>
  <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1" class="env">
    <desc>Envelope</desc>

    <rect fill="#ccc" x="1" y="120" width="300" height="180" class="env__back js-back" />
    <polygon fill="#f7f7f7" points="1, 120 1, 100 150, 0 300, 100 300, 120" class="env__fold-top" />
    <polygon fill="#000" opacity="0.05" points="1, 120 1, 100 150, 0 300, 100 300, 120 150, 20" class="env__fold-top-glue" />

    <rect x="10" y="80" width="280" height="180" fill="#fff" class="env__emails js-emails"/>

    <polygon fill="#e7e7e7" points="1, 120 20, 120 150, 210 20, 300 1 300" class="env__fold-left" />
    <polygon fill="#e7e7e7" points="300, 120 280, 120 150, 210 280, 300 300 300" class="env__fold-right" />
    <polygon fill="#f7f7f7" points="1, 300 1, 280 150, 180 300, 280 300, 300" class="env__fold-bottom" />
  </svg>
</main>
      <script>
const badgeEl = document.querySelector(".js-badge");
const emailsEl = document.querySelector(".js-emails");
const backEl = document.querySelector(".js-back");
const maxEmails = badgeEl.dataset.emails;

function readEmail() {
  let num = parseInt(badgeEl.dataset.emails, 10);
  badgeEl.dataset.emails = num > 0 ? num - 1 : maxEmails;
}

emailsEl.onclick = readEmail;
backEl.onclick = readEmail;
    </script>
</body>
</html>

5. Elegant Seagulls’ 10-Year Celebration Badge Site Loader Animation

Made by Ryan LaBar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
div {
  height: 100vh;
  background-image: url(http://decade.elegantseagulls.com/admin/wp-content/themes/ten-year/assets/img/darkNoiseBG.png);
  display: flex;
  align-items: center;
  justify-content: center;
}

.link {
  color: grey;
  position: absolute;
  bottom: 20px;
  opacity: 0.5;
  text-decoration: none;
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  transition: 0.3s;
}
.link:hover {
  opacity: 1;
  color: #b5d448;
  border: 1px solid #b5d448;
  padding: 10px;
}

a {
  display: inline-block;
}
a:hover svg * {
  fill: white !important;
}

svg {
  width: 120px;
  opacity: 0.9;
}
</style>
</head>
<body>
  <div class="noiseBG">
  <a href="#" target="_blank" class="link">decade.elegantseagulls.com</a>
  <a href="#" target="_blank"><svg class="loader" xmlns="http://www.w3.org/2000/svg" width="330" height="330" viewBox="-25 -1 330 330">
  <g id="badge" fill="#b5d448" fill-rule="evenodd">
      <g id="spinThis">
        <path id="BOTTOM-ARC" d="M140.507 301.138C63.03 301.138 0 238.106 0 160.63c0-35.78 13.456-69.864 37.888-95.977l8.176 7.65c-22.484 24.03-34.866 55.4-34.866 88.327 0 71.302 58.008 129.31 129.31 129.31 44.428 0 85.227-22.4 109.134-59.92l9.443 6.02c-25.975 40.762-70.303 65.098-118.578 65.098z"/>
        <g id="DECADE">
          <path id="Shape" d="M69.742 49.37l-4.497 2.863 1.215 4.538-1.606 1.022-3.715-15.055 1.776-1.13 12.066 9.737-1.663 1.058-3.578-3.032zm-1.203-1.015l-1.79-1.516c-1.313-1.103-2.575-2.212-3.886-3.395l-.075.048c.516 1.688.985 3.302 1.428 4.958l.618 2.262 3.703-2.357zM94.89 26.606l3.445-.988c4.262-1.225 7.268.64 8.554 5.115 1.29 4.5-.235 7.78-4.412 8.982l-3.53 1.015-4.057-14.124zm6.974 11.7c3.208-.923 4.2-3.468 3.174-7.042-1.02-3.552-3.182-5.074-6.39-4.153l-1.55.447 3.217 11.193 1.55-.444zM115.53 21.578l8.983-1.247.215 1.554-7.118.988.633 4.57 6.01-.834.22 1.575-6.01.833.73 5.277 7.34-1.017.22 1.575-9.204 1.276zM141.655 19.387c1.768.03 3.142.903 3.976 1.86l-1.07 1.167c-.75-.818-1.7-1.37-2.933-1.393-2.82-.045-4.67 2.208-4.733 5.855-.062 3.692 1.71 6.05 4.53 6.097 1.344.024 2.36-.542 3.32-1.577l1.054 1.16c-1.186 1.322-2.632 2.08-4.512 2.05-3.694-.063-6.4-2.928-6.318-7.72.08-4.72 2.86-7.562 6.687-7.498zM161.86 31.614l-5.277-.765-2.04 4.233-1.884-.273 7.007-13.84 2.085.303 2.794 15.258-1.952-.28-.733-4.636zm-.25-1.553l-.365-2.317c-.276-1.693-.51-3.357-.732-5.11l-.09-.012c-.71 1.617-1.406 3.148-2.15 4.692l-1.01 2.12 4.348.63zM176.167 24.154l3.44 1.013c4.255 1.25 5.793 4.437 4.48 8.907-1.322 4.492-4.372 6.445-8.542 5.218l-3.524-1.037 4.147-14.1zm-.385 13.618c3.202.943 5.406-.674 6.455-4.243 1.043-3.546.035-5.99-3.168-6.934l-1.548-.455-3.288 11.176 1.548.456zM196.315 31.02l8.25 3.778-.655 1.426-6.537-2.994-1.922 4.195 5.52 2.528-.662 1.446-5.52-2.53-2.22 4.85 6.74 3.087-.662 1.446-8.45-3.87zM222.62 61.933l2.757 2.388 7.55-8.71-2.758-2.39 1.025-1.183 6.935 6.01-1.026 1.185-2.758-2.39-7.55 8.71 2.76 2.39-1.042 1.202-6.935-6.01zM246.04 65.912l1.25 1.44-3.873 9.685-1.297 3.086.03.033c1.055-1.006 2.19-2.228 3.357-3.24l5.75-4.998 1.162 1.336-11.098 9.64-1.25-1.44 3.874-9.685 1.297-3.087-.03-.033c-1.09 1.034-2.155 2.2-3.306 3.197l-5.802 5.04-1.16-1.335 11.096-9.64zM269.507 99.74l1.498 3.258c1.853 4.033.464 7.287-3.772 9.233-4.257 1.958-7.734.94-9.55-3.008l-1.535-3.34 13.36-6.143zm-10.525 8.662c1.395 3.033 4.064 3.632 7.444 2.08 3.36-1.546 4.54-3.915 3.147-6.948l-.675-1.467-10.59 4.868.674 1.467zM277.56 119.428l2.574 8.69-1.5.445-2.04-6.887-4.422 1.308 1.722 5.815-1.523.452-1.72-5.815-5.11 1.51 2.105 7.104-1.523.454-2.64-8.907zM271.205 141.14c-.93 1.244-1.442 2.858-1.212 4.455.3 2.064 1.423 3.1 2.842 2.896 1.486-.216 1.788-1.414 2.194-2.99l.606-2.217c.365-1.546 1.163-3.383 3.292-3.692 2.218-.32 4.148 1.438 4.55 4.21.263 1.818-.238 3.522-1.148 4.74l-1.34-.803c.705-1.074 1.077-2.26.868-3.702-.254-1.752-1.24-2.764-2.547-2.574-1.396.202-1.71 1.63-2.04 2.945l-.593 2.17c-.47 1.902-1.264 3.465-3.415 3.776-2.307.336-4.43-1.348-4.892-4.54-.308-2.13.267-4.093 1.387-5.59l1.448.92zM271.506 159.44l.06 3.648 11.527-.192-.06-3.648 1.566-.026.153 9.176-1.567.026-.06-3.65-11.527.195.06 3.647-1.59.026-.153-9.176zM283.432 185.63c-.267 1.928-1.352 3.065-2.33 3.767l-1.03-1.205c.852-.606 1.548-1.39 1.742-2.788.378-2.727-1.635-4.838-5.25-5.338-3.66-.507-6.19.792-6.587 3.652-.14 1.02.06 2.02.515 2.648l3.792.525.402-2.903 1.53.212-.64 4.61-6.12-.848c-.803-1.06-1.344-2.696-1.083-4.58.507-3.66 3.667-5.91 8.413-5.252 4.703.652 7.17 3.73 6.646 7.5zM280.392 200.07l-.526 1.83-10.23 2.024-3.292.593-.012.042c1.417.338 3.06.622 4.546 1.05l7.32 2.103-.49 1.7-14.12-4.058.524-1.828 10.23-2.025 3.292-.593.013-.045c-1.46-.35-3.018-.61-4.482-1.03l-7.383-2.12.49-1.702 14.12 4.056z"/>
        </g>
      </g>
      <g id="TENYEARS">
        <path id="Shape" d="M198.365 146.24h3.796l-1.968-4.816zM217.638 142.194c0-1.97-.967-2.793-2.49-2.793h-1.126v5.695h.698c2.024 0 2.918-1.003 2.918-2.9z"/>
        <path id="Shape" d="M223.646 132.804c-4.772-29.088-25.033-51.07-49.83-51.07-28.427 0-50.9 28.886-50.9 64.253 0 35.37 22.473 64.254 50.9 64.254 24.97 0 45.342-22.29 49.927-51.684h19.21v-25.753h-19.307zm-49.83 74.105c-13.83 0-24.393-14.813-24.393-60.922 0-46.107 10.564-60.922 24.393-60.922 12.413 0 22.19 11.952 24.064 47.738h-35.987v25.753h36.02c-1.79 36.272-11.612 48.352-24.097 48.352zm7.764-67.705c0-.143.07-.233.358-.233.913 0 1.773.036 2.49.036 2.22 0 4.332-.02 6.445-.036l.896 3.42c.07.268.106.41.106.465 0 .09-.054.143-.178.143-.162 0-.143-.304-.842-1.467-.842-1.397-2.005-2.13-4.154-2.13h-.967v5.156h.447c1.253 0 2.167-.933 2.238-2.22.018-.36.07-.45.25-.45.107 0 .18.09.18.25v5.48c0 .162-.073.25-.18.25-.18 0-.233-.09-.25-.447-.07-1.593-.985-2.435-2.238-2.435h-.447v4.513c0 .824.323 1.254 1.47 1.254 2.792 0 4.296-1.988 4.85-3.76.108-.34.127-.502.287-.502.126 0 .18.09.18.198 0 .107-.037.32-.073.52l-.788 3.974c-2.364-.02-4.745-.036-7.234-.036-.716 0-1.576.036-2.49.036-.285 0-.357-.09-.357-.233 0-.5 1.54.198 1.54-1.235v-9.275c0-1.432-1.54-.735-1.54-1.235zm-5.056 11.746c0 .144-.072.234-.36.234-.912 0-1.77-.036-2.488-.036-.717 0-1.576.036-2.49.036-.285 0-.358-.09-.358-.233 0-.5 1.54.198 1.54-1.235v-3.975l-2.882-5.246c-.77-1.415-1.773-.95-1.773-1.325 0-.127.108-.198.305-.198.877 0 1.7.036 2.542.036.84 0 1.665-.036 2.506-.036.27 0 .395.054.395.18 0 .375-1.127-.055-1.127.948 0 .304.107.59.323 1.003l2.113 3.956 1.395-2.47c.466-.824.645-1.63.645-2.115 0-1.2-1.11-1.02-1.11-1.307 0-.107.107-.197.358-.197.573 0 1.003.037 1.72.037.554 0 1.127-.036 1.664-.036.126 0 .197.072.197.18 0 .358-.843-.126-2.543 2.722l-2.113 3.528v4.315c0 1.432 1.54.734 1.54 1.236zm31.116.233c-.823 0-1.683-.036-2.525-.036-.86 0-1.72.036-2.525.036-.16 0-.215-.072-.215-.18 0-.357 1.254.037 1.254-.948 0-.573-.324-1.056-1.29-3.49h-4.083c-.34.966-.752 1.772-.752 2.667 0 1.612 1.487 1.503 1.487 1.81 0 .09-.036.142-.162.142-.644 0-1.343-.036-2.04-.036-.7 0-1.397.036-2.095.036-.143 0-.197-.054-.197-.162 0-.125.07-.178.375-.25 1.2-.27 2.024-1.79 2.668-3.474l2.275-5.89c.07-.198.126-.324.126-.52 0-.376-.537-.466-.537-.61 0-.142.36-.16 1.182-1.002.806-.823.752-1.056.913-1.056.09 0 .18.215.27.448l4.53 11.03c.59 1.432 1.52 1.02 1.52 1.343 0 .09-.053.143-.178.143zm14.726 0c-.645 0-1.29-.036-1.934-.036h-1.934l-2.166-4.53c-.43-.896-1.272-1.2-2.31-1.2v4.297c0 1.432 1.54.734 1.54 1.236 0 .143-.07.233-.357.233-.914 0-1.774-.036-2.49-.036-.716 0-1.576.036-2.49.036-.285 0-.357-.09-.357-.233 0-.502 1.54.197 1.54-1.236v-9.275c0-1.433-1.54-.736-1.54-1.237 0-.143.07-.233.358-.233.913 0 1.773.036 2.49.036.895 0 1.664-.036 2.846-.036 3.062 0 4.69 1.36 4.69 3.187 0 1.504-.93 2.758-4.62 3.15v.036c1.918 0 2.956.466 3.654 1.81l1.343 2.596c.733 1.413 1.915.733 1.915 1.235 0 .11-.018.198-.18.198zm6.58.25c-1.773 0-2.615-.822-3.313-.822s-.59.61-.896.61c-.09 0-.142-.036-.142-.162v-4.977c0-.214.07-.268.178-.268.18 0 .18.27.25.645.43 2.273 1.325 4.548 3.94 4.548 1.826 0 2.865-.93 2.865-2.31 0-3.616-7.162-1.844-7.162-6.284 0-2.112 1.79-3.687 4.01-3.687 1.684 0 2.58.716 3.08.716.628 0 .36-.503.68-.503.126 0 .198.054.215.323l.324 3.384c.036.34.054.5.054.59 0 .127-.054.18-.143.18-.18 0-.197-.376-.483-1.092-.788-1.987-1.755-3.17-3.742-3.17-1.272 0-2.274.555-2.274 1.917 0 2.935 7.27 1.306 7.27 6.16-.002 2.378-2.007 4.204-4.71 4.204z"/>
        <path id="Shape" d="M114.926 180.885c0 7.777 4.815 11.85 15.37 12.406 10 .556 12.036.556 12.036 3.334 0 1.11-.926 2.222-2.963 2.222-12.592 0-25.37-.184-37.22 0-12.59.186-25.368.372-37.96.372-2.037 0-2.963-1.11-2.963-2.222 0-2.777 2.037-2.777 12.037-3.333 10.554-.555 15.37-4.63 15.37-12.406V94.78c0-4.26-1.112-5.184-4.445-5.184H59.003c-1.666 0-2.593-.74-2.593-2.036 0-2.78 3.705-1.483 19.63-3.52 23.887-2.962 32.776-12.59 36.48-12.59 1.665 0 2.406.925 2.406 4.073v105.362z"/>
      </g>
      <g id="ESLOGO">     
          <path id="Shape" d="M186.908 224.56c-.47.5-1.1.386-1.608.573-2.3.846-3.647 3.195-6.777 2.757-.18-1.027.13-1.812-.23-2.527-.778-1.546-2.96-.668-4.365-.575-.504-4.22 5.16-1.64 7.81-2.642.414.33.802.668 1.38.92 1.237.537 3.115.377 3.79 1.493zm-7.123-1.15c-1.907-.014-4.1-1.56-4.94.46 1.417-.254 3.285-.106 4.366.345.026.938.283 2.108 0 2.987 2.62-.29 3.89-1.932 5.86-2.872-1.344-.685-3.542-.907-5.285-.92zM204.6 230.877c-2.22 1.05-7.62-.7-8.617 1.493-.24.53-.002 1.26-.23 1.838-.67 1.698-3.768 2.303-5.17.804.256-1.32 2.074-1.202 2.07-2.527-.01-2.41-6.058-1.815-8.617-2.298.472-1.104 1.964-1.63 3.332-2.068 5.024-1.61 15.378-1.856 17.23 2.757zm-18.612-1.264c1.398-.02 3.148.113 4.71.575 1.2.354 3.195 1.136 3.332 1.953.238 1.43-1.837 1.672-2.183 2.873 2.096.067 3.175-.883 2.987-3.102 1.715-1.577 5.007-1.578 8.386-1.492-2.64-3.732-13.14-2.808-17.232-.805zM156.235 233.404c-1.213-.11-2.988-.47-4.136.345-.97.685-.977 1.83-1.724 2.87-.674-.56-.27-1.514-.46-2.182-.482-1.707-2.42-1.578-4.25-1.723.77-1.68 2.903-1.998 4.25-3.102 1.946 1.35 6.695.503 6.32 3.79zm-4.02-2.068c-.633-.096-1.36-.55-1.953-.574-1.203-.05-2.092.844-2.758 1.263 1.69.07 2.69.833 3.217 2.068.69-1.302 2.465-2.002 4.48-1.608-.12-1.082-1.668-.946-2.986-1.15z"/>
        <path id="Shape" d="M94.89 249.602c-.644-1.315.15-2.627.92-3.905.673-1.126 1.256-2.87 2.41-1.608.05.584-.174.895-.343 1.262.86 1.036.38 3.324-.23 4.25-.05 1.888.255 3.423.46 5.056 1.906-1.273 3.466-3.224 4.71-5.284.837-1.387 1.633-2.946 3.906-2.987.434.523.435 1.48.804 2.068 1.22-.136 2.65-3.45 3.905-3.102.74.205.55 1.39.69 2.412.636-.108.95-1.24 1.837-1.148 1.355.142 1.506 2.977 1.952 4.365 3.664-2.043 5.704-6.702 8.157-10.34-.832-.817-6.605.486-6.78-1.034-.137-1.204 1.445-.823 2.07-.804 1.726.052 3.575.097 5.053.23 1.59-3.388 2.366-7.59 7.008-7.927 1.052 1.628-.042 3.526-.804 4.71-.856 1.333-1.97 2.525-2.872 3.447 2.992.048 5.424 0 8.156-.575.78-.165 3.362-1.318 3.33.114-.017.858-2.097 1.113-3.445 1.38-2.106.414-5.292.73-8.04.574-1.297-.075-1.837-.036-2.413.92-.16 2.07-1.882 4.633-1.38 7.58.113.656.508 1.38 1.035 1.495 1.764.386 2.352-1.975 3.102-1.953.29.008.747.355.804.575.286 1.116-3.448 4.277-5.17 2.872-1.395-1.14-1.463-3.76-1.034-6.318-1.983 2.38-3.76 5.965-7.353 7.12-1.032-1.034-.955-3.18-1.608-4.594-1.152.424-.985 2.918-2.07 3.1-1.36.232-.99-1.913-1.033-3.56-.984.445-3.55 3.955-4.48 1.034-.65.5-1.164 1.134-2.068 1.38-1.688 2.217-3.13 4.68-5.63 6.088.577 3.508.26 8.293-2.642 8.73-2.22.334-5.367-2-5.055-4.48.346-2.75 3.896-3.983 5.973-5.17-.305-1.534-.504-3.172-.575-4.94-.432 1.136-3.828 2.11-5.167.688-1.05 1.055-3.74.907-3.907-.803-1.703 1.11-3.986 2.12-6.318 1.263-.3-.11-1.103-1.026-1.38-1.034-.625-.018-.962 1.404-1.837 1.034-.003-.11-.14-.09-.23-.115-.774-1.144.702-1.65 1.15-2.296-.53-1.382.954-4.548 2.068-4.48 1.604.097.618 3.798-.23 4.48 1.39 2.167 5.568.815 6.548-.805.626-5.718 1.2-11.123 3.217-15.624.588-1.31 1.975-4.693 4.02-4.25.912.196 1.643 1.927 1.494 3.445-.355 3.633-3.103 5.07-4.48 8.387-.866 2.084-.755 4.92-1.724 7.123-.18.408-1.032 1.458-1.034 1.84-.003.388.322 1.05.918 1.033.99-.03.402-.927.69-1.954.177-.637 1.126-1.82 1.722-1.724 1.344.217-.024 3.267 1.61 3.56.816.147 1.112-.48 1.61-.804zm-1.38-19.07c-2.28 2.085-3.372 5.97-3.676 9.65.897-3.487 4.827-5.104 4.02-9.535-.146-.006-.157-.147-.343-.115zm32.97 7.927c1.467-1.676 3.326-2.956 3.792-5.63-2.213.85-3.134 3.605-3.79 5.63zm-34.118 23.09c.204 1.172 1.67 2.38 3.102 2.182 1.815-.25 2.067-4.668 1.378-6.663-1.388.983-4.967 1.68-4.48 4.48z"/>
        <path id="Shape" d="M167.493 241.906c.912-2.27 1.832-5.164 3.446-6.778 2.307-2.31 5.84-1.132 5.398 3.1-.476 4.57-5.544 8.44-8.04 10.34-.04.537.317.677.573.92.953-.045 1.45-.544 2.07-.92-.1-.748-.02-1.347.343-1.838.71-.957 4.466-1.585 4.48-.115.013 1.287-2.956 1.152-3.217 2.527.29.745.522 1.546.804 2.298 2.29-.91 4.865-1.28 6.78-2.528.64-.417 1.09-1.42 2.066-.92-.005.197.086.298.23.346-1.205 3.275-5.573 3.387-8.73 4.71.15 2.33-1.18 3.184-3.1 3.447-1.566-1.283-.238-4.038 1.378-4.25-.11-.85-.508-1.41-.69-2.184-1.273 1.362-3.948.96-4.365-.918-.747.328-2.145.325-2.758-.115-.802.58-2.857 3.098-3.33.574-.49.238-.88.576-1.724.46-1.325 1.165-2.858 2.12-4.71 2.758.158 4.863.453 10.563-2.642 12.522-2.564-1.198-4.29-3.55-3.906-7.122.342-3.177 2.968-5.03 4.94-6.434-.09-.864-.106-1.81-.23-2.642-.306.04-.996.685-1.493.92-1.598-.09-4.265 1.56-5.055-.575-.646 1.846-4.332 3.534-5.17.688-.982.54-3.368.477-4.365 0-1.05.366-1.573 1.26-2.757 1.494.062.435.36.636.344 1.147-.305 2.214-4.172 2.653-4.365.345-.09-1.068.602-1.73 1.607-2.068-.793-1.418-.995-4.067.345-5.055 2.185-.735 3.7 2.825 1.263 2.067-.595.527-.7 1.557-.23 2.298.968-.373 1.85-.83 2.643-1.38-.845-2.512 1.053-4.616 3.677-4.02.563 1.454-.683 2.854-1.264 3.906 3.823 1.174 4.412-3.97 7.698-3.33.217 1.766-1.703 2.342-2.642 3.33.24.375.755.47 1.035.805 1.456-.688 1.093-3.196 3.102-3.33.61.385.16 1.83.574 2.41 2.12.604 2.214-1.315 3.217-2.41.304-.335 1.108-.703 1.493-1.036.337-.29.476-.676.804-.69 1.786-.078.577 4.935 1.264 6.434 1.216-.2 2.775-1.054 3.56-2.068-.357-1.08-.41-3.31.576-3.447 1.014-.142 1.205 1.386 1.15 2.757 1.016-.247.8-1.726 1.032-2.758.273-.21.665-.3 1.035-.116-.452-3.002-.102-6.302.92-9.305.565-1.665 1.94-4.02 3.1-4.022 1.338-.002 2.392 2.79 2.53 4.25.198 2.17-.33 3.93-.694 5.518zm-1.953-7.927c-2.008 2.698-3.553 8.633-1.954 12.75 2.005-2.035 4.994-9.988 1.954-12.75zm4.135 6.66c-.844 2.045-1.707 4.233-1.492 6.205 1.266-.958 2.83-2.372 4.135-4.02 1.51-1.906 3.617-5.177 1.723-7.24-2.61.105-3.533 3.045-4.365 5.056zm-4.71 7.01c.425.203 1.047.1 1.494 0 .048-.538-.065-1.222 0-1.838.063-.613.59-2.098.344-1.84-.56 1.28-1.083 2.595-1.838 3.678zm-28.145 0c.167-.37.43-.644.575-1.034-.426.037-.81.717-.575 1.034zm25.39 1.033c.107-.35.558-.36.573-.804-.357-.295-.512-.79-.804-1.15.02.708-.097 1.55.23 1.953zm-30.904 4.366c.167.168.752.168.92 0-.006-.16.054-.253.115-.346-.298-.41-.962-.125-1.034.345zM151.64 263.5c1.554-2.07 1.61-6.514 1.15-9.88-3.302 1.174-4.94 8.007-1.15 9.88z"/>
      </g>
    
    
    <g id="spin" transform="translate(-25 -1)">
      <path id="Shape" fill="#b5d448" d="M311.925 238.24l-4.008-2c11.062-22.198 16.67-46.123 16.67-71.108 0-88.033-71.62-159.653-159.653-159.653-37.084 0-73.212 12.998-101.73 36.6l-2.855-3.45C89.666 14.365 126.81 1 164.933 1c90.503 0 164.133 73.63 164.133 164.132 0 25.685-5.767 50.282-17.142 73.107z"/>
      <circle id="Oval" cx="165" cy="165" r="165" fill="#D8D8D8" fill-opacity="0"/>
    </g>
  </g>
</svg>
</a>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
      <script>
function spin() {
  var tl = new TimelineMax({ paused: false, repeat: -1, delay: 0 });
  tl.add("spin").
  to('#spin', 1.25, { transformOrigin: "50%, 50%", rotation: '-360deg', ease: Power0.easeNone }, "spin");
  return tl;
}
function spinner() {
  var tl = new TimelineMax({ paused: false, yoyo: true, repeat: -1, delay: 0 });
  tl.to('#spinThis', 1.25, { transformOrigin: "50%, 50%", scaleX: "-1", ease: Power1.easeInOut });
  return tl;
}
var loading = new TimelineMax();
loading.add(spin).add(spinner);
var static = $('.noiseBG');
TweenMax.to('.noiseBG', .03, { repeat: -1, onRepeat: repeatStatic, ease: SteppedEase.config(1) });
function repeatStatic() {
  TweenMax.set('.noiseBG', { backgroundPosition: Math.floor(Math.random() * 100) + 1 + "% " + Math.floor(Math.random() * 10) + 1 + "%" });
}
    </script>
</body>
</html>
 

6. Tatooine Badge

Made by LukyVJ. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,800);
body {
  background-color: #FFF5DD;
  transition: background 0.3s ease;
}
body.night-mode {
  background: #065C7C;
}

h2, h3, a {
  text-align: center;
  line-height: 0.2;
  color: #5C4023;
  font-family: "Open Sans", helvetica, sans-serif;
  font-weight: 800;
  -webkit-font-smoothing: antialiased;
  transition: color 0.3s ease;
}
.night-mode h2, .night-mode h3, .night-mode a {
  color: #C3E5FF;
}

h2 {
  margin-top: 2em;
}

.contain-tatooine {
  width: 200px;
  height: 200px;
  margin: 25vh auto;
}
.contain-tatooine .hex {
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwMCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjEzLjQ5OSw0OS44NzYgOTkuODg3LDAgMTg2LjI4NCw0OS44NzkgMTg2LjI4NCwxNDkuNjM1IDk5Ljg4NywxOTkuNTE2IDEzLjQ5OSwxNDkuNjMgIi8+Cjwvc3ZnPg==");
  -moz-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwMCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjEzLjQ5OSw0OS44NzYgOTkuODg3LDAgMTg2LjI4NCw0OS44NzkgMTg2LjI4NCwxNDkuNjM1IDk5Ljg4NywxOTkuNTE2IDEzLjQ5OSwxNDkuNjMgIi8+Cjwvc3ZnPg==");
  background-size: contain;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  transform: scale(1.03);
  transition: filter 0.3s ease;
}
.night-mode .contain-tatooine .hex {
  -webkit-filter: invert(100%) brightness(120%);
}
.contain-tatooine .hex:after {
  content: "";
  display: block;
  width: 20px;
  height: 200px;
  margin-left: 3px;
  position: absolute;
  z-index: 20;
  box-shadow: inset 0 0 0 20px #5C4023;
}
.contain-tatooine .hex .background {
  background-size: contain;
  background: #5C4023;
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  z-index: 1;
}
.contain-tatooine .hex .background:after, .contain-tatooine .hex .background:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 300;
  border-radius: 100%;
}
.contain-tatooine .hex .background:before {
  width: 45px;
  height: 45px;
  background: #5C4023;
  margin: 130px 48px;
}
.contain-tatooine .hex .background:after {
  width: 40px;
  height: 14px;
  background: #5C4023;
  margin: 145px 62px;
  border-radius: 0;
}
.contain-tatooine .hex .background .piece {
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwMCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjEzLjQ5OSw0OS44NzYgOTkuODg3LDAgMTg2LjI4NCw0OS44NzkgMTg2LjI4NCwxNDkuNjM1IDk5Ljg4NywxOTkuNTE2IDEzLjQ5OSwxNDkuNjMgIi8+Cjwvc3ZnPg==");
  -moz-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwMCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjEzLjQ5OSw0OS44NzYgOTkuODg3LDAgMTg2LjI4NCw0OS44NzkgMTg2LjI4NCwxNDkuNjM1IDk5Ljg4NywxOTkuNTE2IDEzLjQ5OSwxNDkuNjMgIi8+Cjwvc3ZnPg==");
  background-color: #FCE3A6;
  background-image: -webkit-linear-gradient(top, #FCE3A6 0%, #FCE3A6 20%, #EFC035 20%, #EFC035 40%, #E77C2E 40%, #E77C2E 60%, #DF492F 60%, #DF492F 80%, #5C4023 80%, #5C4023 100%);
  background-image: linear-gradient(to bottom,#FCE3A6 0%, #FCE3A6 20%, #EFC035 20%, #EFC035 40%, #E77C2E 40%, #E77C2E 60%, #DF492F 60%, #DF492F 80%, #5C4023 80%, #5C4023 100%);
  transform: scale(0.87);
}
.contain-tatooine .hex .background .piece:after, .contain-tatooine .hex .background .piece:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  border-radius: 100%;
}
.contain-tatooine .hex .background .piece:before {
  width: 80px;
  height: 80px;
  background-color: #DF492F;
  background-image: -webkit-linear-gradient(#DF492F 0%, #DF492F 80%, rgba(255, 255, 255, 0));
  background-image: linear-gradient(#DF492F 0%, #DF492F 80%, rgba(255, 255, 255, 0));
  margin: 60px 0px;
  z-index: 1;
}
.contain-tatooine .hex .background .piece:after {
  width: 40px;
  height: 40px;
  background: #DF492F;
  margin: 95px 100px;
}

#night {
  position: absolute;
  top: 1.5em;
  left: 1em;
  text-decoration: none;
  padding: 1em;
  border: 1px solid;
}
</style>
</head>
<body>
  <div class="container">
  <a href="#" id="night">Night Mode</a>
  <div class="contain-tatooine">

    <div class="hex">
      <div class="background">
        <div class="piece"></div>
      </div>
    </div> 

    <h2>TATOOINE</h2>
    <h3>95'</h3>

  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>

$(function () {
  triggerNight = $('#night');
  triggerNight.on('click', function () {
    $('body').toggleClass('night-mode');
  });
});
    </script>
</body>
</html>