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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
}
svg {
width: 100%;
height: 100%;
display: block;
}
.controls {
position: absolute;
top: 1em;
left: 1em;
}
.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>
<form class="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" fill="#fcb711" d="M7.92 49.76c-4.36 0-7.79-4-6.42-8.87 1.62-4.25 6.1-5.75 10.1-3.19L28.88 49.75H7.93" />
<path id="feather2" class="feather" fill="#f37021" d="M8.43 24.32c3.62-3.06 8.73-2.01 10.6 2.81l8.92 20.43L9.55 34.95A6.69 6.69 0 018.43 24.32" />
<path id="feather3" class="feather" 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" fill="#0db14b" d="M56.13 49.76c4.37 0 7.79-4 6.42-8.87-1.62-4.25-6.1-5.75-10.1-3.19L35.17 49.75H56.12" />
<path id="feather5" class="feather" fill="#0089d0" d="M55.62 24.32A6.69 6.69 0 0154.5 34.95L36.11 47.55l8.92-20.43c1.87-4.82 6.98-5.87 10.6-2.81" />
<path id="feather4" class="feather" fill="#6460aa" d="M39.79 14.39c-3.43-.37-7.73 2.25-6.98 7.93L36.05 45.2l9.22-21.76c2-5.44-2.47-9-5.47-9.06" />
<path id="body" fill="#ffffff" d="m34.43 21.44s.93 0 1 .44c-.69.56-2.56.63-2.31 3.63l2.67 19.63s.417 2.327-.33 3c-1.67 1.5-5 1.41-6.72 0-.77-.62-.77-1.49-.617-2.9.792-6.84 2.557-16.78 2.677-18.95.345-1.91.06-4.415 1.88-4.85" />
</svg>
<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(".controls").addEventListener("click", animate);
</script>
</body>