Badge - Icon Animation 🏅

badge.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Keyshape -->
<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512">
    <style>
@keyframes a0_t { 0% { transform: translate(256px,256px) scale(0.6,0.6) translate(-184.038px,-256px); } 20.8333% { transform: translate(256px,256px) scale(0.6,0.6) translate(-184.038px,-256px); animation-timing-function: cubic-bezier(0.55,0.085,0.68,0.53); } 50% { transform: translate(256px,256px) scale(1.1,1.1) translate(-184.038px,-256px); } 54.1666% { transform: translate(256px,256px) scale(0.95,0.95) translate(-184.038px,-256px); } 58.3333% { transform: translate(256px,256px) scale(1,1) translate(-184.038px,-256px); } 100% { transform: translate(256px,256px) scale(1,1) translate(-184.038px,-256px); } }
@keyframes a0_o { 0% { opacity: 0; animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 20.8333% { opacity: 1; } 83.3333% { opacity: 1; animation-timing-function: cubic-bezier(0.42,0,0.58,1); } 100% { opacity: 0; } }
@keyframes a1_t { 0% { transform: translate(184.038px,188.743px) rotate(0deg) translate(-256px,-188.743px); } 20.8333% { transform: translate(184.038px,188.743px) rotate(0deg) translate(-256px,-188.743px); } 100% { transform: translate(184.038px,188.743px) rotate(130deg) translate(-256px,-188.743px); } }
    </style>
    <g opacity="0" transform="translate(256,256) scale(0.6,0.6) translate(-184.038,-256)" style="animation: 2.4s linear infinite both a0_t, 2.4s linear infinite both a0_o;">
        <path d="M337.903,358.822L361.316,320.83L403.568,306.42L408.249,262.043L440.038,230.748L424.924,188.742L440.038,146.735L408.25,115.44L403.569,71.064L361.317,56.654L337.904,18.661L293.619,24.008L256,0L218.381,24.01L174.097,18.663L150.684,56.655L108.432,71.065L103.751,115.441L71.962,146.736L87.076,188.743L71.962,230.75L103.75,262.044L108.431,306.421L150.683,320.831L174.096,358.823L218.381,353.477L256,377.486L293.619,353.477ZM126.571,188.743C126.571,117.376,184.633,59.314,256,59.314C327.367,59.314,385.429,117.376,385.429,188.743C385.429,260.11,327.367,318.172,256,318.172C184.633,318.172,126.571,260.11,126.571,188.743Z" transform="translate(184.038,188.743) translate(-256,-188.743)" style="animation: 2.4s linear infinite both a1_t;"/>
        <path d="M256,89.333C201.185,89.333,156.59,133.928,156.59,188.743C156.59,243.558,201.185,288.153,256,288.153C310.815,288.153,355.41,243.558,355.41,188.743C355.41,133.928,310.815,89.333,256,89.333Z" transform="translate(184.038,188.743) translate(-256,-188.743)"/>
        <path d="M211.299,384.568L158.619,390.928L130.786,345.761L121.324,342.535L80.511,470.101L153.986,466.06L211.471,512L245.299,406.268Z" transform="translate(90.943,427.268) translate(-162.905,-427.267)"/>
        <path d="M381.214,345.762L353.38,390.928L300.701,384.568L266.701,406.268L300.529,512L358.014,466.06L431.489,470.101L390.676,342.535Z" transform="translate(277.133,427.268) translate(-349.095,-427.267)"/>
    </g>
</svg>