-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (58 loc) · 7.73 KB
/
index.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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Brain Function Visualisation using SVG</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- partial:index.partial.html -->
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/stylesheets/css/main.css">
</head>
<body>
<div class="tdc-main">
<div class="tdc-main-left">
<div class="tdc-main-left-wrapper">
<div class="tdc-main-left-wrapper-info">
<div class="tdc-info-title">Hover over a part of the brain!</div>
<br>
<div class="tdc-info-description"></div>
</div>
</div>
</div>
<div class="tdc-main-right">
<div class="tdc-main-right-filter"></div>
<div class="tdc-main-right-demo">
<div class="tdc-main-right-demo-brain">
<div class="tdc-brain-part tdc-frontal-lobe">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 263.36 316.37"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>frontal-lobe</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M1.27,192.38c1.08-11.44,4.95-19.83,12.68-36.62A365.14,365.14,0,0,1,32.26,122c1.61-2.63,9.21-15.05,16.9-25.35,24.44-32.73,55.69-52,60.56-54.93,26.78-16.18,50.73-22.39,67.61-26.76,4.64-1.2,12.27-2.39,26.76-5.63,11.63-2.6,17.4-4.09,26.76-5.63,17.17-2.83,25.83-4.16,29.58,0,2.74,3,2.84,8.11-1.41,22.54-7.65,25.95-13.47,28.1-16.9,42.25-5.61,23.14,7.46,27.75,1.41,52.11-4.11,16.57-10.23,14.72-14.08,32.39-4.51,20.66,2.24,30.59-5.63,39.44-5.88,6.6-12.89,4.73-25.35,8.45-22.61,6.74-36.27,23.85-40.85,29.58-21.05,26.36-9.69,48-33.8,70.42-3.76,3.49-8.84,8.11-16.9,11.27-23.36,9.14-50.45-2.41-66.2-15.49-16.14-13.4-22-31.94-33.8-69C1.47,210.48.4,201.55,1.27,192.38Z"/></g></g></svg>
</div>
<div class="tdc-brain-part tdc-cerebellum">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 214.25 161.76"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>cerebellum</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M113.8,157.91c12.66-4.17,35.25-16.66,59.15-46.48,24.13-30.11,32.25-56.24,35.21-67.61,4-15.51,8.74-27.87.68-35.57C202.42,2.13,191.69-1.46,164.5,3c-19.42,3.17-23.72,6.37-36.62,0-9.8-4.84-18.54,4.8-28.17,8.45-25.49,9.68-16.73,7.29-38,16.9-15.87,7.16-20.89,3.28-38,.86-6-.85-17.25,6.69-22,14.49-2.83,4.63,4,6.31,13.56,15.64,10.35,10.05,14.64,21.33,18.31,31,7.08,18.63,2.81,23,8.45,35.21,8.2,17.75,24.74,25.66,29.58,28.17,5.1,2.65,13,6.65,23.94,7A50.93,50.93,0,0,0,113.8,157.91Z"/></g></g></svg>
</div>
<div class="tdc-brain-part tdc-occipital-lobe">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.75 162.7"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>occipital-lobe</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M28.08,150.3c7.67-2,12.21,1.73,21.13,4.23,20.93,5.86,26-6.07,53.52-4.23,20.17,1.35,23.56,8.16,35.21,4.23,12.82-4.33,19.57-16.23,23.94-23.94,9.56-16.84,9.73-33,9.86-45.07a121,121,0,0,0-7-42.25C160.84,32.67,150.78.61,137.94,1c-5.69.17-11.33,6.67-12.68,12.68-1.67,7.45,4.07,10.52,4.23,18.31.13,6.41-3.64,9.38-21.13,28.17C88.12,81.91,89.29,82.11,83,86.92c-8.35,6.39-12.33,7.5-16.9,14.08-6.33,9.11-4.26,15-8.45,21.13-6.29,9.23-17.31,1.73-38,9.86-8.06,3.16-16.6,6.65-18.31,14.08-1.44,6.25,2.18,14.33,7,15.49C14.3,163,17.55,153,28.08,150.3Z"/></g></g></svg>
</div>
<div class="tdc-brain-part tdc-parietal-lobe">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.5 215.34"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>parietal-lobe</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M32.14,3c3.32-4.53,11.53-.24,33.8,1.41C81.54,5.58,85,4,94.12,7.24c7.68,2.71,8.41,4.94,16.9,8.45,10.63,4.39,16.22,3.67,26.76,5.63a119.7,119.7,0,0,1,40.85,16.9c9.49,6.35,7.31,7.28,25.35,22.54C219.67,74,221.62,73.57,232.14,83.3c13,12.06,27,24.92,23.94,35.21a12.91,12.91,0,0,1-.66,1.67c-3.92,8.79-10.77,9-13.42,13.82-3.89,7,6.89,13.83,4.23,23.94-1.24,4.7-4.09,5.44-14.08,14.08A265.16,265.16,0,0,0,208.2,196c-10.74,12.43-12.22,17.65-18.31,18.31s-7.11-4.24-16.9-7c-9.21-2.63-17.38-.89-28.17,1.41-14.05,3-14.68,6-22.54,5.63-10.5-.53-18-6.37-22.54-9.86-5.35-4.15-16-12.38-15.49-22.54.09-1.87,1.94-6,5.63-14.08,5.21-11.45,6.73-13.47,5.63-15.49-2.29-4.25-13.1-3.11-19.72-1.41-11.06,2.84-11.6,7.53-23.94,12.68-4.92,2-11.73,3.24-25.35,5.63-21.13,3.71-23,2.39-23.94,1.41-4.43-4.86,1.38-17.38,7-29.58,5.76-12.41,8.88-14.31,11.27-22.54,3.33-11.47.89-22.23,0-26.76-2.46-12.49-6-12.52-5.63-19.72C15.73,61.36,23.46,61,29.33,45.27a60.81,60.81,0,0,0,4.23-26.76C32.77,9,29.94,6,32.14,3Z"/></g></g></svg>
</div>
<div class="tdc-brain-part tdc-temporal-lobe">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 287.49 189.89"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>temporal-lobe</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M1.11,140c1-7.82,8.46-7.87,16.9-19.72,5.3-7.43,4.49-10.38,12.68-33.8C36.09,71,38.8,63.26,40.54,61.12,51.26,47.95,63.39,54.13,87,40c14-8.4,10.25-10.88,23.94-18.31C114,20,122.33,15.74,154.63,7.6,169,4,175-1.16,178.57,2c4.19,3.63-1.85,10.92,1.41,21.13,4,12.49,18.43,18.49,28.17,22.54,7.21,3,16.44,6.83,28.17,5.63,14.42-1.47,18.71-9.11,33.8-8.45,4.64.2,12.83.56,15.49,5.63,3.1,5.91-2.4,16.14-9.86,19.72-5.77,2.77-9.19-.12-16.9,0-16.57.26-34.76,14.13-36.62,28.17C221,105.45,227.58,108,225,114.64c-5,13.15-35.37,14-39.44,14.08-12.9.35-14.25-2.39-21.13,0-8.52,3-9.51,8.24-23.94,23.94A184.6,184.6,0,0,1,118,173.8c-9.73,7.54-15.42,12-23.94,14.08-8.91,2.22-15.92.57-29.58-2.82-17.22-4.27-33-8.2-47.89-21.13C9.48,157.73-.12,149.37,1.11,140Z"/></g></g></svg>
</div>
<div class="tdc-brain-part tdc-brain-stem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.11 242.51"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>brain-stem</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path class="cls-1" d="M1.14,39c1.11,3.32,7.64,1.49,14,6.24,5.7,4.23,7.64,11,9,15.62,2.44,8.46.11,10.6,2.75,17.69.64,1.71,2.38,5.9,9,13a97.43,97.43,0,0,0,20,16.11c11.14,7.14,19.87,20.74,37.34,47.95,8.16,12.71,13.92,23.27,17.29,29.48,7.46,13.72,11.18,20.59,14.15,27.82,6.37,15.56,5.69,20.13,11.4,24.45,7.51,5.68,17.36,4.32,25.94,3.14,10-1.38,27.39-3.77,33.41-14.93s-6.14-19.19-22-61.31c-8.86-23.52-10.66-35.95-22.8-42.05-7.49-3.77-9.76-.52-23.19-3.93-6.06-1.54-22.74-6-36.94-20.83-3.86-4-15.87-17.52-18.86-37.34-1.2-7.92.56-6.8-.79-13.76C68.11,31.75,59.46,22.12,47,8.19,41.39,2,40.11,1.36,38.71,1.11,31.27-.21,28.11,10.18,8.05,29,4.27,32.56.19,36.14,1.14,39Z"/></g></g></svg>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script><script src="./script.js"></script>
</body>
</html>