Iconimation/volume.html at master · Dogfalo/Iconimation · GitHub

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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Volume</title>
        <link rel="stylesheet" href="style.css">
        <script src="snap.svg-min.js"></script>
        <script>
             window.onload = function () {
                var volume = Snap.select("#volume");
                var outer = volume.select("#outer");
                var middle = volume.select("#middle");
                var inner = volume.select("#inner");

                function revert() {
                    inner.animate({
                        d: "M504.022,362.881c28 z"
                    }, 800, mina.bounce);
                    middle.animate({
                        d: "M573.629,362.881c28 z"
                    }, 600, mina.bounce);
                    outer.animate({
                        d: "M633.518,362.881c28 z"
                    }, 300, mina.bounce);
                }

                function open() {
                    clearTimeout(revert);
                    inner.animate({
                        d: "M504.022,492.881c28.666-29.638,44.88-69.201,44.905-110.467c0.026-41.4-17.306-81.524-46.698-110.509c-6.891-6.795-17.502,3.807-10.607,10.607c26.478,26.111,41.636,61.345,42.293,98.535c0.666,37.676-14.391,74.232-40.5,101.227C486.692,489.227,497.287,499.844,504.022,492.881L504.022,492.881z"
                    }, 300, mina.bounce, function() { setTimeout(revert, 1000); });
                    middle.animate({
                        d: "M573.629,526.093c33.498-34.549,54.06-79.188,58.727-127.048c4.516-46.32-7.662-93.887-33.264-132.66c-8.04-12.176-17.477-23.465-27.873-33.692c-6.899-6.786-17.511,3.815-10.607,10.607c33.212,32.67,53.718,76.367,57.136,122.882c3.404,46.314-10.439,92.343-37.878,129.675c-5.108,6.95-10.849,13.442-16.849,19.63C556.289,522.431,566.886,533.048,573.629,526.093L573.629,526.093z"
                    }, 600, mina.bounce);
                    outer.animate({
                        d: "M633.518,576.086c66.578-68.53,95.083-166.634,75.261-260.13c-11.416-53.848-39.386-103.547-78.598-142.042c-6.905-6.779-17.518,3.822-10.607,10.607c33.601,32.987,58.054,74.042,70.793,119.388c12.294,43.76,12.958,90.439,2.56,134.641c-11.25,47.824-35.828,91.74-70.016,126.93C616.171,572.418,626.768,583.034,633.518,576.086L633.518,576.086z"
                    }, 800, mina.bounce);

                }

                volume.click(open);
            }
        </script>
    </head>
    <body>

        <svg fill="#FFFFFF" stroke="#FFFFFF" version="1.1" id="volume" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 768 768" enable-background="new 0 0 768 768" xml:space="preserve">
