SVG 层叠的彩色字母剪纸

使用svg多边形元素（polygon）构建的字符。

svg, polygon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    var windowX = window.innerWidth;
    var windowY = window.innerHeight;
    var centerX = windowX / 2;
    var centerY = windowY / 2;
    var top = centerY - 50;
    var left = centerX - 115;
    $("#king1").css({
        top: top.toString(),
        left: left.toString()
    });
    $("#king2").css({
        top: top.toString(),
        left: (left - 235).toString()
    });
    $("#king3").css({
        top: top.toString(),
        left: (left - 470).toString()
    });
    $("#king4").css({
        top: top.toString(),
        left: (left - 705).toString()
    });
    $("#king5").css({
        top: top.toString(),
        left: (left - 940).toString()
    });

$(document).mousemove(function(event) {
        var moveX = event.pageX - centerX;
        var moveY = event.pageY - centerY;
        $("#king1").css({
            top: (top + moveY / 4).toString(),
            left: (left + moveX / 4).toString()
        });
        $("#king2").css({
            top: (top + moveY / 8).toString(),
            left: (left - 235 + moveX / 8).toString()
        });
        $("#king3").css({
            top: (top + moveY / 16).toString(),
            left: (left - 470 + moveX / 16).toString()
        });
        $("#king4").css({
            top: (top + moveY / 32).toString(),
            left: (left - 705 + moveX / 32).toString()
        });
        $("#king5").css({
            top: (top + moveY / 64).toString(),
            left: (left - 940 + moveX / 64).toString()
        });
    })
})

编译

CSS

HTML

使用svg多边形元素（polygon）构建的字符。

svg, polygon

编辑器支持Emmet

快捷键

使用svg多边形元素（polygon）构建的字符。

svg, polygon

Bodymovin.js/SVG 会发射彩色光线的棱镜先生

SVG 3D视觉效果的M字母创意图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：