<svg class="badge" xmlns="http://www.w3.org/2000/svg" height="440" width="440" viewBox="-40 -40 440 440">
    <circle class="outer" fill="#F9D535" stroke="#fff" stroke-width="8" stroke-linecap="round" cx="180" cy="180" r="157"/>
    <circle class="inner" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"/>
    <path class="inline" d="M89.4 276.7c-26-24.2-42.2-58.8-42.2-97.1 0-22.6 5.6-43.8 15.5-62.4m234.7.1c9.9 18.6 15.4 39.7 15.4 62.2 0 38.3-16.2 72.8-42.1 97" stroke="#CAA61F" stroke-width="7" stroke-linecap="round" fill="none"/>
    	<g class="star">
			<path fill="#F9D535" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
			<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"/>
			<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"/>
			<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"/>
			<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"/>
			<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"/>
		</g>	
  </svg>
/* --------------------------
  Base
--------------------------- */

body {
  background: #8069a1;
  padding-top: 60px;
}

svg {
	margin: auto;
  display: block;
}

/* --------------------------
  Keyframes
--------------------------- */
@keyframes grow {
	0% {
		transform: scale(0);
	}
	30% {
		transform: scale(1.1);
	}
	60% {
		transform: scale(0.9);
	}
}
@keyframes turn {
	0% {
		transform: rotate(0) scale(0);
		opacity: 0;
	}
	60% {
		transform: rotate(375deg) scale(1.1);
	}
	80% {
		transform: rotate(355deg) scale(0.9);
	}
	100% {
		transform: rotate(360deg) scale(1);
	}
}
@keyframes pulse {
	50% {
		transform: scale(1.4);
	}
}

/* --------------------------
  SVG Styles
--------------------------- */


.badge * {
	transform-origin: 50% 50%;
}

.outer, 
.inner,
.inline {
	animation: grow 1s ease-out backwards;
}

.inner {
	animation-delay: 0.1s;
}

.inline {
	animation-delay: 0.15s;
}

.star {
	animation: turn 1.1s .2s ease-out backwards;
}

.star circle {
	animation: pulse .7s 1.5s;
}

	.star circle:nth-of-type(2) {
		animation-delay: 1.6s;
	}
	.star circle:nth-of-type(3) {
		animation-delay: 1.7s;
	}
	.star circle:nth-of-type(4) {
		animation-delay: 1.8s;
	}
	.star circle:nth-of-type(5) {
		animation-delay: 1.9s;
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.