📝 代码查看
使用runcode.html页面

3
查看次数
2025-12-01
创建时间
2026-01-30
最后更新
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="710px" height="554px" viewBox="0 0 710 554" enable-background="new 0 0 710 554" xml:space="preserve">
<path fill="none" stroke="#C27F46" stroke-miterlimit="10" d="M199.545,435.484c5.779-5.279,10.871-9.96,15.997-14.605
    c25.558-23.161,51.098-46.342,76.727-69.422c2.725-2.454,2.82-3.853-0.329-5.967c-13.112-8.803-27.634-14.577-42.331-19.948
    c-31.253-11.42-63.308-20.128-95.565-28.177c-3.876-0.967-4.998,0.427-6.147,3.459c-4.854,12.813-4.123,26.12-3.992,39.45
    c0.179,18.108,6.351,33.787,17.512,48.087c-1.611-1.375-3.196-2.781-4.839-4.116c-1.631-1.326-24.715-40.355-24.293-65.582
    c0.192-11.471-0.659-22.983,1.359-34.367c0.55-3.1-1.452-3.652-3.542-4.386c-12.577-4.419-25.253-8.69-36.854-15.354
    c-15.523-8.918-30.373-18.745-40.387-34.239c-2.166-3.352-10.287-24.706-10.457-31.23c-0.68-26.161,0.827-52.306,0.936-78.465
    c0.041-9.791-1.558-19.471-0.293-29.388c3.198-25.06,16.487-41.644,40.2-49.703c17.787-6.045,35.953-6.206,54.053-1.307
    c10.377,2.809,23.62,3.908,30.491,10.51c6.371,7.268,14.304,33.854,14.973,46.63c1.271,24.284-4.601,47.524-10.389,70.756
    c-2.689,10.796-5.629,21.541-8.877,32.18c-1.15,3.767-0.492,5.129,3.273,6.342c21.51,6.931,43.242,13.12,64.834,19.764
    c28.992,8.921,56.018,22.152,79.997,40.93c11.954,9.361,20.201,22.021,28.175,34.766c1.046,1.672,1,3.477,1,5.303
    c0.006,24.496-0.015,48.993,0.045,73.489c0.006,2.478-0.638,4.21-2.584,6.002c-16.3,15.013-32.462,30.178-48.628,45.336
    c-2.235,2.096-4.397,3.763-7.789,3.75c-26.162-0.104-52.325-0.051-78.488-0.067C202.402,435.914,201.467,435.71,199.545,435.484z" style="stroke-dasharray: 1496.95; stroke-dashoffset: 0;"></path>
<path fill="none" stroke="#C27F46" stroke-miterlimit="10" d="M74.506,133.755c0.541,8.378,1.512,20.152,1.943,31.946
    c0.139,3.8,1.717,5.657,4.788,7.243c20.001,10.327,41.049,18.086,62.182,25.663c2.554,0.916,3.697,0.322,4.351-2.131
    c1.326-4.972,2.876-9.89,4.063-14.894c6.739-28.41,12.347-57.057,7.266-86.311c-2.27-13.071-3.456-27.323-18.987-33.861
    c-10.69-4.5-21.188-8.127-32.732-5.146c-13.798,3.563-20.99,13.979-25.638,26.481C76.042,98.077,74.768,114.132,74.506,133.755z" style="stroke-dasharray: 382.089; stroke-dashoffset: 0;"></path>
