3个SVG动画矢量图

Animated Vector Graphics 雷云、文稿和铅笔。

SVG, icon

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2830
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<body>
    <section class="container">
        <h1>矢量动画图标</h1>
        <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 85.915 85.916" enable-background="new 0 0 85.915 85.916" xml:space="preserve">
            <g id="Layer_1" display="none">
                <path display="inline" fill="#CDCCCC" d="M12,39.5c0,0-4.5-3,0-6.5c0,0,4.339-3.5,8.669,0c0,0-8.296-10.5,0.267-20
                        c0,0,7.481-10,22.772-3.5c0,0,6.814-6,7.053,4c0,0,10.238,1.805,10.238,9.902c0,0,12.5-4.902,16,6.098c0,0,1.295,7-7.353,7
                        C69.647,36.5,18.5,41,12,39.5z" />
                <path display="inline" fill="#F2EA19" d="M35.783,32.796c-9.202-3.246,15.841,0.552,15.841,0.552L35.783,56.352h7.393
                        l-14.66,25.502l5.519-22.502h-5.644C28.391,59.352,42.684,35.229,35.783,32.796z" />
            </g>
            <g id="Layer_3">
                <polygon class="wow animated pulse infinite" fill="#DDE343" points="49.415,70.352 2.881,70.352 38.066,32.352 84.6,32.352  " />
                <polygon opacity="0.4" fill="#1072BA" points="49.415,59.352 2.881,59.352 38.066,22.352 84.6,22.352  " />
                <polygon fill="#F26431" points="50.55,50.352 4.017,50.352 39.201,12.352 85.734,12.352   " />
                <polygon opacity="0.5" fill="#B4B4B4" points="82.381,14.352 75.571,14.352 72.166,14.352 70.719,14.352 68.761,14.352 
                     65.356,14.352 63.908,14.352 61.952,14.352 60.503,14.352 57.097,14.352 56.276,14.352 53.692,14.352 52.872,14.352 50.288,14.352 
                     44.613,14.352 41.208,14.352 33.493,22.352 33.264,22.352 24.446,30.352 27.851,30.352 33.526,30.352 36.109,30.352 36.931,30.352 
                     39.514,30.352 40.335,30.352 43.741,30.352 45.189,30.352 47.146,30.352 48.594,30.352 51.999,30.352 53.956,30.352 55.404,30.352 
                     58.81,30.352 65.617,30.352 73.334,23.352 73.563,23.352  " />
                <polygon opacity="0.5" fill="#B4B4B4" stroke="#010101" stroke-miterlimit="10" points="39.251,31.852 35.847,31.852 
                     34.145,31.852 33.42,31.852 32.442,31.852 30.739,31.852 30.016,31.852 29.037,31.852 28.313,31.852 26.611,31.852 26.199,31.852 
                     24.908,31.852 24.497,31.852 23.206,31.852 20.369,31.852 18.666,31.852 14.808,36.852 14.693,36.852 10.285,41.852 11.987,41.852 
                     14.824,41.852 16.115,41.852 16.527,41.852 17.818,41.852 18.229,41.852 19.932,41.852 20.655,41.852 21.634,41.852 22.358,41.852 
                     24.06,41.852 25.039,41.852 25.763,41.852 27.465,41.852 30.87,41.852 34.728,36.852 34.843,36.852   " />
                <polygon opacity="0.5" fill="#B4B4B4" stroke="#010101" stroke-miterlimit="10" points="63.087,31.852 59.681,31.852 
                     57.979,31.852 57.255,31.852 56.276,31.852 54.573,31.852 53.85,31.852 52.872,31.852 52.147,31.852 50.445,31.852 50.034,31.852 
                     48.742,31.852 48.331,31.852 47.04,31.852 44.203,31.852 42.5,31.852 38.642,36.852 38.528,36.852 34.119,41.852 35.821,41.852 
                     38.659,41.852 39.95,41.852 40.361,41.852 41.652,41.852 42.064,41.852 43.766,41.852 44.49,41.852 45.468,41.852 46.192,41.852 
                     47.896,41.852 48.874,41.852 49.597,41.852 51.3,41.852 54.704,41.852 58.563,36.852 58.677,36.852   " />
                <polygon opacity="0.5" fill="#676767" stroke="#010101" stroke-miterlimit="10" points="78.614,8.852 70.894,8.852 67.265,8.852 
                     65.219,8.852 53.87,8.852 43.741,18.852 55.091,18.852 57.138,18.852 60.765,18.852 68.486,18.852 74.161,18.852 84.29,8.852  " />
                <polygon opacity="0.5" fill="#676767" points="35.486,20.352 35.133,20.352 34.351,20.352 33.997,20.352 33.216,20.352 
                     32.862,20.352 32.081,20.352 31.728,20.352 30.946,20.352 30.593,20.352 29.812,20.352 29.458,20.352 28.676,20.352 28.323,20.352 
                     27.541,20.352 27.188,20.352 26.406,20.352 26.053,20.352 24.917,20.352 23.792,21.352 24.927,21.352 25.281,21.352 26.062,21.352 
                     26.416,21.352 27.197,21.352 27.551,21.352 28.332,21.352 28.686,21.352 29.467,21.352 29.82,21.352 30.602,21.352 30.955,21.352 
                     31.737,21.352 32.091,21.352 32.872,21.352 33.226,21.352 34.007,21.352 34.36,21.352 35.495,21.352 36.621,20.352  " />
                <polygon opacity="0.5" fill="#676767" points="18.596,43.352 18.243,43.352 17.461,43.352 17.108,43.352 16.327,43.352 
                     15.973,43.352 15.192,43.352 14.838,43.352 14.056,43.352 13.703,43.352 12.921,43.352 12.568,43.352 11.787,43.352 11.433,43.352 
                     10.652,43.352 10.298,43.352 9.517,43.352 9.163,43.352 8.028,43.352 6.902,44.352 8.038,44.352 8.391,44.352 9.172,44.352 
                     9.526,44.352 10.307,44.352 10.661,44.352 11.442,44.352 11.796,44.352 12.578,44.352 12.931,44.352 13.712,44.352 14.066,44.352 
                     14.847,44.352 15.201,44.352 15.982,44.352 16.336,44.352 17.117,44.352 17.471,44.352 18.606,44.352 19.731,43.352   " />
                <polygon opacity="0.5" fill="#676767" points="16.327,45.352 15.973,45.352 15.192,45.352 14.838,45.352 14.056,45.352 
                     13.703,45.352 12.921,45.352 12.568,45.352 11.787,45.352 11.433,45.352 10.652,45.352 10.298,45.352 9.517,45.352 9.163,45.352 
                     8.381,45.352 8.028,45.352 7.247,45.352 6.893,45.352 5.758,45.352 4.632,47.352 5.768,47.352 6.121,47.352 6.902,47.352 
                     7.256,47.352 8.038,47.352 8.391,47.352 9.172,47.352 9.526,47.352 10.307,47.352 10.661,47.352 11.442,47.352 11.796,47.352 
                     12.578,47.352 12.931,47.352 13.712,47.352 14.066,47.352 14.847,47.352 15.201,47.352 16.336,47.352 17.461,45.352   " />
                <polygon opacity="0.5" fill="#676767" points="15.056,48.352 14.703,48.352 13.921,48.352 13.568,48.352 12.787,48.352 
                     12.433,48.352 11.652,48.352 11.298,48.352 10.517,48.352 10.163,48.352 9.381,48.352 9.028,48.352 8.247,48.352 7.893,48.352 
                     7.112,48.352 6.758,48.352 5.977,48.352 5.623,48.352 4.488,48.352 3.362,49.352 4.498,49.352 4.851,49.352 5.632,49.352 
                     5.986,49.352 6.768,49.352 7.121,49.352 7.902,49.352 8.256,49.352 9.038,49.352 9.391,49.352 10.172,49.352 10.526,49.352 
                     11.307,49.352 11.661,49.352 12.442,49.352 12.796,49.352 13.578,49.352 13.931,49.352 15.066,49.352 16.192,48.352   " />
                <path opacity="0.8" fill="#676767" stroke="#CDCCCC" stroke-width="0.25" stroke-miterlimit="10" d="M29.807,25.617
                     c-1.074,1.94-3.517,3.511-5.455,3.511c-1.938,0-2.638-1.571-1.563-3.511c1.074-1.938,3.516-3.507,5.454-3.507
                     S30.881,23.679,29.807,25.617z" />
                <path opacity="0.8" fill="#676767" stroke="#CDCCCC" stroke-width="0.25" stroke-miterlimit="10" d="M46.821,25.617
                     c-1.074,1.94-3.517,3.511-5.455,3.511c-1.938,0-2.638-1.571-1.563-3.511c1.074-1.938,3.517-3.507,5.453-3.507
                     C47.195,22.109,47.896,23.679,46.821,25.617z" />
                <path opacity="0.8" fill="#676767" stroke="#CDCCCC" stroke-width="0.25" stroke-miterlimit="10" d="M65.143,25.617
                     c-1.073,1.94-3.515,3.511-5.453,3.511s-2.638-1.571-1.563-3.511c1.074-1.938,3.516-3.507,5.453-3.507
                     C65.518,22.109,66.219,23.679,65.143,25.617z" />
                <g>
                    <polygon opacity="0.5" fill="#676767" points="43.431,43.352 43.077,43.352 42.296,43.352 41.942,43.352 41.161,43.352 
                        40.808,43.352 40.026,43.352 39.672,43.352 38.891,43.352 38.537,43.352 37.756,43.352 37.402,43.352 36.621,43.352 
                        36.268,43.352 35.486,43.352 35.133,43.352 34.351,43.352 33.997,43.352 32.862,43.352 31.737,44.352 32.872,44.352 
                        33.226,44.352 34.007,44.352 34.36,44.352 35.142,44.352 35.495,44.352 36.277,44.352 36.63,44.352 37.412,44.352 37.766,44.352 
                        38.547,44.352 38.9,44.352 39.682,44.352 40.035,44.352 40.816,44.352 41.17,44.352 41.952,44.352 42.305,44.352 43.44,44.352 
                        44.566,43.352     " />
                    <polygon opacity="0.5" fill="#676767" points="41.161,45.352 40.808,45.352 40.026,45.352 39.672,45.352 38.891,45.352 
                        38.537,45.352 37.756,45.352 37.402,45.352 36.621,45.352 36.268,45.352 35.486,45.352 35.133,45.352 34.351,45.352 
                        33.997,45.352 33.216,45.352 32.862,45.352 32.081,45.352 31.728,45.352 30.593,45.352 29.467,47.352 30.602,47.352 
                        30.955,47.352 31.737,47.352 32.091,47.352 32.872,47.352 33.226,47.352 34.007,47.352 34.36,47.352 35.142,47.352 35.495,47.352 
                        36.277,47.352 36.63,47.352 37.412,47.352 37.766,47.352 38.547,47.352 38.9,47.352 39.682,47.352 40.035,47.352 41.17,47.352 
                        42.296,45.352     " />
                    <polygon opacity="0.5" fill="#676767" points="38.891,48.352 38.537,48.352 37.756,48.352 37.402,48.352 36.621,48.352 
                        36.268,48.352 35.486,48.352 35.133,48.352 34.351,48.352 33.997,48.352 33.216,48.352 32.862,48.352 32.081,48.352 
                        31.728,48.352 30.946,48.352 30.593,48.352 29.812,48.352 29.458,48.352 28.323,48.352 27.197,49.352 28.332,49.352 
                        28.686,49.352 29.467,49.352 29.82,49.352 30.602,49.352 30.955,49.352 31.737,49.352 32.091,49.352 32.872,49.352 33.226,49.352 
                        34.007,49.352 34.36,49.352 35.142,49.352 35.495,49.352 36.277,49.352 36.63,49.352 37.412,49.352 37.766,49.352 38.9,49.352 
                        40.026,48.352     " />
                </g>
                <polygon opacity="0.5" fill="#676767" stroke="#010101" stroke-miterlimit="10" points="40.113,18.852 26.716,18.852 36.845,8.852 
                     50.241,8.852  " />
                <g opacity="0.3">
                    <path fill="#010101" d="M35.689,13.321l-1.595,1.804h-0.766l5.125-5.733h0.894l-1.222,5.733h-0.791l0.387-1.804H35.689z
                        M37.889,12.743l0.354-1.65c0.08-0.375,0.183-0.7150.183-0.715,0.282-1.0470.282-1.047h-0.018c-0.273,0.341-0.561,0.689-0.864,1.038l-1.48,1.659H37.889z
                        " />
                    <path fill="#010101" d="M41.259,15.125l0.228-0.519h-0.025c-0.409,0.323-1.012,0.612-1.598,0.612
                        c-0.834,0-0.934-0.586-0.603-1.183c0.551-0.995,1.737-1.54,3.323-1.531l0.047-0.084c0.188-0.341,0.434-0.954-0.408-0.954
                        c-0.383,0-0.848,0.119-1.241,0.306l0.103-0.493c0.463-0.221,1.036-0.366,1.555-0.366c1.259,0,1.089,0.859,0.632,1.684l-0.854,1.54
                        c-0.198,0.358-0.375,0.707-0.4790.707-0.479,0.987H41.259z M42.312,13.023c-0.807-0.016-1.814,0.127-2.257,0.927
                        c-0.269,0.486-0.073,0.715,0.31,0.715c0.536,0,1.064-0.339,1.377-0.688c0.067-0.077,0.132-0.1620.132-0.162,0.174-0.2380.174-0.238L42.312,13.023z" />
                </g>
                <polygon opacity="0.5" fill="#676767" points="52.511,20.352 52.156,20.352 51.376,20.352 51.021,20.352 50.241,20.352 
                     49.887,20.352 49.106,20.352 48.752,20.352 47.972,20.352 47.616,20.352 46.837,20.352 46.481,20.352 45.701,20.352 45.347,20.352 
                     44.566,20.352 44.212,20.352 43.431,20.352 43.077,20.352 41.942,20.352 40.816,21.352 41.952,21.352 42.305,21.352 43.086,21.352 
                     43.44,21.352 44.222,21.352 44.575,21.352 45.356,21.352 45.71,21.352 46.492,21.352 46.846,21.352 47.627,21.352 47.98,21.352 
                     48.762,21.352 49.115,21.352 49.896,21.352 50.25,21.352 51.031,21.352 51.385,21.352 52.521,21.352 53.646,20.352  " />
                <polygon opacity="0.5" fill="#676767" points="69.535,20.352 69.183,20.352 68.399,20.352 68.048,20.352 67.265,20.352 
                     66.912,20.352 66.13,20.352 65.777,20.352 64.994,20.352 64.642,20.352 63.859,20.352 63.507,20.352 62.725,20.352 62.372,20.352 
                     61.59,20.352 61.237,20.352 60.456,20.352 60.102,20.352 58.967,20.352 57.841,21.352 58.977,21.352 59.33,21.352 60.111,21.352 
                     60.465,21.352 61.246,21.352 61.601,21.352 62.382,21.352 62.735,21.352 63.517,21.352 63.87,21.352 64.651,21.352 65.005,21.352 
                     65.786,21.352 66.14,21.352 66.921,21.352 67.274,21.352 68.056,21.352 68.409,21.352 69.544,21.352 70.67,20.352   " />
        </svg>

</svg>
    </section>
</body>

</html>

Animated Vector Graphics 雷云、文稿和铅笔。

SVG, icon

编辑器支持Emmet

快捷键

Animated Vector Graphics 雷云、文稿和铅笔。

SVG, icon

HTML5基于Anime.js实现的SVG矢量图变形动画 - 地标切换

使用SVG矢量图变形来为网页滚动添加背景动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：