-
Notifications
You must be signed in to change notification settings - Fork 50
/
weaver.html
78 lines (78 loc) · 18.3 KB
/
weaver.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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Letter Interactions | Demo: Weaver | Codrops</title>
<meta name="description" content="Some inspiration for playful hover interactions on words" />
<meta name="keywords" content="typography, effects, interaction, hover, animation, javascript, css, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700|Abril+Fatface" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/weaver.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="demo-weaver">
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
</symbol>
<symbol id="icon-github" viewBox="0 0 32.6 31.8">
<title>github</title>
<path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"/>
</symbol>
</svg>
<main>
<div class="content content--fixed">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/TooltipAnimations/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=31349" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Letter Effects & Interaction Ideas</h1>
</header>
<p class="codrops-header__tagline">
<a class="github" href="https://github.com/codrops/LetterInteractions/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
Some playful typographic (hover) animations</p>
<nav class="demos">
<a class="demo" href="index.html"><span>Magneto</span></a>
<a class="demo" href="kidnap.html"><span>Kidnap</span></a>
<a class="demo" href="redraw.html"><span>Redraw</span></a>
<a class="demo" href="swing.html"><span>Swing</span></a>
<a class="demo" href="playful.html"><span>Playful</span></a>
<a class="demo" href="trail.html"><span>Trail Maker</span></a>
<a class="demo" href="crossword.html"><span>Crossword</span></a>
<a class="demo" href="moveout.html"><span>Move Out</span></a>
<a class="demo demo--current" href="weaver.html"><span>Weaver</span></a>
</nav>
<p class="deco">Leve fit, quod bene fertur, onus.</p>
</div>
<section class="content content--layout">
<h2 class="word word--weaver">
<svg class="letter" width="292px" height="208px" viewBox="0 0 292 208">
<path class="letter-solid" d="m 122.112,145.824 23.904,-82.944 -17.28,-55.008 -16.416,0 0,-5.472 89.28,0 0,5.472 -16.992,0 42.912,136.224 34.56,-136.224 -29.088,0 0,-5.472 57.6,0 0,5.472 -19.008,0 -52.992,199.008 -25.632,0 -42.624,-130.176 -37.44,130.176 -25.056,0 -72.576,-199.008 -13.536,0 0,-5.472 93.6,0 0,5.472 -20.16,0 z"></path>
<path class="letter-weaved" d="M 2.1972232,7.5390931 4.3297772,2.1971507 5.311041,7.4257421 7.4180356,2.2554931 8.1942675,7.4185187 10.475734,2.243269 l 0.371169,5.0507859 2.835441,-5.0480077 0.32894,4.2917789 2.707643,-4.2801104 -0.903474,5.3408311 3.646679,-5.6475455 10.872803,5.5975377 7.682307,-5.3202723 7.931234,5.3586116 6.190407,-5.5230817 7.875115,5.1324653 8.191275,-4.8746474 7.155002,5.371947 -0.05056,-5.4569602 2.368147,5.4063968 1.894739,-5.4591828 1.007935,5.8509105 1.797501,-6.0920591 1.174072,6.0064902 1.979197,-5.6069836 1.363545,5.3586116 2.071434,-5.3252731 0.566199,5.2902676 1.989199,-5.5219703 1.157402,4.9374349 1.135732,-4.6929524 1.168515,4.5351501 -78.925059,1.916965 62.470832,9.1125293 -44.65806,40.099573 57.460714,-1.157914 -42.499042,41.551155 60.155697,9.66239 -41.323497,41.50286 23.666842,56.80152 -16.96126,-57.8253 22.893171,58.07681 -14.52775,-58.83291 16.011992,58.83291 -8.91732,-58.59973 15.128882,58.10583 -6.211562,-57.40906 12.206642,57.10921 -4.03301,-58.12194 8.26746,51.64391 -1.10242,-49.11621 6.83804,25.38463 6.98705,-21.59722 -5.74941,-8.88145 -48.568564,0.60157 41.595304,-20.45892 -29.522496,17.75737 30.696666,-12.8496 -22.182232,12.09764 24.370512,-8.52271 -14.80747,8.73243 15.43112,-4.43313 -3.1817,3.87985 4.93122,-0.89876 1.23764,20.48401 7.03258,-11.80484 -3.8357,-13.75196 15.8133,-27.69157 -7.02982,-2.07515 16.39694,-29.585964 -12.50053,-74.3381408 -24.95966,4.8318826 1.96338,-4.8636168 4.71598,5.9825936 2.96922,-5.3893013 3.62047,4.4151982 2.3262,-5.1149446 1.99363,5.2334761 2.55148,-5.3864482 1.76998,6.0902032 7.03215,-5.8212549 -0.0902,5.9551055 5.47831,-6.0241093 17.50552,5.9567593 10.68626,-6.188406 9.69956,5.7170013 4.65877,-5.5885842 0.66322,5.1659455 4.63277,-4.6685322 1.22403,4.5905065 4.39219,-5.1724475 0.88429,5.533316 -36.33022,1.1166494 20.3958,3.1379656 -56.00973,-1.214984 59.48576,14.069868 -45.79165,28.556877 60.42576,16.730395 -44.09094,31.278651 54.36903,1.59299 -41.98747,38.24086 48.79015,-16.75715 -43.55503,33.51272 18.22445,48.59346 -3.6828,-54.34395 11.93261,53.77746 -1.29445,-53.73188 6.86877,54.03173 -0.49453,-60.49485 6.51097,60.195 1.3218,-61.53731 5.94807,44.29593 0,-44.25035 7.61764,17.1932 -6.76814,-21.89012 -23.81909,6.72064 21.58854,-16.79362 -5.88882,10.07298 8.11937,-3.66668 9.40779,17.05459 0.10216,-30.08243 10.91687,-10.49797 -4.79264,-15.164164 24.7768,-65.640734 -4.24114,-12.379283 11.99414,-12.0488335 8.27716,-6.4608367 0.51049,6.3765154 5.01826,-3.9881708 5.02737,3.8377598 -0.5523,-5.0025959 -43.32287,5.0251836 -4.23138,-4.4825266 -1.69524,2.4430779 -2.3433,1.732242 -2.89828,-5.74050423 -2.0899,5.71808033 15.44442,-4.0811397 38.77307,4.4959809 -20.24312,-5.0363955 -5.55775,6.030893 -28.87282,-0.275025 0.10216,-5.6886609 58.00754,-0.049302 0.0908,5.8482546 -19.3468,0.1354271 L 218.61285,206.19772 192.72447,205.95476 151.00353,77.900354 112.99316,206.48909 88.007854,206.66403 15.126544,7.6168296 1.4025493,7.7626111 1.7934902,2.3046335 95.330192,2.5801811 95.483365,7.7716455 75.719088,8.6401748 122.01467,145.84934 146.07058,62.834506 128.71962,7.8235712 112.338,7.7620261 l 0.12309,-5.46603 89.41452,0.1076961 0.47751,5.3175066 -17.44596,0.962367 L 227.57284,143.8596 261.92304,8.1896686"></path>
</svg>
<svg class="letter" width="165px" height="208px" viewBox="0 0 165 208">
<path class="letter-solid" d="M 4,3 153.76,3 156.64,60.024 151.456,60.024 C 143.39196,40.631903 134.94404,27.336036 126.112,20.136 117.27996,12.935964 104.32009,9.336 87.232,9.336 L 77.152,9.336 77.152,98.328 86.944,98.328 C 95.968045,98.328 103.55197,94.920034 109.696,88.104 115.84003,81.287966 120.15999,72.120058 122.656,60.6 L 126.976,60.6 126.976,145.848 122.08,145.848 C 118.62398,131.44793 113.96803,121.17603 108.112,115.032 102.25597,108.88797 94.240051,105.816 84.064,105.816 L 77.152,105.816 77.152,198.264 88.096,198.264 C 105.76009,198.264 120.78394,192.98405 133.168,182.424 145.55206,171.86395 154.04798,158.32808 158.656,141.816 L 164.416,141.816 162.112,204.6 4,204.6 4,198.264 20.992,198.264 20.992,9.336 4,9.336 4,3 Z"></path>
<path class="letter-weaved" d="M 4.1914414,3.194054 6.6136042,8.7236027 10.055335,2.7641821 10.996828,8.3855838 13.660564,3.1747649 14.862001,8.254234 19.071622,3.3557152 18.816271,8.1357437 24.280604,3.1132234 21.424895,9.1847046 32.833034,2.916658 40.007669,8.996406 52.76421,2.807353 61.056696,8.4315103 70.52121,2.515308 76.957363,8.6657353 84.269778,3.2160987 87.352364,8.8659748 93.881273,2.9396213 93.465179,8.5490821 99.434703,2.6897812 102.7956,9.63111 109.39065,3.1371052 111.26812,11.758425 120.76939,2.7412189 120.87962,15.490411 132.63863,2.6962109 125.14068,18.743843 140.31295,2.8395015 127.71348,20.445879 145.41171,2.8799168 129.67454,21.755702 151.57963,2.4224891 131.15337,23.273113 153.77584,2.9074727 131.69989,24.683975 154.18918,7.1134202 133.48184,25.774269 154.55567,12.112059 134.60061,27.693996 154.59333,18.607901 136.14282,29.780896 154.97636,24.185213 138.07817,32.135087 155.49624,29.507174 139.95564,34.761164 155.76629,34.932929 141.41335,38.0247 155.66893,39.372183 143.93195,41.606047 155.57065,43.833481 145.07644,44.740989 155.98123,47.161315 146.95024,48.491346 156.09329,51.090784 150.22388,53.115224 156.53969,54.791541 151.42165,57.281675 156.773,59.056274 151.65312,59.533909 154.32971,14.632504 134.59418,2.8716501 107.34692,11.219248 87.677523,2.8128642 79.55221,8.4664144 21.196284,9.5511901 21.419384,13.842569 76.803969,42.722979 21.237515,59.531232 76.208824,82.069828 21.337635,94.6696 77.454288,105.67349 80.966745,98.342707 83.311751,104.77793 88.975406,98.181964 87.86674,104.50696 94.504954,97.60972 93.950162,105.50908 99.554112,96.663635 98.824799,108.04605 106.33562,90.906291 102.55679,109.60021 110.48186,87.444352 107.0337,112.41734 115.37216,79.520197 109.91421,115.86458 126.89139,126.59393 114.8164,124.40782 127.27901,131.4061 118.11392,132.00406 127.36811,136.5765 120.23481,138.11596 127.00988,140.57211 121.95705,142.46336 127.06867,144.2251 122.42642,145.26304 127.03468,117.96158 112.91964,108.22241 126.92354,100.27805 115.46029,94.63644 127.45261,88.166317 117.53709,82.402543 126.8271,74.020041 119.71033,73.478109 127.4967,68.403232 121.62363,67.05483 127.00529,64.122884 123.31372,60.508469 127.54814,60.199843 117.82367,75.202189 112.45854,119.49736 101.62356,94.611639 85.664106,104.69985 77.400094,98.177372 21.393665,132.60019 76.941748,163.21008 21.385399,169.4121 77.362435,198.03716 21.160359,198.28884 4.6856104,203.98648 6.8680369,197.82223 10.881093,204.19131 14.28149,197.79926 17.04902,203.43904 24.936434,199.79523 26.546617,204.39339 31.429521,200.01476 33.398848,203.39495 37.731553,199.68225 41.035504,204.31899 45.741132,199.62898 49.154388,203.8882 53.950032,199.49028 55.866084,203.65214 60.8041,199.5858 65.511565,204.14998 71.583046,199.39199 74.295464,203.27554 81.563822,198.33932 82.752367,203.95709 86.324529,198.78393 88.340701,204.27398 93.33291,197.74781 95.353676,204.50637 100.03083,197.31428 102.70926,203.85237 106.55969,195.9769 108.82851,204.04527 114.39755,194.014 118.80925,203.97178 122.03788,190.66413 124.16795,204.16651 128.0019,186.97439 130.15309,203.59519 133.84282,181.47883 136.02341,204.47697 140.33872,175.27324 143.14202,203.30126 150.0907,162.91351 149.58918,203.85237 156.05471,150.18085 154.79265,203.6503 159.10882,141.44839 158.74141,204.07007 162.09037,141.74415 163.59768,149.063 153.36893,156.61515 163.69871,162.3036 145.93711,168.93631 163.37815,179.06677 143.28805,171.89305 162.83621,194.42091 137.08707,178.94644 162.11701,204.24642 130.42681,184.62847 154.80142,204.5128 162.21766,204.63883 164.46904,141.81513 158.51846,141.75357 C 158.51846,141.75357 151.48043,171.82024 125.16477,188.3723 106.88149,199.87214 76.997785,197.95781 76.997785,197.95781 L 77.523601,106.10335 C 77.523601,106.10335 97.382764,105.23058 104.72114,110.7772 115.19777,118.69584 121.73454,146.31207 121.73454,146.31207 L 127.08018,146.31207 127.28701,59.841952 123.01844,59.937164 C 123.01844,59.937164 115.04625,86.557708 104.44979,93.939041 96.799594,99.268045 76.777137,98.005732 76.777137,98.005732 L 77.161774,8.6554406 C 77.161774,8.6554406 110.29703,7.8578231 123.32428,16.449413 137.85321,26.031371 151.5874,60.350774 151.5874,60.350774 L 156.47916,60.220918 153.7536,2.577054 4.0797179,2.9437131 4.0625388,9.7075449 21.1177,9.7489673 21.400264,198.12348 3.6948154,198.19269 3.6349648,204.5694 154.92124,204.40398"></path>
</svg>
<svg class="letter" width="180px" height="208px" viewBox="0 0 180 208">
<path class="letter-solid" d="M 2.7160472,2.8537421 88.824078,2.8537421 C 115.51098,2.8537421 135.52586,6.4919964 148.86931,13.768614 162.21277,21.045232 168.88439,33.318277 168.88439,50.588116 168.88439,77.172025 153.04528,93.083325 121.36658,98.32249 L 121.36658,98.904616 C 159.765,103.75569 178.96392,120.6372 178.96392,149.54962 178.96392,170.70032 171.09237,185.49589 155.34901,193.93677 139.60566,202.37764 116.95093,206.59802 87.384145,206.59802 L 2.7160472,206.59802 2.7160472,201.06782 21.435184,201.06782 21.435184,8.3839439 2.7160472,8.3839439 2.7160472,2.8537421 Z M 77.592596,103.56163 77.592596,201.06782 91.127972,201.06782 C 101.68754,201.06782 109.07912,197.38106 113.30295,190.00741 117.52678,182.63377 119.63866,171.76752 119.63866,157.40833 L 119.63866,141.98198 C 119.63866,129.17513 117.04681,119.57014 111.86302,113.16672 106.67923,106.76329 97.463746,103.56163 84.216291,103.56163 L 77.592596,103.56163 Z M 77.592596,8.3839439 77.592596,98.031426 85.080251,98.031426 C 95.063841,98.031426 102.02345,94.975292 105.95929,88.862934 109.89513,82.750575 111.86302,73.388133 111.86302,60.77533 L 111.86302,47.095357 C 111.86302,32.736164 110.13512,22.694582 106.67926,16.97031 103.22339,11.246037 96.599769,8.3839439 86.808171,8.3839439 L 77.592596,8.3839439 Z"></path>
<path class="letter-weaved" d="M 3.2724458,1.0804117 7.2008075,6.208093 9.5436644,0.77360905 10.682911,5.2919759 13.683355,1.6081982 13.902193,6.0257278 18.394815,0.94846513 18.562162,6.2220386 23.429168,1.4590878 22.071083,6.0546917 34.257372,1.3743416 41.28496,7.6172873 49.550306,1.4033055 55.949672,7.5586396 61.923251,1.2874499 68.978102,7.478861 74.680235,1.559925 77.669952,6.3979674 86.870814,0.64380791 86.870814,5.0892287 91.618747,1.7004535 92.672174,5.9956912 99.258778,2.02442 97.571363,6.4162039 106.64993,1.886037 102.6025,9.9648168 122.75707,3.4393597 106.82264,13.599249 137.1936,6.3071809 108.80828,17.133916 152.96427,14.298673 110.37233,22.417144 159.11856,19.54221 111.19512,27.663899 165.19883,27.921356 111.9632,33.404113 167.74765,36.611596 112.28931,40.215991 168.5994,45.417691 112.39229,47.74553 168.93517,52.159841 112.187,54.357511 166.86479,61.690034 111.96066,59.053261 163.86229,68.844863 111.7617,64.784173 160.44928,75.112201 110.47071,70.279818 154.04827,81.670885 109.55098,76.042898 144.90368,87.294523 108.85763,82.020539 134.8554,91.903662 106.74112,86.70518 128.06283,93.189873 103.55187,89.452459 122.54038,95.664677 95.5632,94.205755 77.858754,100.27852 77.683271,94.704184 85.064326,100.24312 86.455665,95.190527 92.325681,100.41583 101.49543,91.293275 99.568798,101.96057 127.77212,97.155781 106.9385,104.71965 139.07125,99.431055 111.59847,108.29615 147.05992,101.65806 113.54441,111.53045 159.21403,108.17922 116.39038,116.33846 166.33807,113.29832 118.21832,121.24086 170.44889,118.73243 119.01751,125.97592 175.0082,126.4426 120.19002,131.27846 177.33809,134.06438 C 140.57196,135.40744 139.78855,137.39199 120.58156,138.73505 L 178.48427,141.05542 120.34664,144.23712 178.31428,150.42141 120.43782,150.42252 177.30748,157.9188 120.31231,157.91773 174.48305,167.91349 119.95616,163.94758 170.42449,175.56997 119.38224,170.99761 164.25911,184.06676 117.22175,177.50483 154.4307,189.91747 115.35519,182.67542 140.39179,196.20585 112.60255,188.62375 127.25506,199.56673 107.674,193.23506 111.77011,200.88942 102.82241,195.49462 101.82584,202.08981 95.894675,196.72505 94.549464,201.42578 89.390673,196.52231 86.001898,201.49659 82.070318,197.42233 78.689052,201.97503 77.725734,197.17346 66.033977,201.76584 56.751587,197.0454 44.769118,202.29148 35.677675,196.62743 27.105436,202.29256 22.890036,197.00122 14.954548,202.32581 10.263471,197.388 7.2673172,201.90959 3.5577938,197.38371 3.6307399,201.49444 15.945757,197.3644 22.959309,201.53091 22.306013,196.6403 77.701522,197.22131 22.311778,176.79084 76.481997,173.44516 21.876901,137.34612 77.920973,127.33401 22.296358,104.09102 76.93267,81.093572 21.65866,78.962641 77.364426,64.920341 21.855463,36.527922 76.897019,18.91071 21.792172,7.1893087 77.240947,7.1600065 81.565504,0.94310144 3.2860331,0.72461593 3.4287966,6.5610234 21.676879,6.9903464 21.925011,196.81407 3.1819776,197.46199 3.5301255,202.41878 108.80935,202.42665 C 108.80935,202.42665 147.66532,197.45521 164.18146,183.56951 177.95187,171.99225 179.35681,145.89557 179.35681,145.89557 179.35681,145.89557 179.27497,124.63226 164.34564,111.76255 149.919,99.326175 122.10441,95.591025 122.10441,95.591025 122.10441,95.591025 147.85907,90.983569 158.78214,76.864019 170.3027,61.97212 169.20657,49.847021 169.20657,49.847021 169.20657,49.847021 171.55058,21.079018 145.1331,9.2388399 125.95819,0.64474385 81.976319,0.86194067 81.976319,0.86194067 L 77.233397,7.0307679 77.546791,94.581828 C 77.546791,94.581828 97.060113,97.873764 103.71583,89.61211 112.05798,79.257105 112.2665,51.094606 112.2665,51.094606 112.2665,51.094606 115.03011,19.773515 101.76771,10.367622 95.238076,5.7367073 77.497122,6.8538805 77.497122,6.8538805 L 21.578787,55.450896 77.938136,100.7234 C 77.938136,100.7234 98.413123,100.23368 106.53416,105.41325 122.04337,115.30498 120.4346,146.88142 120.4346,146.88142 120.4346,146.88142 120.84101,181.42308 109.40494,191.95629 101.49057,199.24583 77.412452,197.25928 77.412452,197.25928 L 77.622362,100.47209"></path>
</svg>
</h2>
</section>
</main>
<script src="js/anime.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/demo9.js"></script>
</body>
</html>