-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
48 lines (34 loc) · 1.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quickly Implement and Easily Animate SVG Icons On Your Site</title>
<link rel="stylesheet" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>SVG Icons</h1>
</header>
<section>
<h2> Facebook Icon </h2>
<!-- Facebook icon by Icons8 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="26" height="26" viewBox="0 0 26 26" style="null" class="icon icons8-Facebook" > <path d="M21.125,0H4.875C2.182,0,0,2.182,0,4.875v16.25C0,23.818,2.182,26,4.875,26h16.25 C23.818,26,26,23.818,26,21.125V4.875C26,2.182,23.818,0,21.125,0z M20.464,14.002h-2.433v9.004h-4.063v-9.004h-1.576v-3.033h1.576 V9.037C13.969,6.504,15.021,5,18.006,5h3.025v3.022h-1.757c-1.162,0-1.238,0.433-1.238,1.243l-0.005,1.703h2.764L20.464,14.002z"></path></svg>
<!-- Facebook icon GREEN by Icons8 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="26" height="26" viewBox="0 0 26 26" style="null" class="icon icons8-Facebook-green" > <path d="M21.125,0H4.875C2.182,0,0,2.182,0,4.875v16.25C0,23.818,2.182,26,4.875,26h16.25 C23.818,26,26,23.818,26,21.125V4.875C26,2.182,23.818,0,21.125,0z M20.464,14.002h-2.433v9.004h-4.063v-9.004h-1.576v-3.033h1.576 V9.037C13.969,6.504,15.021,5,18.006,5h3.025v3.022h-1.757c-1.162,0-1.238,0.433-1.238,1.243l-0.005,1.703h2.764L20.464,14.002z"></path></svg>
<div class="hr"></div>
<h2> Animate Icon </h2>
<div id="my-svg">
</div>
</section>
<footer>
<a href="https://www.shopify.com/partners"><img class="shopify" src="images/shopify_glyph.svg" alt="Shopify Logo"></a>
</footer>
<script type="text/javascript" src="js/vivus.js"></script>
<script>
new Vivus('my-svg', {type: 'delayed', duration: 100, file: 'images/facebook.svg'});
</script>
</body>
</html>