<g fill="#FFFFFF" stroke="#FFFFFF">
    <g id="XMLID_1_">
        <g>
            <g>
                <polygon points="448.95,178.85 448.95,571.15 241.26,473.72 64.33,473.72 64.33,276.28 241.26,276.28              "/>
                <g>
                    <path d="M441.45,178.85c0,34.993,0,69.986,0,104.979c0,64.021,0,128.043,0,192.064c0,31.752,0,63.505,0,95.257
                        c3.762-2.159,7.524-4.317,11.285-6.476c-42.822-20.089-85.645-40.177-128.467-60.266
                        c-23.181-10.875-46.363-21.749-69.544-32.624c-3.67-1.722-9.296-5.564-13.531-5.564c-6.069,0-12.137,0-18.206,0
                        c-52.477,0-104.954,0-157.43,0c-0.409,0-0.818,0-1.226,0c2.5,2.5,5,5,7.5,7.5c0-49.339,0-98.677,0-148.016
                        c0-16.475,0-32.95,0-49.424c-2.5,2.5-5,5-7.5,7.5c49.886,0,99.772,0,149.658,0c8.476,0,16.952,0,25.429,0
                        c3.976,0,7.137-1.731,10.658-3.383c20.972-9.838,41.944-19.677,62.917-29.515c46.294-21.717,92.588-43.434,138.882-65.151
                        c0.288-0.135,0.575-0.27,0.862-0.405c8.752-4.106,1.131-17.034-7.571-12.952c-42.822,20.089-85.645,40.177-128.467,60.266
                        c-26.408,12.388-52.815,24.776-79.223,37.164c1.262-0.341,2.524-0.683,3.785-1.024c-49.886,0-99.772,0-149.658,0
                        c-9.091,0-18.181,0-27.272,0c-4.088,0-7.5,3.412-7.5,7.5c0,49.339,0,98.677,0,148.016c0,16.475,0,32.95,0,49.424
                        c0,4.088,3.412,7.5,7.5,7.5c49.886,0,99.772,0,149.658,0c9.091,0,18.181,0,27.272,0c-1.262-0.341-2.524-0.683-3.785-1.024
                        c42.822,20.089,85.645,40.177,128.467,60.266c26.408,12.388,52.815,24.776,79.223,37.164
                        c5.011,2.351,11.285-0.402,11.285-6.476c0-34.993,0-69.986,0-104.979c0-64.021,0-128.043,0-192.064c0-31.752,0-63.505,0-95.257
                        C456.45,169.177,441.45,169.177,441.45,178.85z"/>
                </g>
            </g>
        </g>
        <g>
            <g>
                <g>
                    <path d="M56.83,276.28c0,49.339,0,98.677,0,148.016c0,16.475,0,32.95,0,49.424c0,9.673,15,9.673,15,0
                        c0-49.339,0-98.677,0-148.016c0-16.475,0-32.95,0-49.424C71.83,266.607,56.83,266.607,56.83,276.28L56.83,276.28z"/>
                </g>
            </g>
            <g>
                <g>
                    <path d="M64.33,481.22c49.886,0,99.772,0,149.658,0c9.091,0,18.181,0,27.272,0c9.673,0,9.673-15,0-15
                        c-49.886,0-99.772,0-149.658,0c-9.091,0-18.181,0-27.272,0C54.657,466.22,54.657,481.22,64.33,481.22L64.33,481.22z"/>
                </g>
            </g>
            <g>
                <g>
                    <path d="M64.33,283.78c49.886,0,99.772,0,149.658,0c9.091,0,18.181,0,27.272,0c9.673,0,9.673-15,0-15
                        c-49.886,0-99.772,0-149.658,0c-9.091,0-18.181,0-27.272,0C54.657,268.78,54.657,283.78,64.33,283.78L64.33,283.78z"/>
                </g>
            </g>
            <g>
                <g>
                    <path d="M237.475,480.196c42.822,20.089,85.645,40.177,128.467,60.266c26.408,12.388,52.815,24.776,79.223,37.164
                        c8.702,4.082,16.323-8.846,7.571-12.952c-42.822-20.089-85.645-40.177-128.467-60.266
                        c-26.408-12.388-52.815-24.776-79.223-37.164C236.343,463.162,228.723,476.09,237.475,480.196L237.475,480.196z"/>
                </g>
            </g>
            <g>
                <g>
                    <path d="M245.045,282.756c42.822-20.089,85.645-40.177,128.467-60.266c26.408-12.388,52.815-24.776,79.223-37.164
                        c8.752-4.106,1.131-17.034-7.571-12.952c-42.822,20.089-85.645,40.177-128.467,60.266
                        c-26.408,12.388-52.815,24.776-79.223,37.164C228.723,273.91,236.343,286.838,245.045,282.756L245.045,282.756z"/>
                </g>
            </g>
            <g>
                <g>
                    <path d="M441.45,178.85c0,34.993,0,69.986,0,104.979c0,64.021,0,128.043,0,192.064c0,31.752,0,63.505,0,95.257
                        c0,9.673,15,9.673,15,0c0-34.993,0-69.986,0-104.979c0-64.021,0-128.043,0-192.064c0-31.752,0-63.505,0-95.257
                        C456.45,169.177,441.45,169.177,441.45,178.85L441.45,178.85z"/>
                </g>
            </g>
        </g>
    </g>
    <g>
        <g>
            <g>
                <path id="middle" d="M573.629,362.881c28 z"/>
            </g>
        </g>
        <g>
            <g>
                <path id="outer" d="M633.518,362.881c28 z"/>
            </g>
        </g>
        <g>
            <g>
                <path id="inner" d="M504.022,362.881c28 z"/>
            </g>
        </g>
    </g>
</g>
</svg>


    </body>
</html>