Animated NBC Peacock Logo

My attempt at animating NBC's peacock showing-off.

If you're interested in NBC's past, check out the history of NBC's logo and chime.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
    height: 100%;
    margin: 0;
}

.container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    padding: 15px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.controls {
    position: absolute;
    top: 15px;
    left: 15px;
}

#peacock {
    width: 100%;
    height: 100%;
}

.feather {
    /* stroke-width: 1px; */
    /* stroke: #fff; */
    /* paint-order: stroke; */
    transform-origin: 50% 50%;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
}

.showoff .feather {
    animation-name: showoff;
}

.infinite-showoff .feather {
    animation-name: infinite-showoff;
    animation-iteration-count: infinite;
}

@keyframes showoff {
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes infinite-showoff {
  50% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

#feather1 {
  transform: translate(13px, 6px) rotate(45deg);
}

#feather2 {
  transform: translate(8px, 2px) rotate(20deg);
}

#feather3 {
  transform: translate(3px, 2px) rotate(12deg);
}

#feather4 {
  transform: translate(-3px, 2px) rotate(-12deg);
}

#feather5 {
  transform: translate(-8px, 2px) rotate(-20deg);
}

#feather6 {
  transform: translate(-13px, 6px) rotate(-45deg);
}
</style>
<body>

<div class="container">
    <form class="controls js-controls">
        <label><button type="button" value="once">Once</button></label>
        <label><button type="button" value="infinite">Infinite</button></label>
    </form>
    <svg id="peacock" class="showoff" viewBox="0 0 64 64">
        <path id="feather1" class="feather" style="fill: #fcb711" d="M7.93 49.75h20.95L11.6 37.7c-4-2.56-8.48-1.06-10.1 3.19-1.37 4.87 2.06 8.87 6.42 8.87" />
        <path id="feather2" class="feather" style="fill: #f37021" d="M8.43 24.32a6.69 6.69 0 001.12 10.63l18.4 12.61-8.92-20.43c-1.87-4.82-6.98-5.87-10.6-2.81" />
        <path id="feather3" class="feather" style="fill: #cc004c" d="M24.26 14.38a6.55 6.55 0 00-5.48 9.06L28 45.2l3.25-22.88c.75-5.68-3.56-8.3-6.99-7.93" />
        <path id="feather6" class="feather" style="fill: #0db14b" d="M56.12 49.75H35.17L52.45 37.7c4-2.56 8.48-1.06 10.1 3.19 1.37 4.87-2.05 8.87-6.42 8.87" />
        <path id="feather5" class="feather" style="fill: #0089d0" d="M55.62 24.32a6.69 6.69 0 01-1.12 10.63L36.11 47.55l8.92-20.43c1.87-4.82 6.98-5.87 10.6-2.81" />
        <path id="feather4" class="feather" style="fill: #6460aa" d="M39.8 14.38c3 .06 7.47 3.62 5.47 9.06L36.05 45.2l-3.24-22.88c-.75-5.68 3.55-8.3 6.98-7.93" />
        <path id="body" style="fill: #ffffff" d="m 34.43,21.44 c 0,0 0.93,0 1,0.44 -0.69,0.56 -2.56,0.63 -2.31,3.63 l 2.67,19.63 c 0,0 0.417,2.327 -0.33,3 -1.67,1.5 -5,1.41 -6.72,0 -0.77,-0.62 -0.77,-1.49 -0.617,-2.9 C 28.915,38.4 30.68,28.46 30.8,26.29 31.145,24.38 30.86,21.875 32.68,21.44" />
    </svg>
</div>

var peacock = document.querySelector("#peacock");

function animate(event) {
    var button = event.target;

if (button.value === "infinite") {
        peacock.classList.add("infinite-showoff");
    } else {
        peacock.classList.remove("infinite-showoff", "showoff");
        setTimeout(() => peacock.classList.add("showoff"), 10);
    }
}

document.querySelector(".js-controls").addEventListener("click", animate);
</script>
</body>