HTML5 SVG 特效示例
阿新 • • 發佈：2019-02-13
SVG來生成動畫
**示例說明：
示例１
注意viewBox屬性可以幫助你設定svg影象大小
-fill屬性是否填充
-stroke為繪製，顏色#AAAAAA
-stroke-width為繪製線的粗細
-d是具體資料，這裡看到的資料代表了座標，以及折線等等，可以使用工具生成
示例２
在SVG圖形中，我們只需要調整stroke-dasharray和stroke-dashoffset即可模擬出線段繪製的動畫效果
-stroke-dasharray定義了生成線段長度，及其線段和線段之間的縫隙 ，這裡包含兩個引數
-stroke-dashoffset定義了從那個位置開始渲染生成線段
-stroke-dasharray可以看到我們生成100px的線段，並且生成10px的線段之間的縫隙
-stroke-dashoffset定義從那個位置開始繪製
示例３
使用CSS3的keyframe可以直接指定動畫效果
示例4
用js完成示例3
示例5
複雜圖形動畫
-針對更復雜的圖形，我們需要處理多個path物件
-dd
程式碼塊
示例1：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<path fill="none" stroke="#AAA" 示例2：
/*CSS程式碼片段*/
div{
font-size:12px;
padding: 10px 0;
}
input{
width: 280px;
}
/* 定義一些輔助美化css*//*Javascript程式碼片段*/
//獲取本例SVG圖形線段長度
$('#len').html($('path' <svg class="gbtags" viewBox="0 0 300 125" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="#222" stroke-width="2" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" stroke-dasharray="100 10" stroke-dashoffset="0" />
<h5>stroke-dasharray:</h5>
<input type="range" id="dasharray" min="0" max="265.0744323730469" value="265.0744323730469">
<h5>stroke-dashoffset:</h5>
<input type="range" id="dashoffset" min="0" max="265.0744323730469" value="0">
<!-- 注意上面的數值是本例這個素描線段的長度，通常我們可以使用js來獲取需要處理的線段長度-->
<div>素描線長度：<span id="len"></span>
</div>
</svg>
<!-- 匯入jQuery -->
<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.js"></script>示例3：
/*定義keyframe動畫*/
/* 新增動畫到path元素 */
.path{
stroke-dasharray: 265.07;
stroke-dashoffset: 265.07;
animation: dash 3s linear infinite;
/* 支援chrome */
-webkit-animation: dash 3s linear infinite;
}
@keyframes dash{
from{
stroke-dashoffset: 265.07; /* 這裡是svg圖形中素描線長度，可以使用js獲取 */
}
to{
stroke-dashoffset: 0;
}
}
/* 支援chrome瀏覽器 */
@-webkit-keyframes dash{
from{
stroke-dashoffset: 265.07; /* 這裡是svg圖形中素描線長度，可以使用js獲取 */
}
to{
stroke-dashoffset: 0;
}
}/*Javascript程式碼片段*/
var len = $('path')[0].getTotalLength(); // 得到素描線長度
$('#len').html(len);
//注意，對於CSS3的keyframe來實現動畫效果不需要js輔助，但我們需要知道這個素描線“長度”，使用js可以幫助我們獲取 <!-- 匯入需要執行動畫效果的SVG，使用上節的SVG圖形-->
<svg class="gbtags" viewBox="0 0 300 125" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path class="path" fill="none" stroke="#222" stroke-width="2" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" />
</svg>
素描線長度：<span id="len"></span>
<!-- 匯入jQuery:這裡使用jQuery只為了顯示執行動畫效果的svg圖形素描線長度 -->
<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.js"></script>示例4：
/*新增body背景*/
body{
background: #41b1e7;
}/*定義相關Javascript*/
var current_frame, //定義當前幀
total_frames, //定義全部幀數
path, //定義svg中的唯一path元素
length, //定義path所生成的素描長度
handle; //定義javascript動畫控制代碼
path = document.getElementById('path'),
length = path.getTotalLength();
//定義初始化方法
var init = function(){
current_frame = 0;
total_frames = 160;
path.style.strokeDasharray = length + ' ' + length; //定義dasharray
path.style.strokeDashoffset = length; //定義dashoffset
handle = 0;
}
//定義實際的動畫繪製方法
var draw = function(){
var progress = current_frame/total_frames;
if(progress>1){ //這裡定義完成動畫
window.cancelAnimationFrame(handle);
}else{//否則使用reqeuestAnimationFrame來生成動畫
current_frame++;
path.style.strokeDashoffset = Math.floor(length*(1 - progress));
handle = window.requestAnimationFrame(draw);
}
}
//定義一個重新執行方法
var rerun = function(){
init();
draw();
}
//頁面載入即執行
rerun();<body>
<svg class="gbtags" width="300" height="325" viewBox="0 0 300 325"
version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="path" fill="none" stroke="#FFFFFF" stroke-width="2"
d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" />
</svg>
<!-- 新增一個按鈕 -->
<button onclick="rerun();">執行動畫</button>
<script type="text/javascript" src="../js/demo2.js"></script>示例5：
/*CSS程式碼片段*/
/* 定義背景色 */
body{
background: #41b1e7;
}
/* 重新定義path元素屬性，生成素描 */
path{
fill:none;
stroke: #FFFFFF; /* 素描線顏色*/
stroke-width: 2; /* 素描線粗細 */
}/*處理素描動畫相關Javascript*/
//大體程式碼和上一節類似，只不過這裡我們需要處理多個素描線即path元素
var current_frame, //定義當前幀
total_frames, //定義全部幀數
path, //定義svg中的唯一path元素
length, //定義path所生成的素描長度
handle; //定義javascript動畫控制代碼
//定義初始化方法
var init = function(){
current_frame = 0;
total_frames = 80;
path = new Array(); // 這裡儲存多個path元素
length = new Array(); // 這裡儲存每一個path元素長度
$('path').each(function(i, item){
path[i] = $(this)[0];
len = path[i].getTotalLength();
length[i] = len;
path[i].style.strokeDasharray = len + ' ' + len;
path[i].style.strokeDashoffset = len;
});
handle = 0;
}
//定義實際的動畫繪製方法，基本方法類似，只不過這裡需要處理多條線段的動畫繪製
var draw = function(){
var progress = current_frame/total_frames;
if(progress>1){ //這裡定義完成動畫
window.cancelAnimationFrame(handle);
}else{//否則使用reqeuestAnimationFrame來生成動畫
current_frame++;
//這裡處理多條素描線段繪製動畫
for(var j=0;j<path.length;j++){
path[j].style.strokeDashoffset = Math.floor(length[j]*(1-progress));
}
handle = window.requestAnimationFrame(draw);
}
}
//定義一個重新執行方法
var rerun = function(){
init();
draw();
}
//頁面載入即執行
rerun();<button onclick="rerun();">執行動畫</button><!-- 新增動畫按鈕 -->
<svg class="line-drawing" id="mac" width="300" height="325" viewBox="0 0 300 325" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#848484" d=" M 46.04 9.98 C 54.77 7.32 64.01 8.08 73.00 8.04 C 127.33 8.02 181.67 8.06 236.00 8.01 C 245.50 8.06 256.41 8.93 263.35 16.23 C 256.34 14.88 250.53 9.45 243.05 10.02 C 181.36 9.97 119.67 9.96 57.97 10.02 C 52.60 9.78 47.56 11.87 42.35 12.79 C 43.40 11.64 44.45 10.35 46.04 9.98 Z" />
<path fill="#848484" d=" M 42.45 10.43 C 40.25 15.79 34.89 18.77 30.47 22.11 C 32.11 16.26 38.33 14.17 42.45 10.43 Z" />
<path fill="#767676" d=" M 159.62 16.05 C 160.45 15.54 161.28 15.03 162.11 14.51 C 165.07 16.59 168.15 18.72 170.10 21.84 C 171.62 23.94 172.55 26.72 175.05 27.89 C 178.32 29.64 181.83 30.96 184.88 33.11 C 192.65 38.20 198.44 45.66 205.91 51.12 C 208.10 52.58 210.47 54.11 213.16 54.32 C 215.54 53.95 217.71 52.68 220.13 52.51 C 221.58 53.89 222.63 55.61 223.91 57.14 C 226.74 60.73 230.63 63.24 234.09 66.17 C 233.58 66.48 232.58 67.11 232.08 67.42 C 227.39 63.21 222.99 58.70 218.33 54.47 C 218.42 55.01 218.62 56.09 218.72 56.63 C 214.56 55.47 209.83 56.42 206.15 53.77 C 197.68 47.71 191.55 38.79 182.40 33.62 C 178.97 31.62 174.97 30.62 171.81 28.17 C 168.43 23.61 166.14 16.72 159.62 16.05 Z" />
<path fill="#6d6d6d" d=" M 137.50 23.51 C 141.38 21.36 144.72 18.14 149.05 16.90 C 151.59 17.32 153.73 18.97 156.20 19.62 C 158.04 19.50 159.78 18.87 161.57 18.47 C 160.23 19.87 159.30 22.56 156.92 22.09 C 153.99 21.68 151.65 19.68 149.20 18.18 C 133.37 28.14 116.75 36.78 100.07 45.22 C 93.23 48.54 86.96 53.19 79.54 55.21 C 85.92 48.78 95.28 47.04 102.46 41.80 C 99.93 41.89 97.41 42.10 94.89 42.35 C 95.30 41.85 95.71 41.36 96.12 40.87 C 99.02 41.16 102.19 42.24 104.94 40.79 C 115.70 34.86 126.82 29.59 137.50 23.51 Z" />
<path fill="#707070" d=" M 263.61 16.71 C 273.06 22.24 278.47 33.85 277.95 44.61 C 275.87 39.87 275.69 34.49 273.14 29.92 C 270.95 24.83 266.21 21.53 263.61 16.71 Z" />
<path fill="#444444" d=" M 22.44 34.50 C 24.18 29.90 25.92 24.91 29.97 21.79 C 27.10 28.73 21.98 35.05 22.05 42.93 C 21.94 65.95 22.06 88.97 22.00 112.00 C 21.98 115.76 22.01 119.54 22.36 123.29 C 23.80 116.57 25.78 109.89 26.02 102.98 C 26.37 98.86 25.84 94.34 28.51 90.85 C 28.19 95.65 27.65 100.44 27.16 105.22 C 26.38 113.24 23.54 120.92 23.00 128.97 C 22.59 135.52 22.38 142.14 23.41 148.64 C 24.58 155.30 26.60 161.78 28.57 168.24 C 26.88 167.59 25.19 166.95 23.52 166.27 C 24.16 165.98 25.44 165.41 26.08 165.12 C 26.07 164.73 26.06 163.96 26.05 163.57 C 25.69 163.50 24.98 163.35 24.63 163.27 C 24.36 158.71 24.18 153.70 21.29 149.92 C 21.69 140.97 21.54 131.99 20.94 123.05 C 21.04 99.37 20.99 75.68 20.99 52.00 C 21.04 46.15 20.34 40.11 22.44 34.50 Z" />
<path fill="#212121" d=" M 276.99 47.86 L 278.01 47.85 C 278.02 107.91 277.98 167.97 278.03 228.03 C 278.26 239.17 273.08 250.35 264.43 257.36 C 258.52 261.72 251.47 265.33 243.93 265.04 L 244.68 264.73 C 252.15 262.63 260.00 260.24 265.63 254.59 C 273.03 247.53 277.42 237.29 277.01 227.03 C 276.99 167.31 277.01 107.59 276.99 47.86 Z" />
<path fill="#6b6b6b" d=" M 63.16 64.08 C 68.31 60.92 73.17 56.80 79.29 55.73 C 73.87 60.40 67.16 63.24 61.37 67.42 C 57.05 69.90 53.96 74.85 48.56 75.01 C 46.21 80.53 44.54 86.30 43.11 92.11 C 38.90 90.65 34.57 92.03 30.32 92.49 C 33.63 89.88 38.03 90.17 41.85 88.88 C 44.52 84.62 44.24 79.17 46.75 74.83 C 47.69 74.02 48.85 73.54 49.94 72.99 C 54.89 70.88 58.59 66.81 63.16 64.08 Z" />
<path fill="#d4d4d4" d=" M 234.09 66.17 C 235.45 65.33 236.83 64.52 238.21 63.71 C 238.14 65.55 238.06 67.39 237.96 69.23 C 236.87 68.86 235.77 68.54 234.66 68.21 C 233.80 67.95 232.94 67.69 232.08 67.42 C 232.58 67.11 233.58 66.48 234.09 66.17 Z" />
<path fill="#787878" d=" M 234.66 68.21 C 235.77 68.54 236.87 68.86 237.96 69.23 C 245.38 73.31 252.34 78.69 257.70 85.30 C 260.35 88.08 258.59 91.92 257.84 95.09 C 256.68 94.33 255.53 93.58 254.37 92.82 C 255.69 91.71 258.75 90.74 257.52 88.51 C 252.22 79.46 242.22 75.00 234.66 68.21 Z" />
<path fill="#909090" d=" M 259.12 94.29 C 262.46 94.45 257.57 97.26 259.12 94.29 Z" />
<path fill="#8d8d8d" d=" M 264.77 104.18 C 264.02 100.74 261.92 97.77 261.29 94.30 C 265.45 96.36 266.43 100.98 267.62 105.02 C 264.69 106.85 261.73 108.65 258.59 110.10 C 260.02 107.54 262.20 105.57 264.77 104.18 Z" />
<path fill="#a1a1a1" d=" M 262.23 110.24 C 264.09 110.64 263.01 113.47 261.34 112.87 C 259.45 112.45 260.54 109.65 262.23 110.24 Z" />
<path fill="#7d7d7d" d=" M 263.55 111.77 C 265.33 112.43 267.08 113.20 268.77 114.08 C 269.49 113.91 270.21 113.73 270.94 113.56 C 273.41 116.41 274.05 120.04 272.93 123.63 C 272.24 123.75 270.86 123.97 270.17 124.08 C 270.94 121.93 273.00 119.19 270.90 117.14 C 268.44 115.33 265.11 114.62 263.55 111.77 Z" />
<path fill="#767676" d=" M 263.21 114.55 C 266.27 115.65 268.50 118.01 270.17 120.72 C 268.33 120.56 266.50 120.40 264.66 120.30 C 264.11 118.40 263.64 116.48 263.21 114.55 Z" />
<path fill="#5a5a5a" d=" M 266.61 121.42 C 268.59 124.08 268.85 127.47 268.59 130.68 C 267.86 141.01 268.83 151.49 266.80 161.72 C 263.50 178.49 258.31 194.89 251.67 210.64 C 249.96 214.80 249.03 219.93 244.87 222.44 C 246.25 218.48 248.59 214.96 250.05 211.04 C 257.71 191.72 264.73 171.82 266.82 151.01 C 267.01 141.15 267.29 131.27 266.61 121.42 Z" />
<path fill="#4b4b4b" d=" M 158.84 136.73 C 165.06 135.38 170.42 130.85 176.99 131.00 C 182.33 131.38 187.62 132.23 192.90 133.09 C 195.26 133.41 197.47 134.37 199.38 135.78 C 191.66 134.65 184.05 132.46 176.19 132.42 C 171.97 132.60 168.25 134.76 164.52 136.50 C 160.32 138.60 155.50 138.02 150.98 138.08 C 144.92 138.13 138.94 137.08 132.98 136.09 C 129.14 135.43 125.16 135.03 121.64 133.23 C 134.03 134.19 146.29 138.14 158.84 136.73 Z" />
<path fill="#616161" d=" M 102.91 131.91 C 105.71 131.89 108.52 131.91 111.31 132.18 C 108.70 133.17 105.94 133.65 103.17 133.96 C 103.10 133.45 102.97 132.43 102.91 131.91 Z" />
<path fill="#515151" d=" M 111.40 132.19 C 114.39 132.19 118.51 130.94 120.47 133.98 C 117.37 133.88 114.29 133.33 111.40 132.19 Z" />
<path fill="#606060" d=" M 100.03 133.33 C 103.37 133.47 98.49 136.31 100.03 133.33 Z" />
<path fill="#595959" d=" M 98.26 134.40 C 100.35 135.51 95.99 138.40 95.47 136.31 C 95.76 135.13 97.07 134.30 98.26 134.40 Z" />
<path fill="#565656" d=" M 199.66 135.77 C 209.97 137.02 218.95 143.15 229.22 144.61 C 231.66 144.93 234.12 145.10 236.57 145.33 C 239.58 152.62 242.25 160.21 242.77 168.15 C 239.27 168.04 235.73 167.59 232.53 166.08 C 235.41 165.96 238.29 166.18 241.16 166.50 C 240.18 159.91 238.39 153.46 235.70 147.36 C 229.21 146.29 222.77 144.81 216.63 142.43 C 210.96 140.24 205.01 138.72 199.66 135.77 Z" />
<path fill="#797979" d=" M 87.41 139.09 C 89.70 138.41 91.98 137.70 94.28 137.04 C 92.78 139.28 91.41 141.69 89.38 143.50 C 85.95 145.00 82.09 145.11 78.41 144.91 C 81.59 143.03 85.32 142.80 88.92 142.57 C 88.42 141.41 87.91 140.25 87.41 139.09 Z" />
<path fill="#121212" d=" M 77.27 144.26 C 77.80 144.80 77.80 144.80 77.27 144.26 Z" />
<path fill="#4b4b4b" d=" M 74.41 147.92 C 73.95 145.88 77.75 145.66 77.26 147.80 C 76.87 148.20 76.08 148.99 75.69 149.39 C 75.37 149.02 74.73 148.29 74.41 147.92 Z" />
<path fill="#cfcfcf" d=" M 73.30 150.96 C 73.67 149.95 74.04 148.93 74.41 147.92 C 74.73 148.29 75.37 149.02 75.69 149.39 C 76.08 148.99 76.87 148.20 77.26 147.80 C 77.60 149.88 77.89 151.97 78.15 154.06 C 77.09 153.40 76.03 152.73 74.98 152.05 C 74.56 151.78 73.72 151.24 73.30 150.96 Z" />
<path fill="#656565" d=" M 73.30 150.96 C 73.72 151.24 74.56 151.78 74.98 152.05 C 72.97 157.72 67.78 163.45 70.29 169.73 C 69.80 169.72 68.83 169.71 68.35 169.70 C 68.01 169.23 67.35 168.28 67.02 167.80 C 68.77 162.07 70.92 156.47 73.30 150.96 Z" />
<path fill="#0f0f0f" d=" M 21.32 152.52 C 22.81 153.51 22.42 156.77 21.69 158.36 C 20.16 157.35 20.63 154.12 21.32 152.52 Z" />
<path fill="#212121" d=" M 21.30 160.60 C 22.80 161.15 22.60 164.12 21.80 165.33 C 20.25 164.77 20.53 161.82 21.30 160.60 Z" />
<path fill="#555555" d=" M 93.93 164.96 C 100.95 164.83 107.98 164.16 115.00 164.79 C 124.54 164.89 133.92 166.84 143.24 168.75 C 147.35 169.65 151.76 169.64 155.52 171.73 C 146.90 171.91 138.77 168.51 130.26 167.66 C 116.16 164.98 101.74 165.97 87.50 166.67 C 89.48 165.60 91.66 164.91 93.93 164.96 Z" />
<path fill="#575757" d=" M 204.03 164.84 C 211.70 164.15 219.38 164.80 227.05 165.01 C 228.99 165.03 230.78 165.82 232.49 166.66 C 221.71 166.17 210.88 165.51 200.09 166.28 C 190.64 167.36 181.28 169.16 171.98 171.12 C 169.50 171.64 166.94 171.94 164.44 171.33 C 166.23 170.77 168.05 170.28 169.91 169.96 C 181.25 168.07 192.47 165.10 204.03 164.84 Z" />
<path fill="#4e4e4e" d=" M 71.53 168.78 C 76.45 166.41 82.06 166.02 87.44 166.06 C 82.43 168.19 76.90 168.54 71.53 168.78 Z" />
<path fill="#717171" d=" M 22.83 167.55 C 24.62 169.60 26.78 171.67 27.19 174.50 C 27.71 177.97 27.56 181.50 27.91 184.99 C 28.29 190.34 29.97 195.47 31.35 200.63 C 34.02 200.92 36.77 200.94 39.36 201.75 C 41.55 202.86 42.29 205.42 43.26 207.49 C 40.48 205.85 38.44 202.52 34.94 202.47 C 33.25 202.30 31.56 202.27 29.87 202.21 C 28.28 194.85 26.07 187.56 25.92 179.98 C 25.89 175.63 23.92 171.68 22.83 167.55 Z" />
<path fill="#0c0c0c" d=" M 21.33 168.50 C 21.68 169.95 22.01 171.43 22.04 172.93 C 22.14 194.11 21.68 215.31 22.31 236.48 C 21.20 234.52 20.94 232.28 20.99 230.06 C 21.00 214.04 21.01 198.02 20.99 182.00 C 21.02 177.50 20.71 172.97 21.33 168.50 Z" />
<path fill="#393939" d=" M 158.76 171.11 C 159.27 169.92 161.67 170.39 161.26 171.80 C 160.74 172.99 158.35 172.52 158.76 171.11 Z" />
<path fill="#565656" d=" M 87.73 176.68 C 100.32 174.12 113.28 174.70 125.98 176.06 C 131.52 176.50 137.75 178.11 140.68 183.31 C 143.48 188.99 143.41 195.64 142.72 201.79 C 141.65 207.02 140.44 212.92 136.01 216.40 C 138.89 209.90 142.16 203.30 141.99 196.00 C 141.77 190.81 141.21 184.68 136.71 181.29 C 132.83 178.32 127.84 177.13 123.02 177.02 C 115.75 176.81 108.50 175.52 101.22 176.32 C 95.59 176.64 90.12 178.10 84.54 178.77 C 85.47 177.89 86.35 176.81 87.73 176.68 Z" />
<path fill="#545454" d=" M 191.34 176.39 C 204.69 174.78 218.33 174.01 231.62 176.54 C 233.38 176.70 234.59 178.01 235.74 179.21 C 226.29 176.67 216.44 175.53 206.68 176.41 C 199.21 177.14 191.15 176.44 184.43 180.40 C 179.58 183.47 178.13 189.61 177.99 194.99 C 177.74 201.02 180.21 206.65 181.15 212.51 C 177.26 206.82 176.67 199.62 176.95 192.93 C 177.24 188.74 178.13 184.23 181.05 181.04 C 183.68 178.15 187.63 177.09 191.34 176.39 Z" />
<path fill="#575757" d=" M 78.02 185.00 C 78.24 181.25 81.72 179.16 84.50 177.26 C 83.25 180.21 80.75 182.37 79.32 185.18 C 78.55 190.28 79.46 195.47 78.69 200.58 C 77.14 195.54 77.64 190.17 78.02 185.00 Z" />
<path fill="#3c3c3c" d=" M 236.12 178.30 C 239.44 178.48 234.56 181.28 236.12 178.30 Z" />
<path fill="#888888" d=" M 238.08 179.24 C 239.70 178.73 240.26 179.28 239.75 180.91 C 238.11 181.42 237.56 180.87 238.08 179.24 Z" />
<path fill="#616161" d=" M 239.55 181.60 C 240.06 181.82 241.09 182.27 241.60 182.49 C 242.67 190.83 241.97 199.32 240.32 207.54 C 239.58 211.17 238.03 214.77 235.11 217.18 C 229.70 222.18 222.12 223.53 215.04 224.14 C 209.85 224.41 204.35 225.58 199.42 223.32 C 206.03 222.45 212.78 223.66 219.33 222.23 C 225.26 221.09 231.27 218.88 235.55 214.45 C 238.32 211.56 238.78 207.36 239.49 203.61 C 240.40 196.34 242.21 188.73 239.55 181.60 Z" />
<path fill="#656565" d=" M 61.54 184.16 C 62.98 184.82 64.46 185.40 65.80 186.25 C 68.50 189.93 67.97 194.76 68.09 199.06 C 68.37 208.11 71.00 217.76 78.06 223.90 C 86.27 230.75 97.22 232.71 107.58 233.54 C 118.64 234.40 130.51 233.33 139.95 227.00 C 145.28 223.83 148.37 218.09 150.35 212.41 C 152.95 205.21 151.40 197.25 154.11 190.09 C 154.96 187.71 157.06 186.13 159.23 185.04 C 158.41 186.29 157.64 187.59 156.95 188.92 C 152.56 195.59 154.24 203.87 152.29 211.24 C 150.42 219.57 144.89 227.44 136.86 230.78 C 126.09 235.75 113.94 235.74 102.38 234.54 C 93.13 233.37 83.49 231.00 76.32 224.70 C 69.35 217.81 66.32 207.61 67.00 197.95 C 67.42 193.86 66.26 189.83 63.55 186.73 C 61.21 194.95 61.29 203.64 58.95 211.83 C 57.78 202.44 61.97 193.49 61.54 184.16 Z" />
<path fill="#cdcdcd" d=" M 159.23 185.04 C 159.50 184.69 160.04 183.99 160.30 183.64 L 160.81 184.60 C 161.56 186.04 162.31 187.48 163.02 188.94 C 163.13 189.66 163.34 191.09 163.45 191.80 C 162.29 191.29 161.15 190.77 160.00 190.25 C 158.85 190.77 157.70 191.29 156.56 191.81 C 156.65 191.09 156.85 189.65 156.95 188.92 C 157.64 187.59 158.41 186.29 159.23 185.04 Z" />
<path fill="#626262" d=" M 160.81 184.60 C 162.76 186.15 164.95 187.69 165.89 190.09 C 168.59 197.26 167.05 205.21 169.64 212.41 C 171.62 218.09 174.71 223.84 180.04 227.01 C 191.39 234.51 205.80 234.68 218.83 232.88 C 225.75 232.07 232.42 229.92 238.58 226.68 C 238.61 231.31 238.66 235.95 239.03 240.57 C 240.08 239.81 241.57 239.29 241.69 237.78 C 243.06 232.76 242.93 227.39 245.04 222.57 C 245.65 228.84 243.43 234.87 242.54 241.00 C 240.87 240.89 239.20 240.77 237.54 240.65 C 237.27 236.82 237.10 232.98 236.97 229.15 C 227.12 234.06 215.86 235.18 204.99 235.13 C 197.22 235.44 189.51 233.58 182.44 230.46 C 174.51 226.85 169.21 218.82 167.54 210.43 C 165.86 203.30 167.32 195.33 163.02 188.94 C 162.31 187.48 161.56 186.04 160.81 184.60 Z" />
<path fill="#898989" d=" M 152.08 189.32 C 155.42 189.44 150.56 192.31 152.08 189.32 Z" />
<path fill="#898989" d=" M 167.08 189.32 C 170.42 189.46 165.54 192.29 167.08 189.32 Z" />
<path fill="#606060" d=" M 77.94 201.53 C 80.47 206.40 81.45 212.39 85.98 215.96 C 90.44 219.48 96.01 221.29 101.52 222.39 C 107.80 223.60 114.24 222.46 120.56 223.33 C 115.01 225.77 108.85 224.24 103.04 223.97 C 96.64 223.07 89.87 221.49 84.85 217.19 C 80.50 213.24 78.04 207.37 77.94 201.53 Z" />
<path fill="#717171" d=" M 42.05 207.38 C 45.60 210.65 45.58 216.14 49.27 219.40 C 49.28 217.50 49.27 215.61 49.30 213.72 C 52.14 218.92 54.15 224.58 55.56 230.33 C 56.38 236.23 56.75 242.21 56.65 248.17 C 55.86 239.94 54.62 231.71 52.10 223.82 C 51.29 220.28 46.89 219.74 45.24 216.78 C 43.60 213.88 42.65 210.64 42.05 207.38 Z" />
<path fill="#353535" d=" M 58.34 212.71 C 59.80 212.34 60.04 214.78 58.90 215.28 C 57.45 215.66 57.19 213.19 58.34 212.71 Z" />
<path fill="#444444" d=" M 182.14 213.52 C 183.28 212.66 184.74 214.60 183.67 215.50 C 182.53 216.34 181.04 214.41 182.14 213.52 Z" />
<path fill="#7a7a7a" d=" M 185.43 215.80 C 186.45 217.14 187.47 218.48 188.47 219.85 C 186.99 219.27 185.52 218.68 184.05 218.08 C 184.40 217.51 185.08 216.37 185.43 215.80 Z" />
<path fill="#888888" d=" M 58.24 247.75 C 58.59 237.36 54.58 226.57 58.74 216.49 C 59.54 226.90 58.22 237.35 58.90 247.78 L 58.24 247.75 Z" />
<path fill="#7c7c7c" d=" M 120.42 223.97 C 125.11 220.62 130.87 219.05 136.13 216.77 C 132.37 221.49 126.25 223.51 120.42 223.97 Z" />
<path fill="#626262" d=" M 188.40 219.36 C 192.33 220.23 196.20 221.59 199.55 223.86 C 195.56 223.36 190.92 222.96 188.40 219.36 Z" />
<path fill="#7b7b7b" d=" M 21.93 236.48 C 24.04 239.16 25.10 242.43 26.72 245.39 C 30.39 251.51 35.57 256.63 41.62 260.39 C 41.81 261.46 42.00 262.54 42.19 263.62 C 38.18 259.63 32.91 257.03 29.47 252.44 C 25.79 247.80 22.29 242.58 21.93 236.48 Z" />
<path fill="#676767" d=" M 43.73 262.08 C 44.68 261.25 46.93 261.69 46.83 263.18 C 46.22 264.79 42.50 263.79 43.73 262.08 Z" />
<path fill="#707070" d=" M 48.48 263.19 C 49.45 261.92 51.68 263.51 50.64 264.81 C 49.67 266.10 47.44 264.48 48.48 263.19 Z" />
<path fill="#838383" d=" M 52.26 264.77 C 56.71 263.36 61.42 264.07 66.00 263.99 C 120.00 264.02 174.00 263.99 228.00 264.00 C 233.56 264.07 239.20 263.51 244.68 264.73 L 243.93 265.04 C 240.53 266.73 236.64 265.98 232.99 266.10 C 178.66 266.04 124.33 266.10 70.01 266.07 C 64.08 265.97 57.97 266.78 52.26 264.77 Z" />
<path fill="#5e5e5e" d=" M 68.87 282.98 C 68.64 279.27 68.91 275.51 70.33 272.05 C 70.54 272.76 70.95 274.19 71.16 274.91 C 82.13 275.13 93.11 274.79 104.08 275.01 C 108.72 275.33 114.53 277.35 115.51 282.54 C 116.68 286.40 114.59 290.10 113.98 293.84 C 114.79 297.80 117.12 302.04 114.97 306.01 C 113.19 310.62 107.96 311.95 103.55 312.40 C 95.05 313.10 86.50 312.69 77.99 312.87 C 75.05 312.69 71.76 313.34 69.09 311.84 C 68.68 302.23 69.26 292.60 68.87 282.98 Z" />
<path fill="#969696" d=" M 32.21 274.55 C 33.66 274.70 33.91 275.33 32.96 276.46 C 31.50 276.31 31.25 275.67 32.21 274.55 Z" />
<path fill="#aaaaaa" d=" M 131.32 274.05 C 133.12 273.44 133.69 276.40 131.94 276.77 C 130.14 277.37 129.57 274.41 131.32 274.05 Z" />
<path fill="#9a9a9a" d=" M 134.70 273.77 C 136.22 274.21 137.74 274.65 139.26 275.09 C 138.20 275.86 137.13 276.64 136.08 277.42 C 135.59 276.21 135.13 274.99 134.70 273.77 Z" />
<path fill="#535353" d=" M 19.61 276.54 C 23.03 275.33 26.67 274.38 30.29 275.24 C 27.95 275.97 25.59 276.82 23.13 277.00 C 21.95 276.87 20.78 276.72 19.61 276.54 Z" />
<path fill="#b7b7b7" d=" M 16.31 276.04 C 17.41 276.21 18.51 276.38 19.61 276.54 C 20.78 276.72 21.95 276.87 23.13 277.00 C 21.20 278.06 19.23 279.05 17.23 279.99 C 16.92 278.67 16.62 277.35 16.31 276.04 Z" />
<path fill="#525252" d=" M 21.74 280.78 C 27.32 278.49 34.44 280.84 39.04 276.16 C 38.81 277.59 38.58 279.02 38.36 280.45 C 33.97 280.78 29.54 280.65 25.16 281.22 C 23.18 281.48 20.95 282.87 21.21 285.14 C 21.05 291.58 20.54 298.14 21.49 304.53 C 23.76 306.63 27.05 306.77 29.97 306.95 C 36.69 307.05 43.41 307.10 50.11 306.53 C 49.76 307.14 49.41 307.76 49.06 308.37 C 42.36 307.78 35.65 308.16 28.94 308.19 C 25.83 308.31 22.89 307.21 20.11 305.92 C 19.88 299.25 19.89 292.57 19.95 285.90 C 20.12 284.14 19.91 281.75 21.74 280.78 Z" />
<path fill="#f8f8f8" d=" M 70.63 275.99 C 80.75 276.08 90.88 275.89 101.00 276.08 C 105.32 276.44 110.39 277.16 113.19 280.86 C 115.60 284.74 113.15 289.15 112.47 293.16 C 112.74 297.01 115.14 300.78 113.69 304.69 C 112.22 310.02 105.78 311.16 101.02 311.19 C 90.73 311.14 80.43 311.46 70.16 310.91 C 70.13 299.28 69.43 287.58 70.63 275.99 Z" />
<path fill="#717171" d=" M 75.27 279.36 C 83.51 278.80 91.79 278.99 100.04 279.19 C 102.94 279.49 106.32 279.46 108.62 281.50 C 109.85 283.69 110.42 286.28 110.30 288.78 C 109.48 291.10 106.93 291.92 105.00 293.06 C 106.18 291.05 107.66 289.19 108.57 287.03 C 108.51 284.51 107.75 281.43 104.70 281.32 C 95.25 280.42 85.70 281.04 76.21 281.04 C 76.13 284.17 76.06 287.31 75.85 290.44 L 74.94 290.19 C 74.56 286.58 74.96 282.95 75.27 279.36 Z" />
<path fill="#a5a5a5" d=" M 135.17 280.07 C 138.45 281.60 142.04 282.16 145.64 282.11 C 142.53 282.73 139.37 283.08 136.21 283.12 C 135.86 282.10 135.51 281.08 135.17 280.07 Z" />
<path fill="#6c6c6c" d=" M 13.86 287.00 C 14.01 284.70 13.23 281.67 15.61 280.25 C 15.10 287.81 14.69 295.40 15.20 302.96 C 15.68 308.12 21.29 310.88 25.95 310.93 C 33.33 310.89 40.71 311.25 48.08 310.98 C 52.30 310.84 57.09 308.87 58.68 304.66 C 59.73 300.90 59.08 296.95 58.91 293.13 C 58.11 293.05 56.51 292.91 55.72 292.83 C 54.84 297.38 54.67 302.03 53.86 306.60 C 53.22 306.71 51.94 306.95 51.30 307.06 C 53.92 302.00 52.78 296.20 53.73 290.78 C 56.07 290.92 58.41 291.05 60.76 291.20 C 60.80 295.30 61.15 299.40 60.97 303.50 C 60.78 307.43 57.54 310.79 53.77 311.63 C 46.97 313.36 39.89 312.95 32.95 312.92 C 27.62 312.74 21.94 312.58 17.22 309.81 C 15.07 308.54 13.66 306.10 13.78 303.59 C 13.86 298.06 14.08 292.53 13.86 287.00 Z" />
<path fill="#959595" d=" M 130.16 280.92 C 131.61 279.77 133.54 282.13 131.69 283.03 C 130.24 284.18 128.32 281.82 130.16 280.92 Z" />
<path fill="#bababa" d=" M 219.26 282.19 C 224.20 281.43 229.37 281.38 234.16 283.01 C 229.44 283.40 224.69 283.25 220.03 282.32 L 219.26 282.19 Z" />
<path fill="#6c6c6c" d=" M 234.73 283.03 C 238.70 279.91 243.42 284.48 246.56 286.85 C 242.47 286.07 238.61 284.50 234.73 283.03 Z" />
<path fill="#707070" d=" M 125.40 282.34 C 126.07 282.22 127.40 281.98 128.06 281.85 C 127.64 283.24 127.22 284.64 126.81 286.04 C 126.16 286.06 124.87 286.11 124.23 286.14 C 124.62 284.87 125.01 283.61 125.40 282.34 Z" />
<path fill="#989898" d=" M 147.99 281.40 C 149.23 283.01 150.02 284.88 150.58 286.83 C 149.52 287.24 148.47 287.68 147.44 288.16 C 147.61 285.91 147.77 283.65 147.99 281.40 Z" />
<path fill="#a2a2a2" d=" M 176.71 281.76 C 179.33 281.88 181.94 282.03 184.56 282.22 C 182.69 282.66 180.82 283.09 178.95 283.50 C 179.18 285.04 179.41 286.57 179.64 288.11 C 179.11 288.05 178.05 287.93 177.51 287.86 C 177.28 285.82 177.03 283.78 176.71 281.76 Z" />
<path fill="#4a4a4a" d=" M 187.11 282.25 C 188.73 281.71 189.30 282.26 188.81 283.89 C 187.18 284.42 186.61 283.87 187.11 282.25 Z" />
<path fill="#a0a0a0" d=" M 189.67 281.81 C 193.37 282.80 196.62 284.89 199.04 287.86 C 197.49 293.17 198.47 298.64 198.90 304.03 C 199.11 306.41 196.85 307.89 195.45 309.45 C 194.92 305.51 198.19 302.29 197.63 298.37 C 197.35 295.07 197.19 291.74 196.50 288.50 C 194.76 286.69 192.42 285.65 190.27 284.42 C 190.12 283.77 189.82 282.46 189.67 281.81 Z" />
<path fill="#8d8d8d" d=" M 208.35 286.70 C 210.25 282.47 215.29 281.59 219.38 282.54 C 216.59 283.71 213.82 284.96 210.94 285.91 C 210.29 286.11 209.00 286.50 208.35 286.70 Z" />
<path fill="#fcfcfc" d=" M 219.38 282.54 L 220.03 282.32 C 224.69 283.25 229.44 283.40 234.16 283.01 L 234.73 283.03 C 238.61 284.50 242.47 286.07 246.56 286.85 L 247.45 287.05 C 247.23 287.23 246.78 287.58 246.56 287.76 C 244.45 288.56 245.42 291.63 247.63 290.92 C 248.10 297.04 247.60 303.17 247.88 309.30 C 248.00 312.81 247.44 316.30 246.98 319.77 C 246.04 318.59 245.11 317.43 244.14 316.29 C 243.12 314.26 240.28 315.79 240.91 317.79 L 240.15 317.47 C 238.93 316.48 236.64 317.23 237.04 319.03 L 236.33 318.47 C 235.31 316.95 232.46 317.75 233.11 319.75 C 231.60 319.76 230.08 319.78 228.56 319.80 C 227.49 318.38 226.42 316.97 225.34 315.57 L 224.81 314.88 C 227.45 314.95 230.10 314.82 232.74 314.59 L 231.93 314.13 C 228.76 311.47 224.40 312.72 220.79 311.23 C 217.92 310.05 214.88 309.12 211.74 309.44 L 211.13 309.46 C 210.39 307.87 209.63 306.30 208.81 304.77 C 209.82 304.39 210.83 303.99 211.90 303.82 C 212.41 303.74 213.44 303.58 213.95 303.51 C 213.33 297.84 213.77 292.09 215.93 286.78 C 214.63 287.18 213.33 287.58 212.04 287.98 C 211.76 287.47 211.21 286.43 210.94 285.91 C 213.82 284.96 216.59 283.71 219.38 282.54 Z" />
<path fill="#575757" d=" M 259.63 284.09 C 261.51 282.05 264.29 281.59 266.81 282.73 C 264.54 283.74 262.09 284.13 259.63 284.09 Z" />
<path fill="#7b7b7b" d=" M 273.32 281.74 C 273.98 281.76 275.29 281.81 275.95 281.83 C 276.42 283.15 276.88 284.47 277.36 285.79 C 276.78 286.07 275.63 286.62 275.06 286.90 C 274.49 285.17 273.91 283.45 273.32 281.74 Z" />
<path fill="#4f4f4f" d=" M 257.10 284.24 C 258.72 283.75 259.26 284.32 258.73 285.95 C 257.10 286.44 256.56 285.87 257.10 284.24 Z" />
<path fill="#848484" d=" M 234.16 285.37 C 236.72 286.21 239.39 287.23 240.72 289.78 C 237.93 289.03 235.20 288.06 232.51 287.01 C 232.92 286.60 233.75 285.78 234.16 285.37 Z" />
<path fill="#c0c0c0" d=" M 128.20 285.33 C 129.49 286.05 132.19 285.99 131.99 288.05 C 131.73