index.html
12.8 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>SVG demo</title>
<style type="text/css">
html,
body { height: 100%; width: 100%;}
body { background-color: #333;}
body *{ transition: all 0.8s;}
.logo1 .tanuki-shape,
.logo1 .tanuki-shape *{
transition: all 0.8s
}
.logo1 .tanuki-shape:hover,
.logo1 .tanuki-shape:hover *{
fill: white;
transition: all 0.1s
}
.logo2:hover *{
fill: white;
stroke-width: 1;
stroke: #000;
transition: all 0.1s
}
svg{
transform: scale(2,2);
margin: 5em 0;
}
</style>
</head>
<body>
<div style="width: 400px; margin: 4em auto; text-align: center;">
<svg version="1.1" id="BigBangLogo" class="logo1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="164" height="96" viewBox="0 0 164 96" xml:space="preserve">
<g id="Group">
<g id="B" class="tanuki-shape">
<rect id="B_01" x="0" y="6.205" fill="#24ACE4" width="12.329" height="29.771"></rect>
<circle id="B_02" fill="#24ACE4" cx="6.255" cy="6.205" r="6.205"></circle>
<path id="B_03" fill="#24ACE4" d="M20.417,14.753C9.191,14.753,0.09,23.853,0.09,35.08c0,11.226,9.101,20.327,20.327,20.327 s20.327-9.101,20.327-20.327C40.744,23.853,31.643,14.753,20.417,14.753z M20.417,43.077c-4.417,0-7.997-3.581-7.997-7.997 c0-4.417,3.581-7.997,7.997-7.997c4.417,0,7.997,3.581,7.997,7.997C28.414,39.496,24.834,43.077,20.417,43.077z"></path>
</g>
<g id="I" class="tanuki-shape">
<circle id="I_01" fill="#24ACE4" cx="51.498" cy="6.205" r="6.205"></circle>
<g id="I_02">
<rect id="I_01_01" x="45.333" y="22.75" fill="#24ACE4" width="12.329" height="26.451"></rect>
<circle id="I_01_02" fill="#24ACE4" cx="51.498" cy="22.75" r="6.205"></circle>
<circle id="I_01_03" fill="#24ACE4" cx="51.498" cy="49.202" r="6.205"></circle>
</g>
</g>
<g id="G" class="tanuki-shape">
<rect id="G_01" x="90.254" y="32.06" fill="#24ACE4" width="12.329" height="14.825"></rect>
<rect id="G_02" x="90.254" y="34.477" fill="#24ACE4" width="12.329" height="12.408"></rect>
<path id="G_04" fill="#24ACE4" d="M90.004,45.802c0,20.702-16.89,37.485-37.724,37.485 c-13.451,0-25.258-6.995-31.937-17.524c-3.666-5.78-15.839-1.936-11.432,5.542c8.746,14.842,24.895,24.801,43.369,24.801 c27.782,0,50.303-22.522,50.303-50.303c0-2.584-0.196-5.122-0.571-7.601l-10.985,1.122 C91.536,41.777,90.004,43.197,90.004,45.802z"></path>
<circle id="G_01" fill="#24ACE4" cx="14.167" cy="67.617" r="6.205"></circle>
<path id="G_03" fill="#24ACE4" d="M82.257,14.753c-11.226,0-20.327,9.101-20.327,20.327 c0,11.226,9.101,20.327,20.327,20.327s20.327-9.101,20.327-20.327C102.583,23.853,93.483,14.753,82.257,14.753z M82.257,43.077 c-4.417,0-7.997-3.581-7.997-7.997c0-4.417,3.581-7.997,7.997-7.997c4.417,0,7.997,3.581,7.997,7.997 C90.254,39.496,86.673,43.077,82.257,43.077z"></path>
</g>
<g id="Feng" class="tanuki-shape">
<path id="Feng_01" fill="#24ACE4" d="M113.516,36.158h8.202l0.283-2.916h-7.942v-4.898h7.942v-2.831h-8.473v-4.898h8.473h5.266 h9.251v4.898h-9.251v2.831h8.828l-0.001,4.898h-8.827l-0.198,2.916h9.452l0,4.898h-10.952c-1.132,1.907-2.161,3.266-3.086,4.077 c-1.642,1.434-3.492,2.473-5.549,3.114c-0.753,0.236-1.73,0.449-2.931,0.638c-0.816,0.129-1.378-4.812-0.772-4.929 c1.19-0.23,2.16-0.527,2.911-0.89c0.849-0.396,1.802-1.066,2.859-2.01h-5.484L113.516,36.158z"></path>
<circle id="Feng_02" fill="#24ACE4" cx="124.624" cy="20.661" r="2.647"></circle>
<circle id="Feng_03" fill="#24ACE4" cx="113.527" cy="23.064" r="2.449"></circle>
<circle id="Feng_04" fill="#24ACE4" cx="136.517" cy="23.064" r="2.449"></circle>
<circle id="Feng_05" fill="#24ACE4" cx="114.059" cy="30.799" r="2.443"></circle>
<circle id="Feng_06" fill="#24ACE4" cx="136.095" cy="30.792" r="2.45"></circle>
<circle id="Feng_07" fill="#24ACE4" cx="113.516" cy="38.607" r="2.443"></circle>
<circle id="Feng_08" fill="#24ACE4" cx="136.52" cy="38.607" r="2.449"></circle>
<path id="Feng_09" fill="#24ACE4" d="M111.25,46.4c0-1.377,1.116-2.493,2.493-2.493c1.377,0,2.493,1.116,2.493,2.493 c0,1.242-0.909,2.272-2.097,2.462c-0.129,0.021-0.261,0.031-0.395,0.031C112.366,48.893,111.25,47.776,111.25,46.4z"></path>
</g>
<g id="Er" class="tanuki-shape">
<path id="Er_01" fill="#24ACE4" d="M141.11,54.814l0-30.995c0-3.586,1.934-5.379,5.804-5.379h10.701 c2.114,0,3.624,0.444,4.53,1.33c0.944,0.944,1.415,2.369,1.415,4.275v5.492c0,1.265-0.425,2.303-1.274,3.114 c0.51,0.396,0.859,0.755,1.048,1.076c0.151,0.246,0.226,0.953,0.226,2.123v5.888c0,1.302-0.425,2.397-1.274,3.284 c-0.529,0.566-1.057,0.934-1.585,1.104c-0.736,0.227-1.765,0.34-3.086,0.34h-3.89l0-5.209h2.192c1.094,0,1.765-0.151,2.01-0.453 c0.245-0.302,0.368-0.764,0.368-1.387v-2.236c0-0.623-0.151-1.076-0.453-1.359c-0.283-0.283-0.962-0.425-2.038-0.425h-2.609 v-5.181h2.609c1.132,0,1.84-0.142,2.123-0.425c0.245-0.264,0.368-0.585,0.368-0.962v-3.369c0-0.566-0.151-0.991-0.453-1.274 c-0.226-0.245-0.972-0.368-2.236-0.368h-6.681l-1.387-0.029c-0.793,0.095-1.189,0.878-1.189,2.35v28.674H141.11z"></path>
<path id="Er_02" fill="#24ACE4" d="M150.603,32.81c0-1.429,1.155-2.588,2.58-2.588c1.425,0,2.58,1.159,2.58,2.588 c0,1.425-1.149,2.582-2.569,2.588c-0.004,0-0.007,0-0.011,0C151.758,35.397,150.603,34.239,150.603,32.81z"></path>
<circle id="Er_03" fill="#24ACE4" cx="153.725" cy="43.864" r="2.6"></circle>
</g>
<g id="Jing" class="tanuki-shape">
<g id="Jing_01">
<path id="Jing_01_01" fill="#24ACE4" d="M111.951,62.778v-7.029c0-2.246,0.481-3.831,1.444-4.756 c0.963-0.944,2.076-1.415,3.341-1.415h17.949h5.237h17.354c3.68,0,5.549,1.765,5.605,5.294l0.057,4.614 c0.057,3.963-1.831,5.945-5.662,5.945h-1.047c0,0-0.65-5.088-0.393-5.128c1.187-0.188,1.78-0.809,1.78-1.864v-1.501 c0-1.416-0.699-2.123-2.095-2.123h-15.599h-5.237h-15.231c-0.906,0-1.538,0.265-1.897,0.793c-0.189,0.265-0.283,0.774-0.283,1.529 v5.642L111.951,62.778z"></path>
<circle id="Jing_01_02" fill="#24ACE4" cx="114.615" cy="62.783" r="2.648"></circle>
<circle id="Jing_01_03" fill="#24ACE4" cx="156.237" cy="62.852" r="2.579"></circle>
</g>
<circle id="Jing_02" fill="#24ACE4" cx="143.809" cy="62.751" r="3.037"></circle>
</g>
</g>
</svg>
<hr>
<svg version="1.1" id="BigBangLogo" class="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="164" height="96" viewBox="0 0 164 96" xml:space="preserve">
<g id="Group">
<g id="B" class="tanuki-shape">
<rect id="B_01" x="0" y="6.205" fill="#24ACE4" width="12.329" height="29.771"></rect>
<circle id="B_02" fill="#24ACE4" cx="6.255" cy="6.205" r="6.205"></circle>
<path id="B_03" fill="#24ACE4" d="M20.417,14.753C9.191,14.753,0.09,23.853,0.09,35.08c0,11.226,9.101,20.327,20.327,20.327 s20.327-9.101,20.327-20.327C40.744,23.853,31.643,14.753,20.417,14.753z M20.417,43.077c-4.417,0-7.997-3.581-7.997-7.997 c0-4.417,3.581-7.997,7.997-7.997c4.417,0,7.997,3.581,7.997,7.997C28.414,39.496,24.834,43.077,20.417,43.077z"></path>
</g>
<g id="I" class="tanuki-shape">
<circle id="I_01" fill="#24ACE4" cx="51.498" cy="6.205" r="6.205"></circle>
<g id="I_02">
<rect id="I_01_01" x="45.333" y="22.75" fill="#24ACE4" width="12.329" height="26.451"></rect>
<circle id="I_01_02" fill="#24ACE4" cx="51.498" cy="22.75" r="6.205"></circle>
<circle id="I_01_03" fill="#24ACE4" cx="51.498" cy="49.202" r="6.205"></circle>
</g>
</g>
<g id="G" class="tanuki-shape">
<rect id="G_01" x="90.254" y="32.06" fill="#24ACE4" width="12.329" height="14.825"></rect>
<rect id="G_02" x="90.254" y="34.477" fill="#24ACE4" width="12.329" height="12.408"></rect>
<path id="G_04" fill="#24ACE4" d="M90.004,45.802c0,20.702-16.89,37.485-37.724,37.485 c-13.451,0-25.258-6.995-31.937-17.524c-3.666-5.78-15.839-1.936-11.432,5.542c8.746,14.842,24.895,24.801,43.369,24.801 c27.782,0,50.303-22.522,50.303-50.303c0-2.584-0.196-5.122-0.571-7.601l-10.985,1.122 C91.536,41.777,90.004,43.197,90.004,45.802z"></path>
<circle id="G_01" fill="#24ACE4" cx="14.167" cy="67.617" r="6.205"></circle>
<path id="G_03" fill="#24ACE4" d="M82.257,14.753c-11.226,0-20.327,9.101-20.327,20.327 c0,11.226,9.101,20.327,20.327,20.327s20.327-9.101,20.327-20.327C102.583,23.853,93.483,14.753,82.257,14.753z M82.257,43.077 c-4.417,0-7.997-3.581-7.997-7.997c0-4.417,3.581-7.997,7.997-7.997c4.417,0,7.997,3.581,7.997,7.997 C90.254,39.496,86.673,43.077,82.257,43.077z"></path>
</g>
<g id="Feng" class="tanuki-shape">
<path id="Feng_01" fill="#24ACE4" d="M113.516,36.158h8.202l0.283-2.916h-7.942v-4.898h7.942v-2.831h-8.473v-4.898h8.473h5.266 h9.251v4.898h-9.251v2.831h8.828l-0.001,4.898h-8.827l-0.198,2.916h9.452l0,4.898h-10.952c-1.132,1.907-2.161,3.266-3.086,4.077 c-1.642,1.434-3.492,2.473-5.549,3.114c-0.753,0.236-1.73,0.449-2.931,0.638c-0.816,0.129-1.378-4.812-0.772-4.929 c1.19-0.23,2.16-0.527,2.911-0.89c0.849-0.396,1.802-1.066,2.859-2.01h-5.484L113.516,36.158z"></path>
<circle id="Feng_02" fill="#24ACE4" cx="124.624" cy="20.661" r="2.647"></circle>
<circle id="Feng_03" fill="#24ACE4" cx="113.527" cy="23.064" r="2.449"></circle>
<circle id="Feng_04" fill="#24ACE4" cx="136.517" cy="23.064" r="2.449"></circle>
<circle id="Feng_05" fill="#24ACE4" cx="114.059" cy="30.799" r="2.443"></circle>
<circle id="Feng_06" fill="#24ACE4" cx="136.095" cy="30.792" r="2.45"></circle>
<circle id="Feng_07" fill="#24ACE4" cx="113.516" cy="38.607" r="2.443"></circle>
<circle id="Feng_08" fill="#24ACE4" cx="136.52" cy="38.607" r="2.449"></circle>
<path id="Feng_09" fill="#24ACE4" d="M111.25,46.4c0-1.377,1.116-2.493,2.493-2.493c1.377,0,2.493,1.116,2.493,2.493 c0,1.242-0.909,2.272-2.097,2.462c-0.129,0.021-0.261,0.031-0.395,0.031C112.366,48.893,111.25,47.776,111.25,46.4z"></path>
</g>
<g id="Er" class="tanuki-shape">
<path id="Er_01" fill="#24ACE4" d="M141.11,54.814l0-30.995c0-3.586,1.934-5.379,5.804-5.379h10.701 c2.114,0,3.624,0.444,4.53,1.33c0.944,0.944,1.415,2.369,1.415,4.275v5.492c0,1.265-0.425,2.303-1.274,3.114 c0.51,0.396,0.859,0.755,1.048,1.076c0.151,0.246,0.226,0.953,0.226,2.123v5.888c0,1.302-0.425,2.397-1.274,3.284 c-0.529,0.566-1.057,0.934-1.585,1.104c-0.736,0.227-1.765,0.34-3.086,0.34h-3.89l0-5.209h2.192c1.094,0,1.765-0.151,2.01-0.453 c0.245-0.302,0.368-0.764,0.368-1.387v-2.236c0-0.623-0.151-1.076-0.453-1.359c-0.283-0.283-0.962-0.425-2.038-0.425h-2.609 v-5.181h2.609c1.132,0,1.84-0.142,2.123-0.425c0.245-0.264,0.368-0.585,0.368-0.962v-3.369c0-0.566-0.151-0.991-0.453-1.274 c-0.226-0.245-0.972-0.368-2.236-0.368h-6.681l-1.387-0.029c-0.793,0.095-1.189,0.878-1.189,2.35v28.674H141.11z"></path>
<path id="Er_02" fill="#24ACE4" d="M150.603,32.81c0-1.429,1.155-2.588,2.58-2.588c1.425,0,2.58,1.159,2.58,2.588 c0,1.425-1.149,2.582-2.569,2.588c-0.004,0-0.007,0-0.011,0C151.758,35.397,150.603,34.239,150.603,32.81z"></path>
<circle id="Er_03" fill="#24ACE4" cx="153.725" cy="43.864" r="2.6"></circle>
</g>
<g id="Jing" class="tanuki-shape">
<g id="Jing_01">
<path id="Jing_01_01" fill="#24ACE4" d="M111.951,62.778v-7.029c0-2.246,0.481-3.831,1.444-4.756 c0.963-0.944,2.076-1.415,3.341-1.415h17.949h5.237h17.354c3.68,0,5.549,1.765,5.605,5.294l0.057,4.614 c0.057,3.963-1.831,5.945-5.662,5.945h-1.047c0,0-0.65-5.088-0.393-5.128c1.187-0.188,1.78-0.809,1.78-1.864v-1.501 c0-1.416-0.699-2.123-2.095-2.123h-15.599h-5.237h-15.231c-0.906,0-1.538,0.265-1.897,0.793c-0.189,0.265-0.283,0.774-0.283,1.529 v5.642L111.951,62.778z"></path>
<circle id="Jing_01_02" fill="#24ACE4" cx="114.615" cy="62.783" r="2.648"></circle>
<circle id="Jing_01_03" fill="#24ACE4" cx="156.237" cy="62.852" r="2.579"></circle>
</g>
<circle id="Jing_02" fill="#24ACE4" cx="143.809" cy="62.751" r="3.037"></circle>
</g>
</g>
</svg>
</div>
</body>
</html>