-
Notifications
You must be signed in to change notification settings - Fork 22
/
chapter3 _mobileTest.html
357 lines (299 loc) · 18.4 KB
/
chapter3 _mobileTest.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gudea|Hind+Madurai|Oxygen:300|Rubik" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link rel="stylesheet" href="./css/general0.css">
<link rel="stylesheet" href="./css/chapter3_mobileTest.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-133914635-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-133914635-1');
</script>
<title>Chapter 3 Demo Mobile Test - OKAI</title>
</head>
<body>
<div class="scrollBar" id="myBar"></div>
<div id="neuronLottie" class="animation animLeft upperLayer"></div>
<div id="activationLottie" class="animation animLeft threeLayer"></div>
<div id="brainText" class="bg-3grey firstScene">
<div class="text right">
<h2>Chapter 3 <br>The Building Block of ANN</h2>
<hr>
<p>Early deep learning researchers in the 1970s took inspiration from a
neuron, the building block of our brain, to create an algorithm called
a perceptron.</p>
<p>Therefore, to understand what a perceptron is, let’s first take a look at a neuron. </p>
</div>
</div>
<div id="nerveText" class="bg-3grey scene">
<div class="text right">
<p>A neuron is made up of 3 main parts:</p>
<ul>
<li><p>Dendrites: Spread out receivers of the neuron that
takes in some stimulus from other neurons.</p></li>
<li><p>Soma: The “core” of the cell where the nucleus is situated
at, and it decides if a signal will be sent to other neurons.</p></li>
<li><p>Axon: Long extending neck of the neuron that passes
a signal to all connected neurons. </p></li>
</ul>
</div>
</div>
<div id="neuron1Text" class="scene bg-grey upperLayer">
<div class="text left">
<h3>
From Neuron to Perceptron
</h3>
<hr>
<p>The perceptron, similarly, also has 3 major parts:</p>
<ul>
<li><p>Inputs [Dendrites]: inputs take in values from an arbitrary number
of sources and pass it to the perceptron.</p></li>
<li><p>Perceptron [Soma]: the perceptron algorithm takes in the inputs
and assigns a weight to each input. It then calculates the weighted
sum of all inputs (the sum of all weight * input), then adds a bias on to of that.</p></li>
<li><p>
Output [Axon]t: the output of the perceptron spits out the result of the calculation.
</p></li>
</ul>
</p>
</div>
</div>
<div id="neuron2Text" class="scene bg-grey upperLayer">
<div class="text left">
<p>Between [two neurons], the biological axon-to-dendrite connection is simplified to an <strong>edge</strong>, and
signals transmitted are represented with <strong>numbers</strong>.
</p>
<p>The input on top is connected to the central neuron with a <strong>thick</strong> edge,
thus the signal is amplified by a factor of 2 when it reaches the neuron.
</p>
</div>
</div>
<div id="neuron3Text" class="scene bg-grey upperLayer">
<div class="text left">
<p>The input at the bottom, however, has a <strong>thinner</strong> connection to the neuron,
thus the signal is reduced to 2, resulting in a final signal of <strong>2 + 2 = 4</strong> received, instead of
3 + 2 = 5.
</p>
<p>
The thickness of the edge is called <strong>weight</strong> in machine learning.
</p>
</div>
</div>
<div id="neuron4Text" class="scene bg-grey upperLayer">
<div class="text left">
<p>Next, the neuron processes the signal by shaking itself. In this case, doing so incremented the signal by 1.
</p>
<p>
The “shakiness” of a neuron is called <strong>bias</strong>, which can both increase or decrease the value of the signal by any set amount.
</p>
</div>
</div>
<div id="neuron5Text" class="scene bg-grey upperLayer">
<div class="text left">
<p>Finally, an <strong>activation function</strong> is used to simulate how "fired" the neuron is.</p>
<p>
<strong>ReLU</strong>, a type of activation functions, is used here. It preserves the signal value if it is 0 or greater.
</p>
<p>
In our case, a positive signal would fully fire the neuron, so the value 5 is preserved and becomes the final output of the neuron.
</p>
</div>
</div>
<div id="appanana1Text" class="scene topLayer bg-white">
<div class="text right">
<h3>
Activation Functions
</h3>
<hr>
<p>
Early researchers use these perceptrons to model how human beings think.
In spite of early successes, they quickly ran into a problem.
When a researcher wants to predict how likely an animal with 2 legs
and 2 arms is a human, the probability the model gives back would often
be <strong>above 100% or below 0%</strong>.
</p>
<p>
Intuitively, this isn’t possible, but to the machine, it is just trying
to estimate a number, and it does not know if that number is meaningful.
</p>
</div>
</div>
<div id="appanana2Text" class="scene topLayer bg-white">
<div class="text right">
<p>
To tackle such problems, the researchers put an <strong>activation function</strong>
behind the output of the perceptron, which can control the output range of that perceptron.
</p>
<p>
For example, <strong>ReLu</strong> and <strong>Sigmoid</strong> are
functions that are commonly used. These functions allow the perceptron
to limit its output to a specific range so that it would not spit out
invalid outputs.
</p>
</div>
</div>
<div id="appanana3Text" class="scene topLayer bg-white">
<div class="text right">
<p>
<strong>ReLu</strong>, which we have already seen, makes the final output value non-negative.
It preserves the value of the output as long as it is greater than 0.
If the output is equal to or below 0, it would simply output 0. This
function is by far <strong>the most popular</strong> activation function, and you can
find it being used in areas like <strong>Computer Vision</strong> and
<strong>Speech Recognition</strong>.
</p>
</div>
</div>
<div id="appanana4Text" class="scene topLayer bg-white">
<div class="text right">
<p>
<strong>Sigmoid</strong> calculates the probability of two things, for example, if you
want to classify if an image is a cat or isn’t a cat (this is called
<strong>binary classification</strong>), you would want to use a
sigmoid activation function, which transforms
the output value into a probability (a number between 0 and 1).
</p>
</div>
</div>
<!-- beginning of neuronAnimation -->
<div id="neuronAnimation" class="animation animRight upperLayer">
<svg id="neuronSys" class="neuronSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<defs>
<filter color-interpolation-filters="sRGB" id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" />
<feBlend/>
</filter>
</defs>
<!-- <rect fill="#f1f1f1" x="0" y="0" width="600" height="600"/> -->
<g id="neuronGroup" filter="url(#goo)">
<line id="dendrites1" class="dendrites" x1="186" y1="214" x2="266" y2="275"/>
<line id="dendrites2" class="dendrites" x1="184" y1="387" x2="268" y2="324"/>
<line class="axon" x1="407" y1="300" x2="340" y2="300"/>
<g id="neuron">
<circle class="whitespace" cx="300" cy="300" r="41"/>
</g>
<g class="input" id="input1">
<circle class="whitespace" cx="162" cy="196" r="29"/>
</g>
<g class="input" id="input2">
<circle class="whitespace" cx="162" cy="404" r="29"/>
</g>
<g class="output" id="output">
<circle class="whitespace" cx="434" cy="301" r="29.5"/>
</g>
<line id="inTransit1" class="inTransit" x1="186" y1="214" x2="266" y2="275"/>
<line id="inTransit2" class="inTransit" x1="184" y1="387" x2="268" y2="324"/>
<g class="signal" id="topSignal">
<circle class="st1" cx="162" cy="195" r="20"/>
</g>
<g class="signal" id="botSignal">
<circle class="st1" cx="162" cy="403.7" r="20"/>
</g>
<circle id="cenSig" cx="300" cy="300" r="30"/>
<circle id="cenSig3" cx="300" cy="300" r="30"/>
<circle id="outSig" cx="434" cy="301" r="25"/>
</g>
<g id="num1" class="num">
<path d="M163.7,185.7c0.4,0.4,0.5,0.8,0.5,1.3V205c0,0.5-0.2,1-0.6,1.3c-0.4,0.4-0.9,0.5-1.5,0.5c-0.6,0-1.1-0.2-1.4-0.5
c-0.4-0.4-0.6-0.8-0.6-1.3v-14.7l-1.9,1.2c-0.3,0.2-0.6,0.3-1,0.3c-0.5,0-1-0.2-1.3-0.6s-0.5-0.8-0.5-1.3c0-0.3,0.1-0.6,0.3-0.9
c0.2-0.3,0.4-0.5,0.7-0.7l4.7-2.8c0.4-0.2,0.8-0.3,1.3-0.3C162.9,185.1,163.3,185.3,163.7,185.7z"/>
</g>
<g id="num3" class="num">
<path d="M166.2,402.2c0.9,0.6,1.6,1.4,2,2.4c0.5,1,0.7,2.1,0.7,3.2c0,1.5-0.3,2.8-1,4c-0.7,1.1-1.6,2-2.9,2.6
c-1.2,0.6-2.7,0.9-4.3,0.9c-0.7,0-1.5-0.1-2.2-0.3c-0.7-0.2-1.4-0.4-2-0.7c-0.8-0.4-1.1-1-1.1-1.7c0-0.5,0.2-1,0.5-1.4
c0.4-0.4,0.8-0.6,1.3-0.6c0.4,0,0.9,0.2,1.3,0.5c0.9,0.7,1.9,1,2.9,1c0.6,0,1.3-0.2,1.8-0.5c0.6-0.3,1-0.8,1.4-1.4
c0.4-0.6,0.5-1.3,0.5-2.1c0-1.1-0.3-2-1-2.6c-0.7-0.6-1.5-0.9-2.4-0.9c-0.4,0-0.8,0-1.1,0.1c-0.3,0.1-0.5,0.1-0.6,0.2
c-0.5,0.2-1,0.2-1.3,0.2c-0.5,0-0.8-0.2-1.1-0.5c-0.3-0.3-0.4-0.7-0.4-1.2c0-0.3,0.1-0.5,0.2-0.8c0.1-0.2,0.3-0.5,0.5-0.7l4.8-5.2
h-6.1c-0.5,0-0.9-0.2-1.2-0.5c-0.3-0.3-0.5-0.7-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2c0.3-0.3,0.7-0.5,1.2-0.5h9.5c0.6,0,1.1,0.2,1.4,0.5
c0.3,0.3,0.5,0.8,0.5,1.3c0,0.5-0.2,1-0.7,1.5l-4.2,4.6C164.3,401.2,165.3,401.5,166.2,402.2z"/>
</g>
<g class="num">
<path id="num2" d="M309.6,311.7c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.8,0.7h-15.3c-0.8,0-1.4-0.2-1.8-0.7
c-0.5-0.5-0.7-1.1-0.7-1.8c0-0.7,0.3-1.4,0.8-2l9.8-10.5c1.1-1.2,2-2.4,2.6-3.6c0.6-1.2,1-2.3,1-3.4c0-1.4-0.5-2.5-1.4-3.5
c-1-1-2.1-1.5-3.3-1.5c-0.9,0-1.7,0.3-2.6,0.9s-1.7,1.4-2.4,2.3c-0.5,0.7-1.2,1.1-2.1,1.1c-0.7,0-1.3-0.3-1.8-0.8
c-0.6-0.5-0.8-1.1-0.8-1.7c0-0.5,0.1-0.9,0.5-1.4c0.3-0.5,0.7-1,1.3-1.6c1.1-1.1,2.5-2.1,4-2.7s2.9-1,4.3-1c2,0,3.7,0.4,5.2,1.3
c1.5,0.8,2.7,2,3.5,3.5c0.8,1.5,1.2,3.1,1.2,5c0,1.8-0.5,3.7-1.5,5.6c-1,1.9-2.3,3.8-3.9,5.6l-5.7,6.1h9.3
C308.5,311,309.1,311.3,309.6,311.7z"/>
</g>
<g class="num">
<path id="num4" d="M311.4,303c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.8,0.7h-1.9v5.8c0,0.8-0.3,1.4-0.8,2
c-0.5,0.5-1.2,0.8-2,0.8c-0.8,0-1.4-0.3-1.9-0.8c-0.5-0.5-0.8-1.2-0.8-2v-5.8h-11.7c-0.7,0-1.3-0.3-1.8-0.8
c-0.6-0.5-0.9-1.1-0.9-1.9c0-0.7,0.2-1.3,0.7-1.8l14.2-17.4c0.6-0.7,1.3-1.1,2.3-1.1c0.7,0,1.4,0.3,1.9,0.8c0.5,0.5,0.8,1.2,0.8,2
v15.3h1.9C310.3,302.3,310.9,302.5,311.4,303z M295,302.3h7.3v-9L295,302.3z"/>
</g>
<g class="num">
<path id="numBig3"d="M306.2,297c1.3,0.9,2.3,2.1,2.9,3.5c0.7,1.5,1,3,1,4.7c0,2.2-0.5,4.1-1.5,5.7c-1,1.6-2.4,2.9-4.2,3.8s-3.9,1.3-6.3,1.3
c-1.1,0-2.2-0.1-3.2-0.4s-2-0.6-2.8-1.1c-1.1-0.6-1.7-1.4-1.7-2.4c0-0.7,0.3-1.4,0.8-2c0.5-0.6,1.1-0.9,1.8-0.9
c0.6,0,1.2,0.2,1.9,0.7c1.3,1,2.7,1.5,4.3,1.5c0.9,0,1.8-0.2,2.7-0.7c0.8-0.5,1.5-1.1,2-2c0.5-0.9,0.8-1.9,0.8-3
c0-1.6-0.5-2.9-1.5-3.8c-1-0.9-2.2-1.4-3.5-1.4c-0.6,0-1.1,0.1-1.6,0.2c-0.5,0.1-0.7,0.2-0.8,0.2c-0.8,0.2-1.4,0.4-1.9,0.4
c-0.7,0-1.2-0.2-1.6-0.7c-0.4-0.5-0.6-1-0.6-1.7c0-0.4,0.1-0.8,0.2-1.1c0.1-0.3,0.4-0.7,0.8-1.1l7-7.6h-8.9c-0.7,0-1.3-0.2-1.8-0.7
c-0.5-0.5-0.7-1.1-0.7-1.8c0-0.7,0.2-1.3,0.7-1.7c0.5-0.5,1.1-0.7,1.8-0.7h13.8c0.9,0,1.6,0.2,2.1,0.7c0.5,0.5,0.7,1.1,0.7,2
c0,0.7-0.4,1.4-1.1,2.2l-6,6.7C303.4,295.6,304.9,296.1,306.2,297z"/>
<g class="num">
<path id="numBig5" d="M305,295.7c1.6,0.9,2.9,2.2,3.8,3.8c0.9,1.6,1.4,3.4,1.4,5.3c0,2-0.6,3.9-1.7,5.6c-1.1,1.7-2.7,3.1-4.5,4.1
c-1.9,1-3.9,1.5-6.1,1.5c-1.2,0-2.4-0.2-3.6-0.5c-1.2-0.4-2.3-0.9-3-1.5c-0.4-0.3-0.7-0.7-0.9-1.3s-0.4-1-0.4-1.5
c0-0.5,0.2-1,0.7-1.5c0.5-0.4,1.1-0.7,1.8-0.7c0.5,0,1.2,0.3,2,0.9c1.3,0.8,2.4,1.2,3.3,1.2c1.2,0,2.4-0.3,3.5-0.9
c1.1-0.6,1.9-1.3,2.6-2.3c0.6-1,1-2,1-3.1c0-1.6-0.6-2.9-1.7-4c-1.1-1-2.4-1.5-4-1.5c-0.7,0-1.3,0.1-1.8,0.3
c-0.5,0.2-1.2,0.5-1.9,0.8c-0.5,0.3-1,0.5-1.3,0.6c-0.3,0.1-0.6,0.2-1,0.2c-1.2,0-2-0.3-2.5-0.9c-0.5-0.6-0.7-1.4-0.7-2.3
c0-0.3,0-0.5,0-0.6l1.4-11.2c0.1-0.6,0.4-1.1,0.9-1.6c0.5-0.4,1.1-0.6,1.8-0.6h13c0.7,0,1.3,0.2,1.8,0.7s0.7,1.1,0.7,1.8
c0,0.7-0.2,1.3-0.7,1.7c-0.5,0.5-1.1,0.7-1.8,0.7h-11.2l-0.9,6.5c0.6-0.3,1.3-0.6,2.2-0.8c0.9-0.2,1.7-0.3,2.5-0.3
C301.6,294.4,303.4,294.8,305,295.7z"/>
</g>
<g class="num">
<path id="numOut5" d="M437.6,298c1.1,0.7,2,1.5,2.7,2.7c0.7,1.1,1,2.4,1,3.8c0,1.4-0.4,2.8-1.2,4c-0.8,1.2-1.9,2.2-3.2,2.9
c-1.3,0.7-2.8,1.1-4.4,1.1c-0.8,0-1.7-0.1-2.6-0.4c-0.9-0.3-1.6-0.6-2.2-1.1c-0.3-0.2-0.5-0.5-0.6-0.9c-0.2-0.4-0.3-0.7-0.3-1.1
c0-0.4,0.2-0.7,0.5-1c0.3-0.3,0.8-0.5,1.3-0.5c0.4,0,0.9,0.2,1.4,0.6c0.9,0.6,1.7,0.8,2.4,0.8c0.9,0,1.7-0.2,2.5-0.6
c0.8-0.4,1.4-0.9,1.8-1.6c0.5-0.7,0.7-1.4,0.7-2.2c0-1.2-0.4-2.1-1.2-2.8c-0.8-0.7-1.7-1.1-2.8-1.1c-0.5,0-0.9,0.1-1.3,0.2
s-0.8,0.3-1.4,0.6c-0.4,0.2-0.7,0.3-0.9,0.4c-0.2,0.1-0.5,0.1-0.7,0.1c-0.8,0-1.4-0.2-1.8-0.7c-0.4-0.4-0.5-1-0.5-1.6
c0-0.2,0-0.4,0-0.4l1-7.9c0.1-0.4,0.3-0.8,0.7-1.1c0.4-0.3,0.8-0.4,1.3-0.4h9.2c0.5,0,0.9,0.2,1.3,0.5c0.3,0.3,0.5,0.8,0.5,1.3
c0,0.5-0.2,0.9-0.5,1.2c-0.3,0.3-0.8,0.5-1.3,0.5H431l-0.6,4.6c0.4-0.2,0.9-0.4,1.5-0.6c0.6-0.1,1.2-0.2,1.8-0.2
C435.1,297,436.4,297.3,437.6,298z"/>
</g>
<g id="ReLU">
<path d="M359.7,301v3.7H358v-9.4h2.9c0.6,0,1.2,0.1,1.6,0.2c0.5,0.1,0.8,0.3,1.1,0.6c0.3,0.2,0.5,0.5,0.6,0.9
c0.1,0.3,0.2,0.7,0.2,1.1c0,0.3,0,0.6-0.1,0.9c-0.1,0.3-0.2,0.5-0.4,0.8c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.2-0.6,0.3-0.9,0.4
c0.2,0.1,0.4,0.3,0.6,0.5l2.4,3.5h-1.6c-0.2,0-0.3,0-0.4-0.1c-0.1-0.1-0.2-0.1-0.3-0.3l-2-3c-0.1-0.1-0.2-0.2-0.2-0.2
c-0.1,0-0.2-0.1-0.4-0.1H359.7z M359.7,299.7h1.1c0.3,0,0.6,0,0.9-0.1c0.2-0.1,0.4-0.2,0.6-0.3c0.2-0.1,0.3-0.3,0.4-0.5
c0.1-0.2,0.1-0.4,0.1-0.7c0-0.5-0.2-0.8-0.5-1.1c-0.3-0.3-0.8-0.4-1.4-0.4h-1.1V299.7z"/>
<path d="M369.5,297.9c0.4,0,0.8,0.1,1.2,0.2c0.4,0.1,0.7,0.3,0.9,0.6c0.3,0.3,0.5,0.6,0.6,0.9s0.2,0.8,0.2,1.3
c0,0.1,0,0.2,0,0.3c0,0.1,0,0.1-0.1,0.2c0,0-0.1,0.1-0.1,0.1s-0.1,0-0.2,0h-4.1c0,0.7,0.2,1.2,0.6,1.5c0.3,0.3,0.7,0.5,1.3,0.5
c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.1,0.5-0.2s0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.1,0,0.2,0c0,0,0.1,0.1,0.1,0.1
l0.5,0.6c-0.2,0.2-0.4,0.4-0.6,0.5c-0.2,0.1-0.5,0.3-0.7,0.3c-0.2,0.1-0.5,0.1-0.7,0.2c-0.2,0-0.5,0.1-0.7,0.1
c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.7-0.7-1.1c-0.2-0.4-0.3-1-0.3-1.5c0-0.5,0.1-0.9,0.2-1.3
c0.1-0.4,0.4-0.8,0.6-1c0.3-0.3,0.6-0.5,1-0.7C368.6,298,369,297.9,369.5,297.9z M369.6,299c-0.5,0-0.8,0.1-1.1,0.4
c-0.3,0.3-0.4,0.6-0.5,1.1h3c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.1-0.3-0.3-0.5c-0.1-0.1-0.3-0.2-0.4-0.3
C370,299.1,369.8,299,369.6,299z"/>
<path d="M375.9,303.2h3.8v1.4h-5.5v-9.4h1.7V303.2z"/>
<path d="M385.1,303.2c0.3,0,0.6-0.1,0.9-0.2s0.5-0.3,0.7-0.5c0.2-0.2,0.3-0.5,0.4-0.7c0.1-0.3,0.1-0.6,0.1-1v-5.6h1.7
v5.6c0,0.6-0.1,1.1-0.3,1.6s-0.4,0.9-0.8,1.2c-0.3,0.3-0.7,0.6-1.2,0.8c-0.5,0.2-1,0.3-1.6,0.3c-0.6,0-1.1-0.1-1.6-0.3
c-0.5-0.2-0.9-0.5-1.2-0.8c-0.3-0.3-0.6-0.8-0.8-1.2c-0.2-0.5-0.3-1-0.3-1.6v-5.6h1.7v5.6c0,0.4,0,0.7,0.1,1
c0.1,0.3,0.2,0.5,0.4,0.7c0.2,0.2,0.4,0.4,0.7,0.5C384.5,303.2,384.8,303.2,385.1,303.2z"/>
</g>
</svg>
<!-- end of neuronAnimation -->
</div>
<!-- Boostrap JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> -->
<script type="text/javascript" src="./js/TweenMax.min.js"></script>
<script type="text/javascript" src="./js/DrawSVGPlugin.min.js"></script>
<script type="text/javascript" src="./js/GSDevTools.min.js"></script>
<script type="text/javascript" src="./js/Draggable.min.js"></script>
<script type="text/javascript" src="./js/MorphSVGPlugin.min.js"></script>
<script type="text/javascript" src="./js/lottie.js"></script>
<!-- ScrollMagic JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5//plugins/debug.addIndicators.js"></script>
<script type="text/javascript" src="./js/chapter3.js"></script>
</body>
</html>