<path fill="none" stroke="#C27F46" stroke-miterlimit="10" d="M506.512,435.484c-5.779-5.279-10.871-9.96-15.997-14.605
    c-25.558-23.161-51.098-46.342-76.727-69.422c-2.725-2.454-2.82-3.853,0.329-5.967c13.112-8.803,27.634-14.577,42.331-19.948
    c31.253-11.42,63.308-20.128,95.565-28.177c3.876-0.967,4.998,0.427,6.147,3.459c4.854,12.813,4.123,26.12,3.992,39.45
    c-0.179,18.108-6.351,33.787-17.513,48.087c1.611-1.375,3.196-2.781,4.839-4.116c1.631-1.326,24.715-40.355,24.293-65.582
    c-0.192-11.471,0.659-22.983-1.359-34.367c-0.55-3.1,1.452-3.652,3.542-4.386c12.577-4.419,25.253-8.69,36.854-15.354
    c15.523-8.918,30.373-18.745,40.388-34.239c2.166-3.352,10.287-24.706,10.457-31.23c0.68-26.161-0.827-52.306-0.936-78.465
    c-0.041-9.791,1.558-19.471,0.293-29.388c-3.198-25.06-16.487-41.644-40.2-49.703c-17.787-6.045-35.953-6.206-54.053-1.307
    c-10.377,2.809-23.62,3.908-30.492,10.51c-6.371,7.268-14.304,33.854-14.973,46.63c-1.271,24.284,4.601,47.524,10.389,70.756
    c2.689,10.796,5.629,21.541,8.877,32.18c1.15,3.767,0.492,5.129-3.273,6.342c-21.51,6.931-43.242,13.12-64.834,19.764
    c-28.992,8.921-56.018,22.152-79.997,40.93c-11.954,9.361-20.201,22.021-28.175,34.766c-1.046,1.672-1,3.477-1,5.303
    c-0.006,24.496,0.015,48.993-0.045,73.489c-0.006,2.478,0.638,4.21,2.584,6.002c16.3,15.013,32.462,30.178,48.628,45.336
    c2.235,2.096,4.397,3.763,7.789,3.75c26.162-0.104,52.326-0.051,78.488-0.067C503.656,435.914,504.59,435.71,506.512,435.484z" style="stroke-dasharray: 1496.96; stroke-dashoffset: 0;"></path>
<path fill="none" stroke="#C27F46" stroke-miterlimit="10" d="M631.187,133.755c-0.541,8.378-1.512,20.152-1.943,31.946
    c-0.139,3.8-1.717,5.657-4.788,7.243c-20.001,10.327-41.049,18.086-62.182,25.663c-2.554,0.916-3.697,0.322-4.351-2.131
    c-1.326-4.972-2.876-9.89-4.063-14.894c-6.739-28.41-12.347-57.057-7.266-86.311c2.27-13.071,3.456-27.323,18.987-33.861
    c10.69-4.5,21.188-8.127,32.732-5.146c13.798,3.563,20.99,13.979,25.638,26.481C629.651,98.077,630.924,114.132,631.187,133.755z" style="stroke-dasharray: 382.089; stroke-dashoffset: 0;"></path>
</svg>
暂无CSS代码
(function() {

    'use strict';

    window.requestAnimFrame = function(){
        return (
            window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback){
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }();

    window.cancelAnimFrame = function(){
        return (
            window.cancelAnimationFrame       || 
            window.webkitCancelAnimationFrame || 
            window.mozCancelAnimationFrame    || 
            window.oCancelAnimationFrame      || 
            window.msCancelAnimationFrame     || 
            function(id){
                window.clearTimeout(id);
            }
        );
    }();
    
    var svgs = Array.prototype.slice.call( document.querySelectorAll( 'svg' ) ),
        hidden = Array.prototype.slice.call( document.querySelectorAll( '.hide' ) ),
        current_frame = 0,
        total_frames = 120,
        path = new Array(),
        length = new Array(),
        handle = 0;

    function init() {
        [].slice.call( document.querySelectorAll( 'path' ) ).forEach( function( el, i ) {
            path[i] = el;
            var l = path[i].getTotalLength();
            length[i] = l;
            path[i].style.strokeDasharray = l; 
            path[i].style.strokeDashoffset = l;console.log(l)
        } );

    }

    function draw() {
        var progress = current_frame/total_frames;
        if (progress > 1) {
            window.cancelAnimFrame(handle);
        } else {
            current_frame++;
            for(var j=0; j<path.length;j++){
                path[j].style.strokeDashoffset = Math.floor(length[j] * (1 - progress));
            }
            handle = window.requestAnimFrame(draw);
        }
    }
    init();
    draw();

})();

👁️ 实时预览