-
Notifications
You must be signed in to change notification settings - Fork 22
/
neuron_demo.html
160 lines (119 loc) · 8.2 KB
/
neuron_demo.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/neuron_demo.css">
<title>Project SynGap Demo</title>
</head>
<body>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In -->
<svg id="neuronSys" class="neuronSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<defs>
<filter 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>
<g id="neuronGroup" filter="url(#goo)">
<!-- <g id="neuronGroup"> -->
<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="numOut4" d="M442.6,303.2c0.4,0.4,0.5,0.8,0.5,1.3c0,0.5-0.2,0.9-0.5,1.3c-0.4,0.3-0.8,0.5-1.4,0.5h-1.4v4.3c0,0.6-0.2,1.1-0.6,1.4
c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4v-4.3h-8.8c-0.5,0-1-0.2-1.4-0.6
c-0.4-0.4-0.6-0.8-0.6-1.4c0-0.5,0.2-0.9,0.5-1.3l10.7-12.8c0.4-0.5,1-0.8,1.7-0.8c0.6,0,1,0.2,1.4,0.6c0.4,0.4,0.6,0.9,0.6,1.4
v11.2h1.4C441.8,302.7,442.2,302.8,442.6,303.2z M430.2,302.7h5.5V296L430.2,302.7z"/>
</g> -->
<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>
</svg>
<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/SVG2GIF.min.js"></script> -->
<script type="text/javascript" src="./js/neuron_demo.js"></script>
</script>
</body>
</html>