SVG.js 随机签名生成器自动签名动画

Signature Generator 首先通过一组随机点构造一条svg路径，然后使用js定时绘制路径，形成自动签名的动画。

SVG，动画

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).click(function() {
    // clear out the old junk
    $('#drawing').html('');

// use svg.js to make a new thing!
    var draw = SVG('drawing').size('100%', '100%'),
        step = 40,
        signature = draw.path('M 50 200').stroke({
            width: 3
        }).fill('none');

// you don't have to do this in a setInterval, but it makes
    // the signature look "drawy"
    var iterator = setInterval(function() {
        path = signature._array.value.concat(
            [' c',
                Math.floor(Math.random() * 100), // first control X
                Math.floor(Math.random() * -100), // first control Y
                Math.floor(Math.random() * 200), // second control X
                Math.floor(Math.random() * -200), // second control Y
                Math.floor(Math.random() * 10) * step * (Math.random() * 1 > 0.2 ? 1 : -1), // final point X
                Math.floor(Math.random() * 2) * (Math.random() * 1 > 0.5 ? 1 : -1) // final point Y
            ]);
        signature.plot(path.join(' '));
        // either reduce the iterator or clear the interval
        step > 0 ? step-- : clearInterval(iterator);
    }, 0);
});

编译

CSS

HTML

Signature Generator 首先通过一组随机点构造一条svg路径，然后使用js定时绘制路径，形成自动签名的动画。

SVG，动画

编辑器支持Emmet

快捷键

Signature Generator 首先通过一组随机点构造一条svg路径，然后使用js定时绘制路径，形成自动签名的动画。

SVG，动画

使用SVG动画接口实现的自行车动画

使用SVG实现很酷的弹性弯曲动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：