使用SVG animate方法实现的几何图形变形动画

注意：SVG's SMIL animations (, , etc.) are deprecated

svg, animate

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

M 50,0
                     C 77.6,0 100,22.4 100,50 
                     100,77.6 77.6,100 50,100
                     22.4,100, 0,77.6, 0,50
                     0,22.4, 22.4,0, 50,0
                     Z;
                     
                     
                     M 100,0 
                     C 100,50 100,50 100,100
                     50,100 50,100 0,100
                     0,50 0,50 0,0
                     50,0 50,0 100,0
                     Z;" />
        <animate attributeName="fill" dur="1440ms" repeatCount="indefinite" keyTimes="0;
                       .0625;
                       .208333333;
                       .3125;
                       .395833333;
                       .645833333;
                       .833333333;
                       1" calcMode="spline" keySplines="0,0,1,1;
                         .42,0,.58,1;
                         .42,0,1,1;
                         0,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1;
                         .42,0,.58,1" values="#1eb287;
                     #1eb287;
                     #1ca69e;
                     #188fc2;
                     #188fc2;
                     #bb625e;
                     #ca5f52;
                     #1eb287;" />
    </path>
</svg>

注意：SVG's SMIL animations (, , etc.) are deprecated

svg, animate

编辑器支持Emmet

快捷键

注意：SVG's SMIL animations (, , etc.) are deprecated

svg, animate

使用Anime.js和SVG实现的Mozilla混合图标变形动画

使用anime.js SVG实现的人体变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：