Skip to content

Instantly share code, notes, and snippets.

@guilhermesimoes

guilhermesimoes/README.md

Last active April 12, 2020 16:22
Show Gist options
  • Save guilhermesimoes/8496377c9df4e7162a03be8cc8ee1c06 to your computer and use it in GitHub Desktop.
Save guilhermesimoes/8496377c9df4e7162a03be8cc8ee1c06 to your computer and use it in GitHub Desktop.
Download ZIP
Animated NBC Peacock Logo
Raw
README.md

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.

Raw
index.html
<!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>
<script type="text/javascript">
"use strict";
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment