-
Notifications
You must be signed in to change notification settings - Fork 0
/
animatedSVG.html
103 lines (89 loc) · 7.04 KB
/
animatedSVG.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Animated SVG experiment">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Greg Lubel">
<title>
Getting started · Animated SVG
</title>
<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<style type="text/css">
.logo { width:400px;
-moz-animation-name:moving;
-moz-animation-duration:3s;
-moz-animation-timing-function:ease-in-out;
-moz-animation-iteration-count:5;
}
@-moz-keyframes moving1 {
from { -moz-transform:translate(0px);}
to { -moz-transform:translate(500px);}
}
@-moz-keyframes moving {
0% { -moz-transform:translate(0px);}
50% { -moz-transform:translate(1000px);}
100% { -moz-transform:translate(0px);} }
}
</style>
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<body>
<section class="container">
<h2>Animated IBM</h2>
<div class="logo">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="800" viewBox="0 0 800 323" style="background: rgba(255, 128, 97, 0.6);" id="Layer_1" xml:space="preserve">
<defs id="defs82"/>
<g id="g5">
<rect width="67.435997" height="22.073999" x="44.758999" y="85.823997" style="fill: rgb(90, 135, 197);" id="rect7"/>
<rect width="67.435997" height="22.073999" x="44.758999" y="128.735" style="fill: rgb(90, 135, 197);" id="rect9"/>
<rect width="67.435997" height="22.073" x="44.758999" y="171.655" style="fill: rgb(90, 135, 197);" id="rect11"/>
<rect width="67.435997" height="22.073" x="44.758999" y="214.56" style="fill: rgb(90, 135, 197);" id="rect13"/>
<rect width="155.717" height="22.073999" x="1.229" y="257.478" style="fill: rgb(90, 135, 197);" id="rect15"/>
<rect width="155.717" height="22.073" x="1.229" y="300.397" style="fill: rgb(90, 135, 197);" id="rect17"/>
<rect width="155.717" height="22.073" x="0" y="42.904999" style="fill: rgb(90, 135, 197);" id="rect19"/>
<rect width="155.717" height="22.073" x="0" y="0" style="fill: rgb(90, 135, 197);" id="rect21"/>
<polygon points="607.521,107.897 599.552,85.824 487.969,85.824 487.969,107.897 607.521,107.897" style="fill: rgb(90, 135, 197);" id="polygon23"/>
<polygon points="555.405,150.809 555.405,138.543 559.702,150.809 683.228,150.809 687.813,138.543 687.813,150.809 755.249,150.809 755.249,128.735 628.668,128.735 621.928,147.446 615.174,128.735 487.969,128.735 487.969,150.809 555.405,150.809" style="fill: rgb(90, 135, 197);" id="polygon25"/>
<rect width="67.435997" height="22.073" x="487.96899" y="171.655" style="fill: rgb(90, 135, 197);" id="rect27"/>
<polygon points="668.43,193.707 676.179,171.655 567.671,171.655 575.797,193.707 668.43,193.707" style="fill: rgb(90, 135, 197);" id="polygon29"/>
<rect width="67.435997" height="22.073" x="487.96899" y="214.56" style="fill: rgb(90, 135, 197);" id="rect31"/>
<rect width="110.959" height="22.073999" x="444.44601" y="257.478" style="fill: rgb(90, 135, 197);" id="rect33"/>
<rect width="110.959" height="22.073" x="444.44601" y="300.397" style="fill: rgb(90, 135, 197);" id="rect35"/>
<polygon points="652.966,236.633 660.935,214.56 582.983,214.56 590.884,236.633 652.966,236.633" style="fill: rgb(90, 135, 197);" id="polygon37"/>
<polygon points="638.024,279.552 645.669,257.478 598.324,257.478 606.45,279.552 638.024,279.552" style="fill: rgb(90, 135, 197);" id="polygon39"/>
<polygon points="621.537,322.416 622.875,322.45 630.803,300.397 613.733,300.397 621.537,322.416" style="fill: rgb(90, 135, 197);" id="polygon41"/>
<polygon points="443.218,42.926 443.218,64.978 592.195,64.978 584.823,42.926 443.218,42.926" style="fill: rgb(90, 135, 197);" id="polygon43"/>
<polygon points="443.218,0 443.218,22.073 577.479,22.073 569.51,0 443.218,0" style="fill: rgb(90, 135, 197);" id="polygon45"/>
<polygon points="755.249,107.897 755.249,85.824 643.083,85.824 635.106,107.897 755.249,107.897" style="fill: rgb(90, 135, 197);" id="polygon47"/>
<rect width="67.436996" height="22.073" x="687.81299" y="171.655" style="fill: rgb(90, 135, 197);" id="rect49"/>
<rect width="67.436996" height="22.073" x="687.81299" y="214.56" style="fill: rgb(90, 135, 197);" id="rect51"/>
<rect width="112.188" height="22.073999" x="687.81299" y="257.478" style="fill: rgb(90, 135, 197);" id="rect53"/>
<rect width="112.188" height="22.073" x="687.81299" y="300.397" style="fill: rgb(90, 135, 197);" id="rect55"/>
<polygon points="657.791,42.926 650.419,64.978 798.771,64.978 798.771,42.926 657.791,42.926" style="fill: rgb(90, 135, 197);" id="polygon57"/>
<polygon points="673.729,0 665.759,22.073 798.771,22.073 798.771,0 673.729,0" style="fill: rgb(90, 135, 197);" id="polygon59"/>
<rect width="67.436996" height="22.073999" x="222.521" y="85.823997" style="fill: rgb(90, 135, 197);" id="rect61"/>
<path d="M 394.788,150.809 C 394.788,150.809 409.202,139.477 413.793,128.735 L 222.521,128.735 L 222.521,150.809 L 394.788,150.809 z " style="fill: rgb(90, 135, 197);" id="path63"/>
<path d="M 222.521,171.655 L 222.521,193.707 L 413.792,193.707 C 409.2,183 394.787,171.655 394.787,171.655 L 222.521,171.655 z " style="fill: rgb(90, 135, 197);" id="path65"/>
<rect width="67.436996" height="22.073" x="222.521" y="214.56" style="fill: rgb(90, 135, 197);" id="rect67"/>
<path d="M 422.998,107.897 C 422.998,107.897 427.288,96.249 427.288,85.823 L 355.562,85.823 L 355.562,107.897 L 422.998,107.897 z " style="fill: rgb(90, 135, 197);" id="path69"/>
<path d="M 355.561,214.56 L 355.561,236.633 L 427.287,236.633 C 427.287,226.221 422.997,214.56 422.997,214.56 L 355.561,214.56 z " style="fill: rgb(90, 135, 197);" id="path71"/>
<path d="M 177.792,42.926 L 177.792,64.978 L 425.44,64.978 C 425.44,64.978 422.537,47.977 417.492,42.926 L 177.792,42.926 L 177.792,42.926 z " style="fill: rgb(90, 135, 197);" id="path73"/>
<path d="M 417.492,279.552 C 422.537,274.493 425.44,257.478 425.44,257.478 L 177.792,257.478 L 177.792,279.552 L 417.492,279.552 z " style="fill: rgb(90, 135, 197);" id="path75"/>
<path d="M 177.792,0 L 177.792,22.073 L 399.695,22.073 C 399.695,22.073 377.01,0 346.989,0 L 177.792,0 z " style="fill: rgb(90, 135, 197);" id="path77"/>
<path d="M 346.989,322.45 C 377.01,322.45 399.695,300.397 399.695,300.397 L 177.792,300.397 L 177.792,322.45 L 346.989,322.45 z " style="fill: rgb(90, 135, 197);" id="path79"/>
</g>
</svg>
</div>
</section>
</body>
</html>