-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
127 lines (124 loc) · 10.1 KB
/
index.html
File metadata and controls
127 lines (124 loc) · 10.1 KB
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Birthday Animation CSS</title>
<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="birthday-button">
<button class="birthday-button__button">
<svg class="birthday-button__cake" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 76.609 47.643">
<defs>
<g id="candle" transform="translate(-48.82 -137.74)">
<rect ry=".567" y="147.888" x="72.548" height="12.001" width="4.252" fill="#ececec"></rect>
<g class="candle__flame">
<path class="candle__flame-outer" d="M75.672 145.92c.608 1.207.086 2.224-.749 2.224s-1.512-.037-1.512-1.388.558-3.566 1.98-3.973c1.007-.288-.855.884.281 3.138z" fill="#f60"></path>
<path class="candle__flame-inner" d="M75.081 146.449c.41.51.266 1.043-.13 1.128-.394.084-.682-.228-.822-.866 0 0-.13-1.382.502-1.719.447-.238-.315.505.45 1.457z" fill="#ff0"></path>
</g>
<g style="display: none">
<path id="flame-outer" d="M73.676 145.92c-.609 1.207-.086 2.224.749 2.224s1.511-.037 1.511-1.388-.557-3.566-1.98-3.973c-1.006-.288.856.884-.28 3.138z" fill="#f60"></path>
<path id="flame-inner" d="M74.267 146.449c-.41.51-.266 1.043.129 1.128.395.084.683-.228.823-.866 0 0 .13-1.382-.502-1.719-.447-.238.315.505-.45 1.457z" fill="#ff0"></path>
</g>
</g>
<clipPath id="face-clip">
<rect transform="translate(-48.82 -138.799)" width="63.5" height="26.458" x="55.374" y="159.984" ry="3.402"></rect>
</clipPath>
<clipPath id="sprinkle-clip">
<rect width="63.5" height="26.458" x="55.374" y="159.984" ry="3.402"></rect>
</clipPath>
<clipPath id="frosting-clip">
<path d="m 58.311339,159.19367 c -1.915439,0 -3.331523,2.04311 -3.986711,3.74446 -0.778328,2.02111 -0.761971,4.73695 0.529167,6.47582 0.861406,1.16012 2.614079,1.3182 4.033715,1.5875 1.321013,0.25059 2.689143,0 4.033714,0 1.344572,0 2.689143,0 4.033715,0 1.344572,0 2.689143,0 4.033715,0 1.344571,0 2.689143,0 4.033714,0 1.344572,0 2.689143,0 4.033715,0 1.344572,0 2.689143,0 4.033715,0 1.344572,0 2.689143,0 4.033715,0 1.344571,0 2.689143,0 4.033714,0 1.344572,0 2.689143,0 4.033715,0 1.344572,0 2.689143,0 4.033715,0 1.344573,0 2.689143,0 4.033713,0 1.34457,0 2.68915,0 4.03372,0 1.34457,0 2.68914,0 4.03371,0 1.34457,0 2.71271,0.25059 4.03372,0 1.41963,-0.2693 3.17231,-0.42738 4.03371,-1.5875 1.29114,-1.73887 1.3075,-4.45471 0.52917,-6.47582 -0.65519,-1.70135 -2.07128,-3.74446 -3.98672,-3.74446 z" style="fill:#ff0041;fill-opacity:0.53424659;fill-rule:nonzero;stroke:none;stroke-width:0.90433162;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"></path>
</clipPath>
<g id="sprinkles" transform="translate(63.93)">
<rect class="cake__sprinkle" transform="rotate(-44.064)" ry=".567" y="167.592" x="-91.837" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(127.01)" ry=".567" y="165.35" x="76.642" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(85.232)" width="3.307" height="1.228" x="182.37" y="3.842" ry=".567"></rect>
<rect class="cake__sprinkle" transform="rotate(136.794)" ry=".567" y="-137.013" x="122.349" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(-28.569)" width="3.307" height="1.228" x="-90.997" y="160.466" ry=".567"></rect>
<rect class="cake__sprinkle" transform="rotate(-134.37)" ry=".567" y="-124.272" x="-138.396" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(-37.152)" width="3.307" height="1.228" x="-101.107" y="155.28" ry=".567"></rect>
<rect class="cake__sprinkle" transform="rotate(-72.723)" ry=".567" y="77.322" x="-169.664" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(36.566)" width="3.307" height="1.228" x="124.338" y="135.065" ry=".567"></rect>
<rect class="cake__sprinkle" transform="rotate(-45)" ry=".567" y="150.009" x="-111.692" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(30)" width="3.307" height="1.228" x="119.879" y="141.701" ry=".567"></rect>
<rect class="cake__sprinkle" transform="rotate(-55.914)" ry=".567" y="139.024" x="-129.555" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(-30)" width="3.307" height="1.228" x="-60.133" y="178.671" ry=".567"></rect>
<rect class="cake__sprinkle" transform="rotate(45)" ry=".567" y="95.647" x="162.293" height="1.228" width="3.307"></rect>
<rect class="cake__sprinkle" transform="rotate(45)" ry=".567" y="133.647" x="124.293" height="1.228" width="3.307"></rect>
</g>
<path id="frosting" d="M58.311 159.194c-1.915 0-3.283-.087-3.986 1.098-.392.661-.073 1.766.529 2.243 1.054.834 2.689 0 4.034 0H115.36c1.344 0 2.979.834 4.033 0 .602-.477.921-1.582.53-2.243-.703-1.185-2.072-1.098-3.987-1.098z"></path>
<path class="cake__frosting cake__frosting--end" d="M58.311 159.194c-1.915 0-3.354 2.034-3.986 3.744-.57 1.537-.953 4.189.529 4.888 1.454.687 2.425-2.645 4.034-2.645 1.608 0 2.425 2.645 4.033 2.645 1.608 0 2.426-2.645 4.034-2.645 1.608 0 2.426 2.645 4.034 2.645 1.608 0 2.425-2.645 4.033-2.645 1.608 0 2.426 2.645 4.034 2.645 1.608 0 2.426-2.645 4.034-2.645 1.608 0 2.426 2.645 4.034 2.645 1.608 0 2.425-2.645 4.033-2.645 1.608 0 2.426 2.645 4.034 2.645 1.608 0 2.436-2.83 4.034-2.645 1.936.222 2.084 4.233 4.033 4.233 1.95 0 2.098-4.01 4.034-4.233 1.598-.184 2.426 2.645 4.034 2.645 1.608 0 2.426-2.645 4.034-2.645 1.608 0 2.58 3.332 4.033 2.645 1.482-.7 1.098-3.35.53-4.888-.633-1.71-2.072-3.744-3.987-3.744z"></path>
</defs>
<g class="cake-decoration" transform="translate(-48.82 -138.799)">
<g class="cake__frosting-group" clip-path="url(#frosting-clip)">
<g class="cake__frosting cake__frosting--start">
<use xlink:href="#frosting"></use>
</g>
<g class="cake__frosting cake__frosting--duplicate">
<rect class="cake__frosting-patch" width="20" height="5" x="110" y="159.25"></rect>
<use xlink:href="#frosting"></use>
</g>
</g>
<g class="cake__sprinkles-group" clip-path="url(#sprinkle-clip)">
<g class="cake__sprinkles cake__sprinkles--initial">
<use xlink:href="#sprinkles"></use>
</g>
<g class="cake__sprinkles cake__sprinkles--duplicate">
<use xlink:href="#sprinkles"></use>
</g>
</g>
</g>
<g clip-path="url(#face-clip)">
<g class="cake__face" transform="translate(-48.82 -138.799)">
<g class="cake__eyes">
<g class="cake__eye" transform="matrix(1.38031 0 0 1.38031 34.723 -33.58)">
<circle class="cake__eye-body" cx="29.86" cy="149.022" r="2.457"></circle>
<circle class="cake__eye-pupil" cx="28.773" cy="148.162" r=".756"></circle>
</g>
<g class="cake__eye" transform="matrix(1.38031 0 0 1.38031 57.092 -33.58)">
<circle class="cake__eye-body" r="2.457" cy="149.022" cx="29.86"></circle>
<circle class="cake__eye-pupil" r=".756" cy="148.162" cx="28.773"></circle>
</g>
</g>
<g class="cake__mouth">
<path class="cake__mouth-opening" d="M83.607 174.436a3.652 3.652 0 003.518 2.674 3.652 3.652 0 003.515-2.674z" stroke-width="1.1801650499999998" stroke-linecap="round" stroke-linejoin="round"></path>
<path class="cake__tongue" d="M88.836 175.492a3.113 2.329 0 00-2.869 1.425 3.652 3.652 0 001.158.192 3.652 3.652 0 002.899-1.44 3.113 2.329 0 00-1.188-.177z"></path>
</g>
</g>
<g class="cake__face--straining" transform="translate(-48.82 -138.799)">
<path d="M100.673 173.886l-5.248-2.073 5.713-1.466M73.574 173.886l5.248-2.073-5.713-1.466" fill="none" stroke="#000" stroke-width="1.01590816" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M85.016 175.773h4.216" fill="none" stroke="#000" stroke-width=".86683468" stroke-linecap="round"></path>
</g>
</g>
<g class="cake__candles">
<g class="cake__candle">
<use xlink:href="#candle"></use>
</g>
<g class="cake__candle">
<use xlink:href="#candle" transform="translate(25 0)"></use>
</g>
<g class="cake__candle">
<use xlink:href="#candle" transform="translate(12 0.5)"></use>
</g>
</g>
</svg><span class="birthday-button__text" data-splitting="">Happy Birthday!</span>
</button>
</div>
<input id="volume" type="checkbox"/>
<label for="volume" title="Toggle sound">
<svg viewBox="0 0 24 24">
<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"></path>
</svg>
<svg viewBox="0 0 24 24">
<path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"></path>
</svg>
</label>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
<script src='https://unpkg.com/splitting/dist/splitting.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script><script src="./script.js"></script>
</body>
</html>