Skip to content

Tenzing / banners-with-skip

Go to a project
Toggle navigation
Toggle navigation pinning
d5eef4d3 by Dan Rempel
Options

Bosco For approval - 1st set

1 parent 892f7b0c
Inline Side-by-side
Showing 32 changed files with 794 additions and 170 deletions
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
8 .st1{fill:#E1C19C;} 8 .st1{fill:#E1C19C;}
9 .st2{fill:#FFFFFF;} 9 .st2{fill:#FFFFFF;}
10 .st3{fill:#353F4A;} 10 .st3{fill:#353F4A;}
11 .st4{clip-path:url(#eye-right-mask);} 11 .st4{clip-path:url(#clipPathId);}
12 .st5{fill:#F27658;} 12 .st5{fill:#F27658;}
13 #eye-right-lash, #e-large, #e-small{
14 opacity: 0;
15 }
16
13 </style> 17 </style>
14 <g id="face"> 18 <g id="face">
15 <g> 19 <g>
...@@ -33,8 +37,8 @@ ...@@ -33,8 +37,8 @@
33 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5 37 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5
34 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/> 38 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/>
35 <g id="face_x5F_crumbs"> 39 <g id="face_x5F_crumbs">
36 <circle id="e-large" class="st0" cx="59.5" cy="12.8" r="2"/> 40 <circle id="f-large" class="st0" cx="59.5" cy="12.8" r="2"/>
37 <circle id="e_x5F_small" class="st0" cx="61.2" cy="17.3" r="1.3"/> 41 <circle id="f-small" class="st0" cx="61.2" cy="17.3" r="1.3"/>
38 </g> 42 </g>
39 </g> 43 </g>
40 <g id="eyes"> 44 <g id="eyes">
...@@ -47,23 +51,25 @@ ...@@ -47,23 +51,25 @@
47 <defs> 51 <defs>
48 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 52 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
49 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 53 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
50 </defs> 54 <clipPath id="clipPathId">
51 <clipPath id="eye-right-lid"> 55 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
52 <use xlink:href="#eye-right-white" style="overflow:visible;"/>
53 </clipPath> 56 </clipPath>
57 </defs>
54 <g id="eye-right" class="st4"> 58 <g id="eye-right" class="st4">
59 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
60
55 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 61 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
56 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 62 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
57 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8 63 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
58 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6 64 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
59 C53.3,42.8,52.9,42.1,52.3,41.6z"/> 65 C53.3,42.8,52.9,42.1,52.3,41.6z"/>
60 </g> 66 </g>
61 </g> 67 <circle id="e-large" class="st3" cx="54" cy="42" r="0.6"/>
62 <circle id="e-large" class="st3" cx="54.1" cy="42.7" r="0.6"/> 68 <circle id="e-small" class="st3" cx="54" cy="42" r="0.2"/>
63 <circle id="e-small" class="st3" cx="54.2" cy="42.8" r="0.2"/>
64 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2 69 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2
65 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3 70 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3
66 C48.6,43.5,48.4,43.6,48.1,43.6z"/> 71 C48.6,43.5,48.4,43.6,48.1,43.6z"/>
72 </g>
67 </g> 73 </g>
68 <g id="tongue"> 74 <g id="tongue">
69 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/> 75 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/>
...@@ -168,3 +174,5 @@ ...@@ -168,3 +174,5 @@
168 </g> 174 </g>
169 </g> 175 </g>
170 </svg> 176 </svg>
177
178
......
...@@ -4,9 +4,13 @@ ...@@ -4,9 +4,13 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 5
6 <title>HTML5 Ad</title> 6 <title>HTML5 Ad</title>
7
8 <!--
9
7 <script type="text/javascript"> 10 <script type="text/javascript">
8 11
9 // IAB source: modified to allow link testing 12 // IAB source: modified to allow link testing
13
10 var clickTag = "https://boscoandroxys.com"; 14 var clickTag = "https://boscoandroxys.com";
11 function getParameterByName(name) 15 function getParameterByName(name)
12 { 16 {
...@@ -19,6 +23,9 @@ ...@@ -19,6 +23,9 @@
19 } 23 }
20 clickTag = getParameterByName('clickTag'); 24 clickTag = getParameterByName('clickTag');
21 </script> 25 </script>
26 -->
27
28 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
22 29
23 30
24 31
...@@ -46,7 +53,6 @@ ...@@ -46,7 +53,6 @@
46 overflow: hidden; 53 overflow: hidden;
47 cursor: pointer; 54 cursor: pointer;
48 box-sizing: border-box; 55 box-sizing: border-box;
49 background-position: 0 -10px;
50 } 56 }
51 img { 57 img {
52 position: absolute; 58 position: absolute;
...@@ -62,6 +68,7 @@ ...@@ -62,6 +68,7 @@
62 68
63 #border{ 69 #border{
64 border-top: 10px solid #323e48; 70 border-top: 10px solid #323e48;
71 background-position: 0 -10px;
65 72
66 } 73 }
67 .box{ 74 .box{
...@@ -92,15 +99,10 @@ ...@@ -92,15 +99,10 @@
92 99
93 } 100 }
94 #subscribe{ 101 #subscribe{
95 left: 167px;
96 top: 190px;
97 102
98 } 103 right: 15px;
104 bottom: 25px;
99 105
100 #eye-right-lash, #e-large, #e-small{
101 opacity: 0;
102 }
103 #pant{
104 } 106 }
105 107
106 </style> 108 </style>
...@@ -121,13 +123,14 @@ ...@@ -121,13 +123,14 @@
121 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving"> 123 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving">
122 --> 124 -->
123 125
124 <img id="txt" src="assets/txt.png" alt="txt"> <!-- width="238" height="215" --> 126 <img id="txt" src="assets/txt.png" alt="txt">
125 127
126 128
127 <div id="logo"></div> 129 <div id="logo"></div>
128 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33"> 130 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33">
129 131
130 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 132 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
133 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
131 </div> 134 </div>
132 135
133 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 136 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...@@ -140,6 +143,8 @@ ...@@ -140,6 +143,8 @@
140 * embed external svg using ajax 143 * embed external svg using ajax
141 */ 144 */
142 145
146 eyeBuild.initialize();
147
143 var container = $("#logo"); 148 var container = $("#logo");
144 var svgUrl = "assets/logo.svg"; 149 var svgUrl = "assets/logo.svg";
145 150
...@@ -170,17 +175,33 @@ ...@@ -170,17 +175,33 @@
170 for (var i = 0 in box_arr) { 175 for (var i = 0 in box_arr) {
171 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 }); 176 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
172 } 177 }
173 console.log("boxes: " + tl.totalDuration()); 178 /* console.log("boxes: " + tl.totalDuration()); */
174 179
175 180
176 // animate the logo 181 // animate the logo
177 182
178 var eye_tl = new TimelineMax({repeat:12}); 183 var eye_tl = new TimelineMax({repeat:3});
179 eye_tl.to("#eye-right-lid", 2, {scaleY:.1, transformOrigin:"0% 0%", delay:0 }); 184
185 var winkTime = .3;
186 // close eye
187 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
188 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
189 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
190 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
180 191
192 var crumbTime = 1;
193 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
194 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
195 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
196 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
181 197
182 console.log("eye_right: " + eye_tl.totalDuration()); 198 // open eye
199 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
200 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
201 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
202 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
183 203
204 /* console.log("eye_right: " + eye_tl.totalDuration()); */
184 205
185 206
186 var tongue_tl = new TimelineMax(); 207 var tongue_tl = new TimelineMax();
...@@ -192,7 +213,7 @@ ...@@ -192,7 +213,7 @@
192 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 }); 213 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
193 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 }); 214 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
194 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 }); 215 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
195 console.log("tongue: " + tongue_tl.totalDuration()); 216 /* console.log("tongue: " + tongue_tl.totalDuration()); */
196 }; 217 };
197 }); 218 });
198 219
......
...@@ -8,8 +8,12 @@ ...@@ -8,8 +8,12 @@
8 .st1{fill:#E1C19C;} 8 .st1{fill:#E1C19C;}
9 .st2{fill:#FFFFFF;} 9 .st2{fill:#FFFFFF;}
10 .st3{fill:#353F4A;} 10 .st3{fill:#353F4A;}
11 .st4{clip-path:url(#eyewhite-right_1_);} 11 .st4{clip-path:url(#clipPathId);}
12 .st5{fill:#F27658;} 12 .st5{fill:#F27658;}
13 #eye-right-lash, #e-large, #e-small{
14 opacity: 0;
15 }
16
13 </style> 17 </style>
14 <g id="face"> 18 <g id="face">
15 <g> 19 <g>
...@@ -33,37 +37,39 @@ ...@@ -33,37 +37,39 @@
33 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5 37 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5
34 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/> 38 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/>
35 <g id="face_x5F_crumbs"> 39 <g id="face_x5F_crumbs">
36 <circle id="e-large" class="st0" cx="59.5" cy="12.8" r="2"/> 40 <circle id="f-large" class="st0" cx="59.5" cy="12.8" r="2"/>
37 <circle id="e_x5F_small" class="st0" cx="61.2" cy="17.3" r="1.3"/> 41 <circle id="f-small" class="st0" cx="61.2" cy="17.3" r="1.3"/>
38 </g> 42 </g>
39 </g> 43 </g>
40 <g id="eyes"> 44 <g id="eyes">
41 <path id="eyewhite-left" class="st2" d="M31.9,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 45 <path id="eye-left-white" class="st2" d="M31.9,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
42 C30.3,39.1,31.9,40.7,31.9,42.7z"/> 46 C30.3,39.1,31.9,40.7,31.9,42.7z"/>
43 <path id="eye-left-pupil" class="st3" d="M30.4,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8 47 <path id="eye-left-pupil" class="st3" d="M30.4,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
44 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6 48 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
45 C31.4,42.8,31,42.1,30.4,41.6z"/> 49 C31.4,42.8,31,42.1,30.4,41.6z"/>
46 <g id="eye-right_x5F_lid"> 50 <g id="eye-right-group">
47 <defs> 51 <defs>
48 <path id="eyewhite-right" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 52 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
49 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 53 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
50 </defs> 54 <clipPath id="clipPathId">
51 <clipPath id="eyewhite-right_1_"> 55 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
52 <use xlink:href="#eyewhite_x002D_right" style="overflow:visible;"/>
53 </clipPath> 56 </clipPath>
54 <g id="eye-right-pupil" class="st4"> 57 </defs>
55 <path id="eyewhite_x5F_right" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6 58 <g id="eye-right" class="st4">
59 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
60
61 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
56 C53.2,39.1,54.8,40.7,54.8,42.7z"/> 62 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
57 <path id="eye_x5F_right" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8 63 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
58 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6 64 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
59 C53.3,42.8,52.9,42.1,52.3,41.6z"/> 65 C53.3,42.8,52.9,42.1,52.3,41.6z"/>
60 </g> 66 </g>
61 </g> 67 <circle id="e-large" class="st3" cx="54" cy="42" r="0.6"/>
62 <circle id="e-large_1_" class="st3" cx="54.1" cy="42.7" r="0.6"/> 68 <circle id="e-small" class="st3" cx="54" cy="42" r="0.2"/>
63 <circle id="e-small" class="st3" cx="54.2" cy="42.8" r="0.2"/>
64 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2 69 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2
65 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3 70 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3
66 C48.6,43.5,48.4,43.6,48.1,43.6z"/> 71 C48.6,43.5,48.4,43.6,48.1,43.6z"/>
72 </g>
67 </g> 73 </g>
68 <g id="tongue"> 74 <g id="tongue">
69 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/> 75 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/>
...@@ -168,3 +174,5 @@ ...@@ -168,3 +174,5 @@
168 </g> 174 </g>
169 </g> 175 </g>
170 </svg> 176 </svg>
177
178
......
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <path class="st0" d="M41.7,4.1C20.9,4.1,4.1,20.9,4.1,41.6s16.8,37.6,37.6,37.6s37.6-16.8,37.6-37.6S62.3,4.1,41.7,4.1z M46.8,46.3
10 c1.5-2.3,1.5-5.2,0-7.4v-6.7c5.7,3.1,7.9,10.2,4.8,16c-1.1,2-2.8,3.7-4.8,4.8V46.3z M41.8,62.8L29.2,50.2H19.1V35.1h10.1l12.6-12.5
11 V62.8z M63.7,48.2C61.5,56.5,55,63,46.8,65.1v-5.4c9.5-3.1,14.6-13.2,11.6-22.7c-1.8-5.5-6.1-9.8-11.6-11.6v-5.2
12 C59.2,23.3,66.7,35.8,63.7,48.2z"/>
13 </svg>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <title>mute</title>
10 <path class="st0" d="M41.6,4.1C20.9,4.1,4.1,20.9,4.1,41.6s16.8,37.6,37.6,37.6c20.8,0,37.6-16.8,37.6-37.6S62.4,4.1,41.6,4.1z
11 M46.8,32.6c3.9,1.8,6.4,5.8,6.3,10.1v1.8l-6.3-6.3V32.6z M41.8,22.5v10.6l-5.3-5.3L41.8,22.5z M61.1,65.5l-5-5
12 c-2.7,2.2-5.9,3.8-9.3,4.5v-5.3c2.1-0.7,4-1.7,5.8-3L41.8,46v16.8L29.2,50.2H19.1V35.1h11.8L19.1,23.3l3.3-3.3l19.4,19.7l22.6,22.6
13 L61.1,65.5z M61.9,53l-3.8-3.8c0.8-2.1,1.2-4.3,1.3-6.5c-0.1-7.8-5.1-14.7-12.6-17.1v-5.3c10.3,2.4,17.6,11.6,17.6,22.1
14 C64.5,46.1,63.6,49.8,61.9,53z"/>
15 </svg>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <title>pause</title>
10 <path class="st0" d="M41.6,4.1C20.9,4.1,4.1,20.9,4.1,41.6s16.8,37.6,37.6,37.6s37.6-16.8,37.6-37.6S62.4,4.1,41.6,4.1z M36.6,59.9
11 H26.3V23.5h10.3V59.9z M57.2,59.9H46.9V23.5h10.3V59.9z"/>
12 </svg>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 83.3 83.3" style="enable-background:new 0 0 83.3 83.3;" xml:space="preserve">
6 <style type="text/css">
7 .st0{opacity:0.6;fill:#FFFFFF;}
8 </style>
9 <title>play</title>
10 <path class="st0" d="M42.3,21c-12,0-21.7,9.7-21.7,21.7s9.7,21.7,21.7,21.7c12,0,21.7-9.7,21.7-21.7S54.3,21,42.3,21z M37.3,52.6
11 V34.5l14.8,9L37.3,52.6z"/>
12 </svg>
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 <head> 2 <head>
3 3
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5
6 <title>HTML5 Ad</title> 5 <title>HTML5 Ad</title>
6 <!--
7 <script type="text/javascript"> 7 <script type="text/javascript">
8 8
9 // IAB source: modified to allow link testing 9 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton"; 10 var clickTag = "http://thecommonwell.ca/wave";
11 function getParameterByName(name) 11 function getParameterByName(name)
12 { 12 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); 13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
...@@ -19,7 +19,101 @@ ...@@ -19,7 +19,101 @@
19 } 19 }
20 clickTag = getParameterByName('clickTag'); 20 clickTag = getParameterByName('clickTag');
21 </script> 21 </script>
22 -->
23 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
24 <script type="text/javascript">
25 window.onload = function() {
26 eyeBuild.initialize();
27 window.isVideoClick = false;
28
29 var videoPlays = 0;
30 var v0 = false;
31 var v25 = false;
32 var v50 = false;
33 var v75 = false;
34
35 var video = document.getElementById("video");
36 var videoControls = document.getElementById("video-controls");
37 var playButton = document.getElementById("play-pause");
38 var muteButton = document.getElementById("mute");
39
40 playButton.addEventListener("click", function(e) {
41 if (video.paused == true) {
42 play();
43 eyeBuild.doIAT(0);
44 } else {
45 pause();
46 eyeBuild.doIAT(1);
47 }
48 });
49 var play = function(){
50 video.play();
51 videoPlays++;
52 videoControls.className = ""
53 toggleClass(videoControls, "playing");
54 toggleClass(playButton, "playing");
55 }
56 var pause = function(){
57 video.pause();
58 toggleClass(videoControls, "playing");
59 toggleClass(playButton, "playing");
60 }
61 video.addEventListener('ended', function(e){
62 video.currentTime = 0;
63 pause();
64 videoControls.className = "start"
65 v0 = false;
66 v25 = false;
67 v50 = false;
68 v75 = false;
69 eyeBuild.doIAT(9);
70 }, false);
71
72 muteButton.addEventListener("click", function(e) {
73 if (video.muted == true) {
74 eyeBuild.doIAT(4);
75 } else {
76 eyeBuild.doIAT(3);
77 }
78 video.muted = !video.muted;
79 toggleClass(muteButton, "muted");
80 });
22 81
82 // track video plays
83 video.addEventListener('timeupdate', function(e){
84 var pct = video.currentTime / video.duration *100;
85 if (pct > 75 && !v75){
86 v75 = true;
87 eyeBuild.doIAT(8);
88 }else if (pct > 50 && !v50){
89 v50 = true;
90 eyeBuild.doIAT(7);
91 }else if (pct > 25 && !v25){
92 v25 = true;
93 eyeBuild.doIAT(6);
94 }else if (pct > 0 && !v0){
95 v0 = true;
96 eyeBuild.doIAT(5);
97 if(videoPlays>1){
98 eyeBuild.doIAT(10);
99 }
100 }
101 }, false);
102
103 }
104
105
106 function toggleClass(element, toggleClass){
107 var currentClass = element.className;
108 if(currentClass.indexOf(toggleClass) > -1){ //has class
109 newClass = currentClass.replace(toggleClass,"")
110 }else{
111 newClass = currentClass + " " + toggleClass;
112 }
113 element.className = newClass;
114 }
115
116 </script>
23 117
24 118
25 <style> 119 <style>
...@@ -41,7 +135,7 @@ ...@@ -41,7 +135,7 @@
41 position: relative; 135 position: relative;
42 width: 100%; 136 width: 100%;
43 height: 100%; 137 height: 100%;
44 border: 1px solid #939598; 138 border: 1px solid #323e48;
45 background-color: #FFFFFF; 139 background-color: #FFFFFF;
46 overflow: hidden; 140 overflow: hidden;
47 cursor: pointer; 141 cursor: pointer;
...@@ -50,22 +144,137 @@ ...@@ -50,22 +144,137 @@
50 img { 144 img {
51 position: absolute; 145 position: absolute;
52 } 146 }
53 #logos {
54 right: 0px;
55 top: 185px;
56 opacity: 0;
57 }
58 147
59 148
60 /* Custom per ad */ 149 /* Custom per ad */
61
62 body{ 150 body{
63 width: 300px; 151 width: 300px;
64 height: 250px; 152 height: 600px;
153 }
154
155 #click-tag{
156 top:0px;
157 }
158
159 #border{
160 border-top: 10px solid #323e48;
161 background-position: 0 -10px;
162 }
163
164 #border:hover #cta{
165 background-color: #666666;
166 }
167
168 #border:active #cta{
169 background-color: #000000;
170 }
171
172 #video, #video-controls{
173 position: absolute;
174 width: 300px;
175 height: 169px;
176 left:0px;
177 top:140px;
178 }
179 #video-controls.start{
180 background: url(assets/video-poster.jpg) no-repeat center center;
181 opacity:1;
182 }
183 #video-controls.playing {
184 opacity:0;
185 }
186
187 #video-controls:hover {
188 opacity:1;
189 }
190
191 #video-controls button{
192 border: none;
193 cursor: pointer;
194 width: 100%;
195 height: 100%;
196 }
197
198 button#play-pause{
199 background: url(assets/play.svg) no-repeat center center;
200 background-size: 83px 83px;
201 }
202 button#play-pause.playing{
203 background: url(assets/pause.svg) no-repeat 30px 143px;
204 background-size: 20px 20px;
205 }
206 button#play-pause:hover{
207 background-size: 85px 85px;
208 }
209 button#play-pause.playing:hover{
210 background-position: 29px 142px;
211 background-size: 21px 21px;
212 }
213
214
215 button#mute{
216 background: url(assets/mute-un.svg) no-repeat center center;
217 background-size: 20px 20px;
218 position: absolute;
219 width: 22px;
220 height: 22px;
221 left:5px;
222 bottom: 5px;
223 }
224 button#mute.muted{
225 background: url(assets/mute.svg) no-repeat center center;
226 background-size: 20px 20px;
227 }
228
229 button#mute:hover{
230 background-size: 22px 22px;
231 }
232
233 /* no video stuff */
234
235 .box{
236 left:18px;
237 bottom:7px;
238 opacity: 0;
239 }
240
241 #box-xmas{
242 opacity: 1;
65 } 243 }
66 244
67 #blue { 245 #txta, #txtb, #txtc{
68 left: -402px; 246 left: 23px;
247 top: 105px;
248
249 -ms-transform: scale(.5); /* IE 9 */
250 -ms-transform-origin: 0% 0%; /* IE 9 */
251 -webkit-transform: scale(.5); /* Chrome, Safari, Opera */
252 -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
253 transform: scale(.5);
254 transform-origin: 0% 0%;
255 }
256 #txtb{
257 top: 328px;
258 }
259 #txtc{
260 left:169px;
261 top: 447px;
262 }
263
264 #logo{
265 position: absolute;
266 left: 6px;
267 top: 3px;
268 width:182px;
269 height:auto;
270
271 }
272
273 #subscribe{
274
275 right: 15px;
276 bottom: 25px;
277
69 } 278 }
70 279
71 </style> 280 </style>
...@@ -74,25 +283,123 @@ ...@@ -74,25 +283,123 @@
74 283
75 <body> 284 <body>
76 <div id="border"> 285 <div id="border">
77 <img id="img" src="assets/img.jpg">
78 <img id="blue" src="assets/blue.gif">
79 <img id="logos" src="assets/logos.gif">
80 <img id="triangle" src="assets/triangle.png">
81 <img id="check" src="assets/check.gif">
82 286
83 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 287 <img class="box" id="box-xmas" src="assets/box-xmas.jpg" alt="box-xmas">
288 <img class="box" id="box-advent" src="assets/box-advent.jpg" alt="box-advent">
289 <img class="box" id="box-winter" src="assets/box-winter.jpg" alt="box-winter">
290 <img class="box" id="box-spoileddog" src="assets/box-spoileddog.jpg" alt="box-spoileddog">
291 <img class="box" id="box-valentines" src="assets/box-valentines.jpg" alt="box-valentines">
292 <!--
293 <img class="box" id="box-birthday" src="assets/box-birthday.jpg" alt="box-birthday">
294 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving">
295 -->
296
297
298 <img id="txta" src="assets/txta.png" alt="At any given moment...">
299 <img id="txtb" src="assets/txtb.png" alt="your dog could be more adorbs than usual.">
300 <img id="txtc" src="assets/txtc.png" alt="Get your treats ready, with Wufers Cookie Club.">
301
302
303 <div id="logo"></div>
304 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33">
305
306 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
307 <!--<a id="click-tag" href="javascript:window.open(window.clickTag)"></a>-->
308
309 <video id="video" width="272" height="152">
310 <source src="https://player.vimeo.com/external/244123405.sd.mp4?s=d404f28b15e91476ee1496da9417d0325b9c2f6c&profile_id=164" type="video/mp4" class="A">
311 Your browser doesn't support HTML5 video.
312 </video>
313 <div id="video-controls" class="start">
314 <button type="button" id="play-pause" class=""></button>
315 <button type="button" id="mute" class=""></button>
316 </div>
317
84 </div> 318 </div>
85 319
86 <!-- GREENSOCK--> 320 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
87 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 321 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
88 <script> 322 <script>
323
324 $( document ).ready(function() {
325
326 /*
327 * embed external svg using ajax
328 */
329
330 var container = $("#logo");
331 var svgUrl = "assets/logo.svg";
332
333 $.get(svgUrl)
334 .then(injectSvg);
335
336 function injectSvg(xmlDoc) {
337 var svg = $(xmlDoc).find("svg");
338 container.append(svg);
339 animate();
340 }
341
342 /*
343 * animate
344 */
345
346 function animate(){
347
348 // animate the boxes
349
89 var tl = new TimelineMax({repeat:2}); 350 var tl = new TimelineMax({repeat:2});
90 351
91 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 }); 352 var d = 1.25;
92 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 }); 353 var box_arr = ["#box-advent", "#box-winter", "#box-spoileddog", "#box-valentines"];
93 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 }); 354 for (var i = 0 in box_arr) {
94 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 }); 355 tl.to(box_arr[i], 0.6, {opacity:1, ease:Power1.easeInOut, delay:d });
95 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 }); 356 }
357 for (var i = 0 in box_arr) {
358 tl.to(box_arr[i], 0.6, {opacity:0, delay:0 });
359 }
360 /* console.log("boxes: " + tl.totalDuration()); */
361
362
363 // animate the logo
364
365 var eye_tl = new TimelineMax({repeat:3});
366
367 var winkTime = .3;
368 // close eye
369 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
370 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
371 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
372 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
373
374 var crumbTime = 1;
375 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
376 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
377 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
378 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
379
380 // open eye
381 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
382 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
383 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
384 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
385
386 /* console.log("eye_right: " + eye_tl.totalDuration()); */
387
388
389 var tongue_tl = new TimelineMax();
390 var pantDuration = .3;
391 var pantTongueLength = .9;
392 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
393 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
394 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
395 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
396 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
397 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
398 /* console.log("tongue: " + tongue_tl.totalDuration()); */
399 };
400 });
401
402
96 </script> 403 </script>
97 404
98 405
......
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
5 viewBox="0 0 162 83.2" style="enable-background:new 0 0 162 83.2;" xml:space="preserve">
6 <style type="text/css">
7 .st0{fill:#C88F50;}
8 .st1{fill:#E1C19C;}
9 .st2{fill:#FFFFFF;}
10 .st3{fill:#353F4A;}
11 .st4{clip-path:url(#clipPathId);}
12 .st5{fill:#F27658;}
13 #eye-right-lash, #e-large, #e-small{
14 opacity: 0;
15 }
16
17 </style>
18 <g id="face">
19 <g>
20 <path class="st0" d="M25.1,60.2c0-6.6,4.4-12.2,10.4-14c1.4-3.2,1.7-7.4,1.5-10.7c0,0-0.3-6.1-0.4-8.9c-1.1,0.1-2.2,0.3-3.3,0.5
21 c0,0,0-0.1,0-0.1c-0.7-1.5-2.1-4.3-3.2-6.1c-1.7-2.9-3.3-5.1-5.1-6.7c-1.4-1.3-2.8-1.9-4.2-1.7c-1.6,0.2-2.7,0.8-3.3,1.8
22 c-0.6,1-1,2-1.1,3.1c-0.1,0.5-0.2,1-0.2,1.5c0,0.2,0,0.4,0,0.7c0,0.5-0.1,1-0.1,1.5c-0.1,2-0.1,3.5,0.1,4.9
23 c0.1,0.7,0.3,1.3,0.4,1.9c0.2,0.9,0.4,1.7,0.5,2.5c0,0.3-0.1,0.8-0.3,1.2c-0.1,0.3-0.2,0.7-0.3,1c-0.2,0.9-0.1,1.7,0.1,2.4
24 c0.4,1.2,1.2,2.2,1.9,3.2c0.1,0.2,0.3,0.4,0.4,0.6c0.5,0.7,0.9,1.3,1.1,1.8c0.3,0.8,0.3,1.8,0.3,2.8c0,0.2,0,0.4,0,0.6
25 c0,0.7-0.2,1.6-0.4,2.5c-0.3,1.3-0.6,2.7-0.5,3.9c0.3,2.2,2.2,6.7,2.8,7.7c0.8,1.3,1.9,2.2,3.1,2.8C25.1,60.7,25.1,60.5,25.1,60.2
26 z"/>
27 <path class="st0" d="M63.1,25.9c0.1-0.7,0.2-1.5,0.2-2.4c-0.1,0-0.2,0-0.3,0c-0.7,0-1.3-0.4-1.6-1c-0.2,0.1-0.5,0.1-0.8,0.1
28 c-1.4,0-2.5-1.1-2.5-2.5c0,0-0.1,0-0.1,0c-1.6,0-3-1.3-3-3c0-1,0.5-1.8,1.2-2.4c-0.4-0.5-0.6-1.1-0.6-1.8c-0.5,0.3-1,0.6-1.4,1.1
29 c-1.8,1.7-3.4,3.8-5.1,6.7c-1.1,1.9-2.5,4.7-3.2,6.1c0,0,0,0.1,0,0.1c-1-0.2-1.9-0.3-2.8-0.4c-0.2,2.8-0.4,8.8-0.4,8.8
30 c-0.2,3.3,0.1,7.5,1.5,10.7c6,1.8,10.4,7.4,10.4,14c0,0.2,0,0.4,0,0.6c1.3-0.8,2.1-1.8,2.6-2.7c0.7-1.1,2.5-5.5,2.8-7.7
31 c0.2-1.1-0.2-2.5-0.5-3.9c-0.2-1-0.4-1.9-0.4-2.5c0-0.2,0-0.4,0-0.6c0-1,0-2,0.3-2.8c0.2-0.5,0.5-1.1,1.1-1.8
32 c0.1-0.2,0.3-0.4,0.4-0.6c0.7-1,1.5-2,1.9-3.2c0.3-0.8,0.3-1.5,0.1-2.4c-0.1-0.3-0.2-0.7-0.3-1c-0.1-0.4-0.3-0.9-0.3-1.2
33 c0-0.8,0.2-1.6,0.5-2.5C62.8,27.2,63,26.6,63.1,25.9z"/>
34 </g>
35 <path class="st1" d="M23.8,17.7c-1.3-1.5-3.5-1.9-4.4,0.4c-0.7,1.9-0.6,4.1-0.6,6.1c0,2.3,1.5,3.9,1.8,6.2
36 c-0.5,3.5-0.2,5.1,2.2,6.1c2.3-3.7,6.6-4.3,6.9-7.2C30,26.7,25.3,19.3,23.8,17.7z"/>
37 <path class="st1" d="M60.2,22.7c-1.2-0.2-2-1.2-2-2.5c0,0-0.1,0-0.1,0c-1.5,0-2.7-1.1-2.9-2.5c-1.6,1.8-6.1,9-5.9,11.5
38 c0.3,2.9,4.6,3.5,6.9,7.2c2.4-1,2.7-2.6,2.2-6.1c0.3-2.3,1.7-3.9,1.8-6.2C60.2,23.6,60.2,23.2,60.2,22.7z"/>
39 <g id="face_x5F_crumbs">
40 <circle id="f-large" class="st0" cx="59.5" cy="12.8" r="2"/>
41 <circle id="f-small" class="st0" cx="61.2" cy="17.3" r="1.3"/>
42 </g>
43 </g>
44 <g id="eyes">
45 <path id="eye-left-white" class="st2" d="M31.9,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
46 C30.3,39.1,31.9,40.7,31.9,42.7z"/>
47 <path id="eye-left-pupil" class="st3" d="M30.4,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
48 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
49 C31.4,42.8,31,42.1,30.4,41.6z"/>
50 <g id="eye-right-group">
51 <defs>
52 <path id="eye-right-mask" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
53 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
54 <clipPath id="clipPathId">
55 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
56 </clipPath>
57 </defs>
58 <g id="eye-right" class="st4">
59 <use xlink:href="#eye-right-mask" style="overflow:visible;"/>
60
61 <path id="eye-right-white" class="st2" d="M54.8,42.7c0,2-1.6,3.6-3.6,3.6c-2,0-3.6-1.6-3.6-3.6c0-2,1.6-3.6,3.6-3.6
62 C53.2,39.1,54.8,40.7,54.8,42.7z"/>
63 <path id="eye-right-pupil" class="st3" d="M52.3,41.6c0,0,0,0.1,0,0.1c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8
64 c0-0.3,0.1-0.5,0.3-0.7c-0.1,0-0.2,0-0.3,0c-1.4,0-2.6,1.1-2.6,2.6c0,1.4,1.1,2.6,2.6,2.6c1.4,0,2.6-1.1,2.6-2.6
65 C53.3,42.8,52.9,42.1,52.3,41.6z"/>
66 </g>
67 <circle id="e-large" class="st3" cx="54" cy="42" r="0.6"/>
68 <circle id="e-small" class="st3" cx="54" cy="42" r="0.2"/>
69 <path id="eye-right-lash" class="st3" d="M48.1,43.6c-0.1,0-0.3,0-0.4-0.1c-0.3-0.2-0.5-0.7-0.2-1c0.8-1.3,2.2-2,3.7-2
70 c1.5,0,2.9,0.8,3.7,2c0.2,0.4,0.1,0.8-0.2,1c-0.4,0.2-0.8,0.1-1-0.2c-0.5-0.8-1.4-1.3-2.4-1.3s-1.9,0.5-2.4,1.3
71 C48.6,43.5,48.4,43.6,48.1,43.6z"/>
72 </g>
73 </g>
74 <g id="tongue">
75 <circle id="cheek" class="st2" cx="39.8" cy="59.8" r="14.5"/>
76 <path id="normal" class="st5" d="M39.8,57.5c0,2.7-2.2,4.9-4.9,4.9h0v0.5c0,2.7,2.2,4.9,4.9,4.9c2.7,0,4.9-2.2,4.9-4.9v-0.5
77 C42,62.4,39.8,60.2,39.8,57.5z"/>
78 <path id="pant" class="st5" d="M34.8,62.4l0,2.9v0.5c0,2.7,2.2,4.9,4.9,4.9c2.7,0,4.9-2.2,4.9-4.9v-3.4H34.8z"/>
79 <g id="nose">
80 <circle class="st3" cx="39.8" cy="52.4" r="3.2"/>
81 </g>
82 </g>
83 <g id="logo">
84 <g id="cookieclub">
85 <path class="st3" d="M80.5,54.3c0.4,0.2,0.6,0.5,0.6,0.8c0,0.2,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.2,0-0.3-0.1
86 c-0.1,0-0.1-0.1-0.2-0.1c-0.1-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.1,0-0.3,0-0.4,0c-0.6,0-1,0.2-1.3,0.5
87 c-0.3,0.4-0.5,0.8-0.5,1.4c0,0.5,0.2,1,0.5,1.4c0.3,0.4,0.7,0.5,1.2,0.5c0.4,0,0.6,0,0.8-0.1c0,0,0.1-0.1,0.2-0.1
88 c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.2,0c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.4-0.3,0.5
89 c-0.2,0.2-0.5,0.3-0.8,0.4c-0.3,0.1-0.7,0.1-1.1,0.1c-0.6,0-1.1-0.1-1.5-0.4c-0.4-0.3-0.8-0.6-1-1.1c-0.2-0.5-0.4-1-0.4-1.6
90 c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.8,1.1-1.1c0.5-0.3,1-0.4,1.5-0.4C79.6,54,80.1,54.1,80.5,54.3z"/>
91 <path class="st3" d="M88,58.8c-0.3,0.5-0.6,0.9-1.1,1.1c-0.5,0.3-1,0.4-1.6,0.4c-0.6,0-1.1-0.1-1.6-0.4c-0.5-0.3-0.8-0.6-1.1-1.1
92 c-0.3-0.5-0.4-1-0.4-1.6c0-0.6,0.1-1.1,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4c0.6,0,1.1,0.1,1.6,0.4
93 c0.5,0.3,0.8,0.6,1.1,1.1c0.3,0.5,0.4,1,0.4,1.6C88.4,57.8,88.2,58.3,88,58.8z M86.8,56.2c-0.2-0.3-0.4-0.5-0.6-0.7
94 c-0.3-0.2-0.5-0.2-0.9-0.2c-0.3,0-0.6,0.1-0.9,0.2c-0.3,0.2-0.5,0.4-0.6,0.7c-0.2,0.3-0.2,0.6-0.2,1c0,0.4,0.1,0.7,0.2,1
95 c0.2,0.3,0.4,0.5,0.6,0.7c0.3,0.2,0.5,0.2,0.9,0.2c0.3,0,0.6-0.1,0.9-0.2c0.3-0.2,0.5-0.4,0.6-0.7c0.2-0.3,0.2-0.6,0.2-1
96 C87,56.8,86.9,56.5,86.8,56.2z"/>
97 <path class="st3" d="M95.4,58.8c-0.3,0.5-0.6,0.9-1.1,1.1c-0.5,0.3-1,0.4-1.6,0.4c-0.6,0-1.1-0.1-1.6-0.4
98 c-0.5-0.3-0.8-0.6-1.1-1.1c-0.3-0.5-0.4-1-0.4-1.6c0-0.6,0.1-1.1,0.4-1.6c0.3-0.5,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.4
99 c0.6,0,1.1,0.1,1.6,0.4c0.5,0.3,0.8,0.6,1.1,1.1c0.3,0.5,0.4,1,0.4,1.6C95.8,57.8,95.6,58.3,95.4,58.8z M94.2,56.2
100 c-0.2-0.3-0.4-0.5-0.6-0.7s-0.5-0.2-0.9-0.2c-0.3,0-0.6,0.1-0.9,0.2c-0.3,0.2-0.5,0.4-0.6,0.7c-0.2,0.3-0.2,0.6-0.2,1
101 c0,0.4,0.1,0.7,0.2,1c0.2,0.3,0.4,0.5,0.6,0.7c0.3,0.2,0.5,0.2,0.9,0.2c0.3,0,0.6-0.1,0.9-0.2c0.3-0.2,0.5-0.4,0.6-0.7
102 c0.2-0.3,0.2-0.6,0.2-1C94.4,56.8,94.3,56.5,94.2,56.2z"/>
103 <path class="st3" d="M102.6,59.5c0,0.2-0.1,0.3-0.2,0.5c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2l-2-2.2l-0.6,0.5v1.2
104 c0,0.2-0.1,0.4-0.2,0.5c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.5v-7c0-0.2,0.1-0.4,0.2-0.5
105 s0.3-0.2,0.5-0.2c0.2,0,0.4,0.1,0.5,0.2s0.2,0.3,0.2,0.5v4.2l2.4-2.3c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.4,0.2
106 c0.1,0.1,0.2,0.3,0.2,0.4c0,0.2-0.1,0.4-0.3,0.5l-1.7,1.6l2,2.2C102.5,59.1,102.6,59.3,102.6,59.5z"/>
107 <path class="st3" d="M104.1,53.3c-0.1-0.1-0.2-0.2-0.2-0.4v-0.2c0-0.2,0.1-0.4,0.2-0.4c0.1-0.1,0.3-0.1,0.5-0.1
108 c0.3,0,0.4,0,0.6,0.1s0.2,0.2,0.2,0.4v0.2c0,0.2-0.1,0.4-0.2,0.4c-0.1,0.1-0.3,0.1-0.6,0.1C104.4,53.4,104.2,53.3,104.1,53.3z
109 M105.1,60c-0.1,0.1-0.3,0.2-0.5,0.2s-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.5v-4.7c0-0.2,0.1-0.4,0.2-0.5
110 c0.1-0.1,0.3-0.2,0.5-0.2s0.4,0.1,0.5,0.2c0.1,0.1,0.2,0.3,0.2,0.5v4.7C105.3,59.7,105.3,59.9,105.1,60z"/>
111 <path class="st3" d="M112.4,57.5c-0.1,0.1-0.3,0.2-0.5,0.2h-3.7c0.1,0.4,0.3,0.8,0.6,1c0.3,0.3,0.7,0.4,1.1,0.4
112 c0.3,0,0.6,0,0.7-0.1c0.2-0.1,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.1,0.2-0.1c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.3,0.1,0.4,0.2
113 c0.1,0.1,0.2,0.2,0.2,0.4c0,0.2-0.1,0.4-0.3,0.6c-0.2,0.2-0.5,0.3-0.9,0.4c-0.4,0.1-0.7,0.2-1.1,0.2c-0.6,0-1.2-0.1-1.7-0.4
114 c-0.5-0.3-0.8-0.6-1.1-1.1c-0.3-0.5-0.4-1-0.4-1.6c0-0.6,0.1-1.2,0.4-1.7c0.3-0.5,0.6-0.9,1.1-1.1c0.4-0.3,0.9-0.4,1.4-0.4
115 c0.5,0,1,0.1,1.4,0.4c0.4,0.3,0.8,0.6,1.1,1.1c0.3,0.5,0.4,1,0.4,1.5C112.6,57.2,112.6,57.3,112.4,57.5z M108.2,56.5h3v-0.1
116 c0-0.3-0.2-0.6-0.5-0.8c-0.3-0.2-0.6-0.3-1-0.3C108.9,55.3,108.4,55.7,108.2,56.5z"/>
117 <path class="st3" d="M121.3,54.3c0.4,0.2,0.6,0.5,0.6,0.8c0,0.2,0,0.3-0.1,0.4c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.2,0-0.3-0.1
118 c-0.1,0-0.1-0.1-0.2-0.1c-0.1-0.1-0.1-0.1-0.2-0.1c-0.1,0-0.2-0.1-0.3-0.1c-0.1,0-0.3,0-0.4,0c-0.6,0-1,0.2-1.3,0.5
119 c-0.3,0.4-0.5,0.8-0.5,1.4c0,0.5,0.2,1,0.5,1.4c0.3,0.4,0.7,0.5,1.2,0.5c0.4,0,0.6,0,0.8-0.1c0,0,0.1-0.1,0.2-0.1
120 c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.2,0c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.4-0.3,0.5
121 c-0.2,0.2-0.5,0.3-0.8,0.4c-0.3,0.1-0.7,0.1-1.1,0.1c-0.6,0-1.1-0.1-1.5-0.4c-0.4-0.3-0.8-0.6-1-1.1c-0.2-0.5-0.4-1-0.4-1.6
122 c0-0.6,0.1-1.2,0.4-1.6c0.3-0.5,0.6-0.8,1.1-1.1c0.5-0.3,1-0.4,1.5-0.4C120.3,54,120.9,54.1,121.3,54.3z"/>
123 <path class="st3" d="M124.6,60c-0.1,0.1-0.3,0.2-0.5,0.2c-0.2,0-0.3-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.5v-7
124 c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.3,0.1,0.5,0.2s0.2,0.3,0.2,0.5v7C124.8,59.7,124.7,59.9,124.6,60z"/>
125 <path class="st3" d="M131.7,54.3c0.1,0.1,0.2,0.3,0.2,0.5v2.9c0,0.8-0.2,1.5-0.7,1.9c-0.4,0.5-1.1,0.7-1.9,0.7
126 c-0.8,0-1.5-0.2-1.9-0.7c-0.4-0.5-0.7-1.1-0.7-1.9v-2.9c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.4,0.1,0.5,0.2
127 c0.1,0.1,0.2,0.3,0.2,0.5v2.9c0,0.5,0.1,0.8,0.3,1c0.2,0.2,0.5,0.3,0.9,0.3c0.4,0,0.7-0.1,0.9-0.3c0.2-0.2,0.3-0.6,0.3-1v-2.9
128 c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2S131.6,54.2,131.7,54.3z"/>
129 <path class="st3" d="M138.4,54.4c0.4,0.3,0.8,0.6,1,1.1s0.4,1,0.4,1.6s-0.1,1.1-0.4,1.6c-0.2,0.5-0.6,0.9-1,1.1
130 c-0.4,0.3-0.9,0.4-1.4,0.4c-0.4,0-0.7-0.1-1-0.2s-0.6-0.3-0.8-0.5v0.1c0,0.2-0.1,0.4-0.2,0.5c-0.1,0.1-0.3,0.2-0.5,0.2
131 c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.5v-7.1c0-0.2,0.1-0.4,0.2-0.5c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.4,0.1,0.5,0.2
132 c0.1,0.1,0.2,0.3,0.2,0.5v2.4c0.2-0.2,0.4-0.4,0.8-0.6c0.3-0.2,0.7-0.3,1-0.3C137.5,54,138,54.1,138.4,54.4z M138,58.5
133 c0.3-0.4,0.5-0.8,0.5-1.4c0-0.5-0.2-1-0.5-1.4c-0.3-0.4-0.7-0.5-1.2-0.5c-0.5,0-0.9,0.2-1.2,0.5c-0.3,0.4-0.5,0.8-0.5,1.4
134 c0,0.5,0.2,1,0.5,1.4c0.3,0.4,0.7,0.5,1.2,0.5C137.3,59.1,137.7,58.9,138,58.5z"/>
135 </g>
136 <g id="wufers">
137 <path class="st3" d="M98.9,35c0.3,0.3,0.4,0.6,0.4,1v6.1c0,1.7-0.5,3.1-1.4,4.1c-1,1-2.3,1.5-4.1,1.5c-1.8,0-3.1-0.5-4.1-1.5
138 c-0.9-1-1.4-2.3-1.4-4.1V36c0-0.4,0.1-0.8,0.4-1c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.8,0.1,1,0.4c0.3,0.3,0.4,0.6,0.4,1v6.1
139 c0,1,0.2,1.7,0.7,2.2c0.4,0.5,1.1,0.7,2,0.7c0.9,0,1.5-0.2,2-0.7c0.4-0.5,0.7-1.2,0.7-2.2V36c0-0.4,0.1-0.8,0.4-1
140 c0.3-0.3,0.6-0.4,1-0.4C98.3,34.6,98.6,34.7,98.9,35z"/>
141 <path class="st3" d="M107.6,32.6c-0.2,0.3-0.3,0.7-0.3,1v1.1h2.2c0.4,0,0.7,0.1,1,0.4c0.3,0.2,0.4,0.6,0.4,1c0,0.4-0.1,0.7-0.4,1
142 s-0.6,0.4-1,0.4h-2.2V46c0,0.4-0.1,0.8-0.4,1c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.8-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1v-8.5h-1.3
143 c-0.4,0-0.7-0.1-1-0.4c-0.3-0.2-0.4-0.6-0.4-1c0-0.4,0.1-0.7,0.4-1c0.3-0.2,0.6-0.4,1-0.4h1.3v-1.1c0-1.2,0.4-2.2,1.2-2.9
144 s2-1.1,3.6-1.1c0.6,0,1.1,0.1,1.6,0.4c0.4,0.2,0.7,0.6,0.7,1.1c0,0.4-0.1,0.7-0.3,0.9c-0.2,0.2-0.5,0.4-0.8,0.4
145 c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-0.4-0.1-0.7-0.1-1-0.1C108.2,32.2,107.8,32.3,107.6,32.6z"/>
146 <path class="st3" d="M123.9,41.6c-0.3,0.2-0.6,0.4-1,0.4h-8c0.2,0.9,0.6,1.7,1.3,2.2c0.7,0.5,1.5,0.8,2.3,0.8
147 c0.7,0,1.2-0.1,1.5-0.2s0.7-0.2,0.9-0.4c0.2-0.1,0.4-0.2,0.4-0.3c0.3-0.1,0.6-0.2,0.8-0.2c0.3,0,0.6,0.1,0.9,0.4
148 c0.2,0.2,0.4,0.5,0.4,0.8c0,0.4-0.2,0.8-0.7,1.2c-0.4,0.4-1.1,0.7-1.8,0.9c-0.8,0.3-1.5,0.4-2.3,0.4c-1.3,0-2.5-0.3-3.5-0.8
149 c-1-0.6-1.8-1.3-2.3-2.3c-0.5-1-0.8-2.1-0.8-3.3c0-1.4,0.3-2.6,0.9-3.6c0.6-1,1.3-1.8,2.3-2.4c0.9-0.6,2-0.8,3-0.8
150 c1.1,0,2.1,0.3,3,0.9c0.9,0.6,1.7,1.4,2.3,2.3c0.6,1,0.8,2,0.8,3.2C124.3,41.1,124.2,41.4,123.9,41.6z M114.9,39.6h6.3v-0.2
151 c-0.1-0.7-0.4-1.3-1-1.7c-0.6-0.5-1.3-0.7-2-0.7C116.4,37,115.3,37.8,114.9,39.6z"/>
152 <path class="st3" d="M135,34.7c0.3,0.3,0.5,0.6,0.5,1c0,0.5-0.1,0.9-0.4,1.1c-0.3,0.2-0.6,0.4-0.9,0.4c-0.2,0-0.5-0.1-0.8-0.2
153 c0,0-0.2,0-0.3-0.1c-0.2,0-0.3-0.1-0.5-0.1c-0.4,0-0.8,0.1-1.2,0.4c-0.4,0.3-0.7,0.6-1,1.2c-0.2,0.5-0.4,1.1-0.4,1.9V46
154 c0,0.4-0.1,0.8-0.4,1c-0.3,0.3-0.6,0.4-1,0.4c-0.4,0-0.8-0.1-1-0.4c-0.3-0.3-0.4-0.6-0.4-1V36c0-0.4,0.1-0.8,0.4-1
155 c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.8,0.1,1,0.4c0.3,0.3,0.4,0.6,0.4,1v0.3c0.4-0.7,0.9-1.2,1.6-1.5c0.7-0.3,1.4-0.5,2.2-0.5
156 C134.3,34.3,134.7,34.5,135,34.7z"/>
157 <path class="st3" d="M136.6,44.7c0-0.4,0.2-0.8,0.6-1.1c0.2-0.1,0.5-0.2,0.7-0.2c0.3,0,0.7,0.2,1,0.5c0.5,0.5,1,0.9,1.5,1.1
158 c0.5,0.2,1.2,0.4,1.9,0.4c1.3,0,1.9-0.5,1.9-1.4c0-0.5-0.2-0.8-0.6-1.1c-0.4-0.2-1.1-0.5-2-0.7c-0.9-0.3-1.7-0.5-2.3-0.8
159 c-0.6-0.3-1.1-0.6-1.5-1.2s-0.6-1.2-0.6-2.1c0-0.8,0.2-1.4,0.7-2c0.4-0.6,1-1,1.7-1.3c0.7-0.3,1.5-0.5,2.3-0.5
160 c0.8,0,1.6,0.2,2.5,0.5c0.8,0.3,1.5,0.8,1.9,1.3c0.2,0.3,0.3,0.5,0.3,0.9c0,0.4-0.2,0.7-0.5,0.9c-0.2,0.2-0.5,0.3-0.8,0.3
161 c-0.4,0-0.6-0.1-0.9-0.3c-0.3-0.4-0.7-0.6-1.1-0.8c-0.5-0.2-1-0.3-1.6-0.3c-1.2,0-1.8,0.4-1.8,1.3c0,0.4,0.1,0.6,0.3,0.9
162 c0.2,0.2,0.5,0.4,0.9,0.5c0.3,0.1,0.8,0.3,1.5,0.4c0.9,0.2,1.6,0.5,2.2,0.7c0.6,0.3,1.1,0.7,1.5,1.2c0.4,0.5,0.6,1.2,0.6,2.1
163 c0,0.8-0.2,1.5-0.7,2.1c-0.5,0.6-1.1,1-1.8,1.3c-0.7,0.3-1.5,0.5-2.3,0.5c-1.1,0-2-0.2-3-0.5s-1.7-0.9-2.2-1.7
164 C136.7,45.3,136.6,45,136.6,44.7z"/>
165 <path class="st3" d="M83.3,34.5L83.3,34.5c-0.8,0-1.4,0.7-1.4,1.5c0,1.2,0,4.3,0,5.8c0,1.7-1.1,3.1-2.3,3.1
166 c-0.5,0-1.2-0.2-1.6-0.7c-0.4-0.4-0.6-1.1-0.6-1.6v-4.2c0-0.8-0.3-1.4-1.1-1.4c-0.9-0.1-1.4,0.5-1.4,1.4v4.3
167 c0,0.7-0.3,1.3-0.8,1.8c-0.3,0.4-1,0.5-1.4,0.5c-1.3,0-2.3-1.4-2.3-3.1c0-2.7,0-5.8,0-5.8c0-0.8-0.6-1.5-1.4-1.5c0,0,0,0,0,0
168 c-0.8,0-1.4,0.6-1.5,1.4c0,0,0,3.1,0,5.8c0,3.4,2.3,6,5.2,6c1.5,0,2.5-0.9,3.4-1.9c0.9,1,1.8,1.9,3.4,1.9c2.8,0,5.2-2.7,5.2-6
169 c0-1.4,0-4.6,0-5.8C84.8,35.1,84.1,34.5,83.3,34.5z"/>
170 </g>
171 <g id="logo-crumbs">
172 <circle id="u_x5F_large" class="st3" cx="91.8" cy="29.5" r="2.3"/>
173 <circle id="u_x5F_small" class="st3" cx="96.6" cy="31.6" r="1.5"/>
174 </g>
175 </g>
176 </svg>
177
178
...@@ -4,10 +4,14 @@ ...@@ -4,10 +4,14 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 5
6 <title>HTML5 Ad</title> 6 <title>HTML5 Ad</title>
7
8 <!--
9
7 <script type="text/javascript"> 10 <script type="text/javascript">
8 11
9 // IAB source: modified to allow link testing 12 // IAB source: modified to allow link testing
10 var clickTag = "https://businesstobruce.com/wiarton"; 13
14 var clickTag = "https://boscoandroxys.com";
11 function getParameterByName(name) 15 function getParameterByName(name)
12 { 16 {
13 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); 17 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
...@@ -19,6 +23,9 @@ ...@@ -19,6 +23,9 @@
19 } 23 }
20 clickTag = getParameterByName('clickTag'); 24 clickTag = getParameterByName('clickTag');
21 </script> 25 </script>
26 -->
27
28 <script type="text/javascript" src="https://quickresource.eyereturn.com/eyebuild/eyebuild_1_19.js"></script>
22 29
23 30
24 31
...@@ -41,7 +48,7 @@ ...@@ -41,7 +48,7 @@
41 position: relative; 48 position: relative;
42 width: 100%; 49 width: 100%;
43 height: 100%; 50 height: 100%;
44 border: 1px solid #939598; 51 border: 1px solid #323e48;
45 background-color: #FFFFFF; 52 background-color: #FFFFFF;
46 overflow: hidden; 53 overflow: hidden;
47 cursor: pointer; 54 cursor: pointer;
...@@ -50,22 +57,56 @@ ...@@ -50,22 +57,56 @@
50 img { 57 img {
51 position: absolute; 58 position: absolute;
52 } 59 }
53 #logos {
54 right: 0px;
55 top: 185px;
56 opacity: 0;
57 }
58 60
59 61
60 /* Custom per ad */ 62 /* Custom per ad */
61 63
62 body{ 64 body{
63 width: 300px; 65 width: 728px;
64 height: 250px; 66 height: 90px;
67 }
68
69 #border{
70 border-top: 10px solid #323e48;
71 background-position: 0 -10px;
72
73 }
74 .box{
75 left:20px;
76 top:1px;
77 opacity: 0;
78 }
79 #box-spoileddog{
80 opacity: 1;
65 } 81 }
82 #txt, #txt2{
83 left: 105px;
84 top: 27px;
85
86 -ms-transform: scale(.5); /* IE 9 */
87 -ms-transform-origin: 0% 0%; /* IE 9 */
88 -webkit-transform: scale(.5); /* Chrome, Safari, Opera */
89 -webkit-transform-origin: 0% 0%; /* Chrome, Safari, Opera */
90 transform: scale(.5);
91 transform-origin: 0% 0%;
92 }
93 #txt2{
94 left: 22px;
95 opacity: 0;
96 }
97 #logo{
98 position: absolute;
99 left: 548px;
100 top: -5px;
101 width:182px;
102 height:auto;
66 103
67 #blue { 104 }
68 left: -402px; 105 #subscribe{
106
107 right: 186px;
108 bottom: 22px;
109 opacity: 0;
69 } 110 }
70 111
71 </style> 112 </style>
...@@ -74,25 +115,117 @@ ...@@ -74,25 +115,117 @@
74 115
75 <body> 116 <body>
76 <div id="border"> 117 <div id="border">
77 <img id="img" src="assets/img.jpg">
78 <img id="blue" src="assets/blue.gif">
79 <img id="logos" src="assets/logos.gif">
80 <img id="triangle" src="assets/triangle.png">
81 <img id="check" src="assets/check.gif">
82 118
83 <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> 119
120 <img class="box" id="box-spoileddog" src="assets/box-spoileddog.jpg" alt="box-spoileddog">
121 <img class="box" id="box-thanksgiving" src="assets/box-thanksgiving.jpg" alt="box-thanksgiving" style="left:110px">
122 <img class="box" id="box-xmas" src="assets/box-xmas.jpg" alt="box-xmas" style="left:200px">
123 <img class="box" id="box-winter" src="assets/box-winter.jpg" alt="box-winter" style="left:290px">
124 <img class="box" id="box-birthday" src="assets/box-birthday.jpg" alt="box-box-birthday" style="left:380px">
125 <img class="box" id="box-valentines" src="assets/box-valentines.jpg" alt="box-valentines" style="left:470px">
126
127 <img id="txt" src="assets/txt.png" alt="txt">
128 <img id="txt2" src="assets/txt2.png" alt="txt">
129
130
131 <div id="logo"></div>
132 <img id="subscribe" src="assets/subscribe.svg" alt="txt" width="114" height="33">
133
134
135 <!-- <a id="click-tag" href="javascript:window.open(window.clickTag)"></a> -->
136 <a id="click-tag" href="javascript:eyeBuild.doClick(0)"></a>
84 </div> 137 </div>
85 138
86 <!-- GREENSOCK--> 139 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
87 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 140 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
88 <script> 141 <script>
89 var tl = new TimelineMax({repeat:2});
90 142
91 tl.to("#check", 0.6, {left:-728, ease:Power1.easeInOut, delay:3.5 }); 143 $( document ).ready(function() {
92 tl.to("#blue", 0.4, {left:0, ease:Power1.easeInOut, delay:3.3 }); 144
93 tl.to("#img", 1.0, {opacity:0, ease:Power1.easeInOut, delay:-0.5 }); 145 /*
94 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:0 }); 146 * embed external svg using ajax
95 tl.to("#logos", 1.0, {opacity:1, ease:Power1.easeInOut, delay:2 }); 147 */
148
149 eyeBuild.initialize();
150
151 var container = $("#logo");
152 var svgUrl = "assets/logo.svg";
153
154 $.get(svgUrl)
155 .then(injectSvg);
156
157 function injectSvg(xmlDoc) {
158 var svg = $(xmlDoc).find("svg");
159 container.append(svg);
160 animate();
161 }
162
163 /*
164 * animate
165 */
166
167 function animate(){
168
169 // animate the boxes
170
171 var tl = new TimelineMax({repeat:1});
172
173 tl.to("#txt", .5, {opacity:0, delay:2 });
174
175 var d = .1;
176 var box_arr = ["#box-spoileddog", "#box-thanksgiving", "#box-xmas", "#box-winter", "#box-birthday", "#box-valentines"];
177 tl.staggerTo(box_arr, 5*d, { opacity: 1}, d);
178 tl.to("#box-spoileddog", .1, {opacity:1, delay:2 });
179
180 tl.staggerTo(box_arr, 5*d, { opacity: 0}, -d);
181
182 tl.to("#txt2", .5, {opacity:1, delay:0 });
183 tl.to("#subscribe", .5, {opacity:1, delay:0 });
184 tl.to("#txt2", .5, {opacity:1, delay:5 });
185
186 console.log("boxes: " + tl.totalDuration());
187
188
189 // animate the logo
190
191 var eye_tl = new TimelineMax({repeat:3});
192
193 var winkTime = .3;
194 // close eye
195 eye_tl.to("#cheek", winkTime, {x:3, y:-1, delay:0 });
196 eye_tl.to("#eye-right-mask", winkTime, {scaleY:.001, transformOrigin:"50% 50%", delay:-winkTime });
197 eye_tl.to("#eye-right-lash", .1, {opacity:1, delay:0 });
198 eye_tl.to(["#e-small", "#e-large"], .1, {opacity:1, delay:0 });
199
200 var crumbTime = 1;
201 eye_tl.to("#e-large", crumbTime, {scale:3, x:11, y:-4, transformOrigin:"50% 50%", delay:0 });
202 eye_tl.to("#e-small", crumbTime, {scale:6, x:11, y:1, transformOrigin:"50% 50%", delay:-crumbTime });
203 eye_tl.to("#e-large", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
204 eye_tl.to("#e-small", crumbTime/4, {scale:.001, opacity:0, transformOrigin:"50% 50%", delay:-crumbTime/2 });
205
206 // open eye
207 eye_tl.to("#eye-right-lash", .1, {opacity:0, delay:-winkTime*1.9 });
208 eye_tl.to("#cheek", winkTime, {x:0, y:0, delay:-winkTime*1.9 });
209 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:-winkTime*2});
210 eye_tl.to("#eye-right-mask", winkTime, {scaleY:1, transformOrigin:"50% 50%", delay:5});
211
212 /* console.log("eye_right: " + eye_tl.totalDuration()); */
213
214
215 var tongue_tl = new TimelineMax();
216 var pantDuration = .3;
217 var pantTongueLength = .9;
218 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:9, delay:0 });
219 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
220 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:33, delay:1 });
221 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:3, delay:1 });
222 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
223 tongue_tl.fromTo("#pant", pantDuration, {scaleY:.5}, {scaleY:pantTongueLength, transformOrigin:"0% 0%", yoyo: true, repeat:13, delay:1 });
224 /* console.log("tongue: " + tongue_tl.totalDuration()); */
225 };
226 });
227
228
96 </script> 229 </script>
97 230
98 231
......
1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 83.25">
2 <defs>
3 <style>
4 .cls-1 {
5 fill: #c88f50;
6 }
7
8 .cls-2 {
9 fill: #e1c19c;
10 }
11
12 .cls-3 {
13 fill: #fff;
14 }
15
16 .cls-4 {
17 fill: #353f4a;
18 }
19
20 .cls-5 {
21 fill: #f27658;
22 }
23 </style>
24 </defs>
25 <title>logo</title>
26 <g id="face">
27 <g>
28 <path class="cls-1" d="M25.1,60.24a14.69,14.69,0,0,1,10.37-14,24.57,24.57,0,0,0,1.46-10.69s-.27-6.12-.44-8.89c-1.07.11-2.15.26-3.26.48a.2.2,0,0,1,0-.08c-.74-1.48-2.11-4.25-3.21-6.13a29.06,29.06,0,0,0-5.09-6.75,5.25,5.25,0,0,0-4.21-1.74,4.12,4.12,0,0,0-3.32,1.84,8.85,8.85,0,0,0-1.13,3.08,13.64,13.64,0,0,0-.19,1.5l0,.65c0,.51-.06,1-.1,1.55a21.57,21.57,0,0,0,.1,4.91,19,19,0,0,0,.45,1.94,11.18,11.18,0,0,1,.47,2.47,4.07,4.07,0,0,1-.29,1.19,8.94,8.94,0,0,0-.29,1A4.59,4.59,0,0,0,16.48,35a11.7,11.7,0,0,0,1.89,3.19c.15.19.29.39.43.59a7.8,7.8,0,0,1,1.07,1.84,7.5,7.5,0,0,1,.28,2.81c0,.2,0,.4,0,.59a12.32,12.32,0,0,1-.44,2.54,11.93,11.93,0,0,0-.49,3.89A30.23,30.23,0,0,0,22,58.11,7.41,7.41,0,0,0,25.12,61C25.1,60.72,25.1,60.48,25.1,60.24Z"/>
29 <path class="cls-1" d="M63.09,25.93a17.71,17.71,0,0,0,.18-2.38l-.25,0a1.73,1.73,0,0,1-1.56-1,2.76,2.76,0,0,1-.77.11,2.53,2.53,0,0,1-2.53-2.52h-.1a3,3,0,0,1-1.79-5.32,3,3,0,0,1-.63-1.82,8,8,0,0,0-1.43,1.09,29.06,29.06,0,0,0-5.09,6.75C48,22.77,46.65,25.54,45.91,27a.2.2,0,0,1,0,.08c-.95-.19-1.88-.33-2.81-.43-.16,2.8-.43,8.84-.43,8.84a24.61,24.61,0,0,0,1.46,10.7,14.67,14.67,0,0,1,10.36,14c0,.19,0,.39,0,.58a7.43,7.43,0,0,0,2.62-2.71,30,30,0,0,0,2.83-7.69,11.64,11.64,0,0,0-.48-3.89A12.32,12.32,0,0,1,59,44c0-.19,0-.39,0-.59a7.5,7.5,0,0,1,.28-2.81,8.08,8.08,0,0,1,1.06-1.84c.15-.2.29-.4.44-.59A12,12,0,0,0,62.62,35a4.59,4.59,0,0,0,.13-2.43,7.3,7.3,0,0,0-.3-1,4.35,4.35,0,0,1-.28-1.19,10.63,10.63,0,0,1,.47-2.47A19,19,0,0,0,63.09,25.93Z"/>
30 </g>
31 <path class="cls-2" d="M23.82,17.66c-1.31-1.47-3.53-1.89-4.4.39a16.33,16.33,0,0,0-.56,6.08c0,2.32,1.48,3.92,1.78,6.21-.45,3.51-.17,5.09,2.21,6.11,2.26-3.73,6.63-4.29,6.9-7.24C30,26.73,25.32,19.34,23.82,17.66Z"/>
32 <path class="cls-2" d="M60.19,22.65a2.54,2.54,0,0,1-2-2.47h-.1a3,3,0,0,1-2.92-2.46c-1.55,1.79-6.08,9-5.86,11.48.26,2.95,4.63,3.51,6.89,7.24,2.38-1,2.66-2.6,2.21-6.11.31-2.29,1.74-3.89,1.78-6.21C60.17,23.65,60.18,23.15,60.19,22.65Z"/>
33 <g id="face-crumbs">
34 <circle id="e-large" class="cls-1" cx="59.53" cy="12.83" r="2"/>
35 <circle id="e-small" class="cls-1" cx="61.19" cy="17.29" r="1.31"/>
36 </g>
37 </g>
38 <g id="eyes">
39 <path id="eyewhite-left" class="cls-3" d="M31.9,42.66a3.6,3.6,0,1,1-3.6-3.59A3.6,3.6,0,0,1,31.9,42.66Z"/>
40 <path id="eye-left-pupil" class="cls-4" d="M30.43,41.59s0,.07,0,.1a.84.84,0,1,1-1.68,0,.82.82,0,0,1,.33-.66l-.27,0a2.56,2.56,0,1,0,1.61.58Z"/>
41 <g id="eye-right-mask">
42 <path id="eyewhite-right" class="cls-3" d="M54.82,42.66a3.59,3.59,0,1,1-3.59-3.59A3.6,3.6,0,0,1,54.82,42.66Z"/>
43 <path id="eye-right" class="cls-4" d="M52.33,41.59s0,.07,0,.1a.85.85,0,1,1-1.69,0A.83.83,0,0,1,51,41l-.28,0a2.56,2.56,0,1,0,1.62.58Z"/>
44 </g>
45 <circle id="e-large-2" data-name="e-large" class="cls-4" cx="54.15" cy="42.73" r="0.57"/>
46 <circle id="e-small-2" data-name="e-small" class="cls-4" cx="54.15" cy="42.77" r="0.18"/>
47 <path id="eye-right-lash" class="cls-4" d="M48.12,43.61a.72.72,0,0,1-.4-.12.75.75,0,0,1-.24-1,4.32,4.32,0,0,1,7.33,0,.75.75,0,1,1-1.26.8,2.83,2.83,0,0,0-4.8,0A.74.74,0,0,1,48.12,43.61Z"/>
48 </g>
49 <g id="tongue">
50 <circle id="cheek" class="cls-3" cx="39.75" cy="59.83" r="14.5"/>
51 <path id="normal" class="cls-5" d="M39.78,57.51a5,5,0,0,1-4.94,4.94h0v.49a4.94,4.94,0,1,0,9.87,0v-.49A5,5,0,0,1,39.78,57.51Z"/>
52 <path id="pant" class="cls-5" d="M34.84,62.45V65.8a4.94,4.94,0,1,0,9.87,0V62.45Z"/>
53 <g id="nose">
54 <circle class="cls-4" cx="39.78" cy="52.4" r="3.15"/>
55 </g>
56 </g>
57 <g id="logo">
58 <g id="cookieclub">
59 <path class="cls-4" d="M80.52,54.31a.91.91,0,0,1,.59.8.71.71,0,0,1-.15.44.48.48,0,0,1-.38.18.65.65,0,0,1-.3,0,1.27,1.27,0,0,1-.22-.13,1.37,1.37,0,0,0-.21-.15,2.25,2.25,0,0,0-.33-.1,1.86,1.86,0,0,0-.36,0,1.7,1.7,0,0,0-1.33.52,1.92,1.92,0,0,0-.48,1.38,2,2,0,0,0,.48,1.36,1.64,1.64,0,0,0,1.25.53,2,2,0,0,0,.83-.13l.18-.12a1.1,1.1,0,0,1,.23-.13.57.57,0,0,1,.24-.05.58.58,0,0,1,.45.18.7.7,0,0,1,.17.47.67.67,0,0,1-.32.51,2.34,2.34,0,0,1-.84.38,4.44,4.44,0,0,1-1.11.14,2.9,2.9,0,0,1-1.54-.41,2.7,2.7,0,0,1-1-1.12A3.6,3.6,0,0,1,76,57.16a3.44,3.44,0,0,1,.38-1.63,2.86,2.86,0,0,1,1.06-1.12A3,3,0,0,1,79,54,3.42,3.42,0,0,1,80.52,54.31Z"/>
60 <path class="cls-4" d="M88,58.79a2.82,2.82,0,0,1-1.11,1.11,3.12,3.12,0,0,1-1.56.4,3.08,3.08,0,0,1-1.57-.4,2.82,2.82,0,0,1-1.11-1.11,3.45,3.45,0,0,1,0-3.26,2.91,2.91,0,0,1,1.11-1.12A3.08,3.08,0,0,1,85.3,54a3.12,3.12,0,0,1,1.56.4A2.91,2.91,0,0,1,88,55.53a3.45,3.45,0,0,1,0,3.26Zm-1.18-2.62a1.73,1.73,0,0,0-.63-.68,1.68,1.68,0,0,0-.86-.23,1.61,1.61,0,0,0-1.49.91,2.16,2.16,0,0,0,0,2,1.74,1.74,0,0,0,.62.67,1.71,1.71,0,0,0,.87.23,1.68,1.68,0,0,0,.86-.23,1.77,1.77,0,0,0,.63-.67,2.25,2.25,0,0,0,0-2Z"/>
61 <path class="cls-4" d="M95.37,58.79a2.82,2.82,0,0,1-1.11,1.11,3.26,3.26,0,0,1-3.13,0A2.89,2.89,0,0,1,90,58.79a3.45,3.45,0,0,1,0-3.26,3,3,0,0,1,1.11-1.12,3.26,3.26,0,0,1,3.13,0,2.91,2.91,0,0,1,1.11,1.12,3.45,3.45,0,0,1,0,3.26Zm-1.18-2.62a1.78,1.78,0,0,0-.62-.68,1.74,1.74,0,0,0-.87-.23,1.61,1.61,0,0,0-1.49.91,2.25,2.25,0,0,0,0,2,1.74,1.74,0,0,0,.62.67,1.71,1.71,0,0,0,.87.23,1.74,1.74,0,0,0,.87-.23,1.82,1.82,0,0,0,.62-.67,2.25,2.25,0,0,0,0-2Z"/>
62 <path class="cls-4" d="M102.56,59.51a.59.59,0,0,1-.22.47.7.7,0,0,1-.47.2.66.66,0,0,1-.5-.23l-2-2.15-.56.51V59.5a.67.67,0,0,1-.19.49.69.69,0,0,1-1,0,.68.68,0,0,1-.2-.49v-7a.66.66,0,0,1,.2-.49.62.62,0,0,1,.48-.2.63.63,0,0,1,.49.2.66.66,0,0,1,.19.49v4.19l2.43-2.34a.66.66,0,0,1,.5-.22.6.6,0,0,1,.45.21.63.63,0,0,1,.2.43.67.67,0,0,1-.28.51l-1.71,1.57,2,2.16A.73.73,0,0,1,102.56,59.51Z"/>
63 <path class="cls-4" d="M104.09,53.26a.54.54,0,0,1-.16-.44V52.6a.49.49,0,0,1,.18-.44,1.3,1.3,0,0,1,1.09,0,.51.51,0,0,1,.16.44v.22a.52.52,0,0,1-.16.45,1,1,0,0,1-.56.12A.94.94,0,0,1,104.09,53.26Zm1,6.73a.7.7,0,0,1-1,0,.67.67,0,0,1-.19-.49V54.81a.67.67,0,0,1,.19-.49.7.7,0,0,1,1,0,.71.71,0,0,1,.19.49V59.5A.71.71,0,0,1,105.14,60Z"/>
64 <path class="cls-4" d="M112.43,57.46a.76.76,0,0,1-.48.17h-3.74a1.71,1.71,0,0,0,.62,1,1.73,1.73,0,0,0,1.1.38,1.95,1.95,0,0,0,1.14-.26l.21-.13a.87.87,0,0,1,.39-.1.56.56,0,0,1,.58.56.72.72,0,0,1-.32.56,2.81,2.81,0,0,1-.85.44,3.4,3.4,0,0,1-1.08.18,3.29,3.29,0,0,1-1.66-.4,2.66,2.66,0,0,1-1.09-1.09,3.15,3.15,0,0,1-.39-1.57,3.49,3.49,0,0,1,.41-1.71,2.87,2.87,0,0,1,1.08-1.13,2.76,2.76,0,0,1,1.42-.39,2.63,2.63,0,0,1,1.42.41,3.11,3.11,0,0,1,1.06,1.1,3,3,0,0,1,.39,1.49A.6.6,0,0,1,112.43,57.46Zm-4.21-1h3v-.08a1.13,1.13,0,0,0-.46-.81,1.47,1.47,0,0,0-1-.34A1.41,1.41,0,0,0,108.22,56.49Z"/>
65 <path class="cls-4" d="M121.26,54.31a.91.91,0,0,1,.59.8.71.71,0,0,1-.15.44.48.48,0,0,1-.38.18.65.65,0,0,1-.3,0,1.27,1.27,0,0,1-.22-.13l-.21-.15a2.25,2.25,0,0,0-.33-.1,1.86,1.86,0,0,0-.36,0,1.7,1.7,0,0,0-1.33.52,1.92,1.92,0,0,0-.48,1.38,2,2,0,0,0,.48,1.36,1.64,1.64,0,0,0,1.25.53,2,2,0,0,0,.83-.13l.18-.12a1.1,1.1,0,0,1,.23-.13.57.57,0,0,1,.24-.05.58.58,0,0,1,.45.18.7.7,0,0,1,.17.47.67.67,0,0,1-.32.51,2.34,2.34,0,0,1-.84.38,4.44,4.44,0,0,1-1.11.14,2.9,2.9,0,0,1-1.54-.41,2.7,2.7,0,0,1-1-1.12,3.6,3.6,0,0,1-.37-1.61,3.44,3.44,0,0,1,.38-1.63,2.86,2.86,0,0,1,1.06-1.12,3,3,0,0,1,1.55-.4A3.42,3.42,0,0,1,121.26,54.31Z"/>
66 <path class="cls-4" d="M124.59,60a.69.69,0,0,1-1,0,.67.67,0,0,1-.19-.49v-7a.66.66,0,0,1,.2-.49.64.64,0,0,1,.49-.2.62.62,0,0,1,.48.2.66.66,0,0,1,.19.49v7A.68.68,0,0,1,124.59,60Z"/>
67 <path class="cls-4" d="M131.74,54.32a.67.67,0,0,1,.19.49v2.88a2.63,2.63,0,0,1-.68,1.92,3,3,0,0,1-3.83,0,2.63,2.63,0,0,1-.67-1.92V54.81a.67.67,0,0,1,.19-.49.66.66,0,0,1,.49-.2.68.68,0,0,1,.49.2.71.71,0,0,1,.19.49v2.88a1.51,1.51,0,0,0,.3,1,1.46,1.46,0,0,0,1.85,0,1.46,1.46,0,0,0,.31-1V54.81a.67.67,0,0,1,.19-.49.7.7,0,0,1,1,0Z"/>
68 <path class="cls-4" d="M138.38,54.41a2.79,2.79,0,0,1,1,1.12,3.4,3.4,0,0,1,.37,1.62,3.62,3.62,0,0,1-.36,1.63,2.77,2.77,0,0,1-1,1.12,2.51,2.51,0,0,1-1.39.4,2.41,2.41,0,0,1-1-.22,3,3,0,0,1-.8-.54v.07a.66.66,0,0,1-.19.49.66.66,0,0,1-.49.2.63.63,0,0,1-.48-.19.69.69,0,0,1-.2-.5V52.49A.66.66,0,0,1,134,52a.61.61,0,0,1,.48-.2.63.63,0,0,1,.49.2.66.66,0,0,1,.19.49v2.37a2.47,2.47,0,0,1,.76-.6,2.2,2.2,0,0,1,1-.25A2.56,2.56,0,0,1,138.38,54.41Zm-.4,4.1a2.22,2.22,0,0,0,0-2.72,1.62,1.62,0,0,0-2.4,0,2.24,2.24,0,0,0,0,2.72,1.51,1.51,0,0,0,1.2.54A1.49,1.49,0,0,0,138,58.51Z"/>
69 </g>
70 <g id="wufers">
71 <path class="cls-4" d="M98.91,35A1.42,1.42,0,0,1,99.32,36v6.12a5.55,5.55,0,0,1-1.43,4.07,5.45,5.45,0,0,1-4.08,1.47,5.38,5.38,0,0,1-4.07-1.47,5.59,5.59,0,0,1-1.43-4.07V36A1.46,1.46,0,0,1,88.72,35a1.5,1.5,0,0,1,2.08,0A1.46,1.46,0,0,1,91.21,36v6.12a3.11,3.11,0,0,0,.65,2.18,2.48,2.48,0,0,0,2,.71,2.51,2.51,0,0,0,2-.71,3.11,3.11,0,0,0,.65-2.18V36A1.46,1.46,0,0,1,96.84,35a1.4,1.4,0,0,1,1-.42A1.36,1.36,0,0,1,98.91,35Z"/>
72 <path class="cls-4" d="M107.61,32.65a1.72,1.72,0,0,0-.33,1V34.8h2.19a1.32,1.32,0,0,1,1,.38,1.25,1.25,0,0,1,.39,1,1.27,1.27,0,0,1-.39.95,1.31,1.31,0,0,1-1,.37h-2.19V46a1.46,1.46,0,0,1-.41,1.05,1.4,1.4,0,0,1-1,.42,1.36,1.36,0,0,1-1-.42,1.42,1.42,0,0,1-.41-1.05V37.45h-1.3a1.34,1.34,0,0,1-1-.37,1.26,1.26,0,0,1-.38-.95,1.24,1.24,0,0,1,.38-1,1.34,1.34,0,0,1,1-.38h1.3V33.69a3.77,3.77,0,0,1,1.24-2.93,5.09,5.09,0,0,1,3.57-1.14,3.21,3.21,0,0,1,1.56.36,1.2,1.2,0,0,1,.66,1.11,1.29,1.29,0,0,1-.34.94,1.06,1.06,0,0,1-.82.36,1.1,1.1,0,0,1-.25,0l-.28,0a4.34,4.34,0,0,0-1-.14A1.32,1.32,0,0,0,107.61,32.65Z"/>
73 <path class="cls-4" d="M123.87,41.65a1.55,1.55,0,0,1-1,.36H114.9a3.71,3.71,0,0,0,1.33,2.23,3.75,3.75,0,0,0,2.34.8,5.23,5.23,0,0,0,1.54-.18,4.43,4.43,0,0,0,.88-.38l.44-.28a1.8,1.8,0,0,1,.82-.22,1.19,1.19,0,0,1,.87.36,1.17,1.17,0,0,1,.36.85,1.51,1.51,0,0,1-.67,1.18,5.89,5.89,0,0,1-1.81.94,7.28,7.28,0,0,1-2.29.38,7.12,7.12,0,0,1-3.53-.84,5.84,5.84,0,0,1-2.32-2.33,6.71,6.71,0,0,1-.82-3.33,7.37,7.37,0,0,1,.87-3.64,6.21,6.21,0,0,1,2.28-2.4,6,6,0,0,1,3-.83,5.62,5.62,0,0,1,3,.87,6.48,6.48,0,0,1,2.25,2.34,6.3,6.3,0,0,1,.84,3.18A1.23,1.23,0,0,1,123.87,41.65Zm-8.94-2h6.31v-.17a2.47,2.47,0,0,0-1-1.74,3.13,3.13,0,0,0-2-.72A3,3,0,0,0,114.93,39.6Z"/>
74 <path class="cls-4" d="M135,34.73a1.22,1.22,0,0,1,.49,1,1.54,1.54,0,0,1-.38,1.13,1.33,1.33,0,0,1-.92.37,2.5,2.5,0,0,1-.82-.17l-.32-.1a2.36,2.36,0,0,0-.55-.07,2.11,2.11,0,0,0-1.2.39,2.7,2.7,0,0,0-1,1.17,4.26,4.26,0,0,0-.38,1.86V46A1.42,1.42,0,0,1,129.6,47a1.36,1.36,0,0,1-1,.42,1.4,1.4,0,0,1-1-.42,1.46,1.46,0,0,1-.41-1.05V36a1.46,1.46,0,0,1,.41-1.05,1.4,1.4,0,0,1,1-.42,1.36,1.36,0,0,1,1,.42A1.42,1.42,0,0,1,130,36v.32a3.63,3.63,0,0,1,1.59-1.51,4.83,4.83,0,0,1,2.22-.52A1.87,1.87,0,0,1,135,34.73Z"/>
75 <path class="cls-4" d="M136.61,44.73a1.38,1.38,0,0,1,1.33-1.28,1.32,1.32,0,0,1,1,.46A5.18,5.18,0,0,0,140.41,45a4.49,4.49,0,0,0,1.89.36c1.25-.05,1.88-.52,1.88-1.42a1.14,1.14,0,0,0-.64-1.06,8.94,8.94,0,0,0-2-.72,16.73,16.73,0,0,1-2.27-.78,3.89,3.89,0,0,1-1.52-1.16,3.24,3.24,0,0,1-.64-2.11,3.19,3.19,0,0,1,.66-2,4.38,4.38,0,0,1,1.74-1.33,5.63,5.63,0,0,1,2.27-.47,6.91,6.91,0,0,1,2.46.46,4.22,4.22,0,0,1,1.93,1.35,1.33,1.33,0,0,1,.31.87,1.1,1.1,0,0,1-.46.91,1.25,1.25,0,0,1-1.63-.07,3.06,3.06,0,0,0-1.12-.84,3.72,3.72,0,0,0-1.56-.32c-1.22,0-1.83.44-1.83,1.33a1.1,1.1,0,0,0,.34.85,2.25,2.25,0,0,0,.85.51c.35.12.84.27,1.46.44a15.37,15.37,0,0,1,2.17.75,3.72,3.72,0,0,1,1.47,1.18,3.4,3.4,0,0,1,.6,2.1,3.21,3.21,0,0,1-.7,2.06,4.37,4.37,0,0,1-1.79,1.33,5.7,5.7,0,0,1-2.25.46,8.07,8.07,0,0,1-3-.53,4.92,4.92,0,0,1-2.24-1.71A1.19,1.19,0,0,1,136.61,44.73Z"/>
76 <path class="cls-4" d="M83.31,34.49h0A1.47,1.47,0,0,0,81.86,36c0,1.18,0,4.34,0,5.77,0,1.66-1.06,3.12-2.26,3.12a2.28,2.28,0,0,1-1.63-.7,2.39,2.39,0,0,1-.56-1.62V38.34c0-.76-.34-1.36-1.1-1.43S75,37.43,75,38.28v4.26a2.56,2.56,0,0,1-.78,1.8,2,2,0,0,1-1.42.5c-1.27,0-2.26-1.37-2.26-3.12,0-2.7,0-5.76,0-5.76a1.46,1.46,0,0,0-1.44-1.47h0a1.46,1.46,0,0,0-1.45,1.44s0,3.08,0,5.79c0,3.38,2.26,6,5.16,6a4.78,4.78,0,0,0,3.43-1.88c.92,1,1.81,1.88,3.43,1.88,2.84,0,5.16-2.71,5.16-6,0-1.43,0-4.6,0-5.79A1.46,1.46,0,0,0,83.31,34.49Z"/>
77 </g>
78 <g id="logo-crumbs">
79 <circle id="u-large" class="cls-4" cx="91.85" cy="29.53" r="2.31"/>
80 <circle id="u-small" class="cls-4" cx="96.65" cy="31.59" r="1.48"/>
81 </g>
82 </g>
83 </svg>