jQuery pep.js SVG 流动的六边形（鼠标点击触发）

六边形生成器

jquery, svg, hexgon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var Workspace;
(function(Workspace) {
    var SVGWorkspace = (function() {
        function SVGWorkspace(parent, minX, minY, width, height) {
            if (minX === void 0) {
                minX = -500;
            }
            if (minY === void 0) {
                minY = -500;
            }
            if (width === void 0) {
                width = 1000;
            }
            if (height === void 0) {
                height = 1000;
            }
            this.minX = minX;
            this.minY = minY;
            this.width = width;
            this.height = height;
            this.SVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
            this.SVG.setAttribute("touch-action", "none");
            this.SVG.setAttribute("viewBox", "minX minY width height"
                .replace("minX", this.minX.toString())
                .replace("minY", this.minY.toString())
                .replace("width", this.width.toString())
                .replace("height", this.height.toString()));
            this.Base = document.createElementNS("http://www.w3.org/2000/svg", "g");
            this.Base.setAttribute("id", "base");
            // this.Base.setAttribute("filter", "url(#blur)");
            this.SVG.appendChild(this.Base);
            this.SVG.addEventListener("pointermove", this);
            this.SVG.addEventListener("pointerdown", this);
            parent.appendChild(this.SVG);
            this.pointer = this.SVG.createSVGPoint();
            this.pointer.x = 0;
            this.pointer.y = 0;
        }
        SVGWorkspace.prototype.handleEvent = function(e) {
            switch (e.type) {
                case "pointermove":
                    this.pointer.x = e.clientX;
                    this.pointer.y = e.clientY;
                    var CTM = this.Base.getScreenCTM();
                    this.pointer = this.pointer.matrixTransform(CTM.inverse());
                    break;
                case "pointerdown":
                    this.pointer.x = e.clientX;
                    this.pointer.y = e.clientY;
                    var CTM = this.Base.getScreenCTM();
                    this.pointer = this.pointer.matrixTransform(CTM.inverse());
                    break;
            }
        };
        SVGWorkspace.prototype.addToDefs = function(defElement) {
            var defsElement = this.SVG.querySelector("defs");
            if (!defsElement) {
                defsElement = document.createElementNS("http://www.w3.org/2000/svg", "defs");
                this.SVG.insertBefore(defsElement, this.SVG.firstElementChild);
            }
            defsElement.appendChild(defElement);
        };
        SVGWorkspace.prototype.clear = function() {
            while (this.Base.firstChild) {
                this.Base.removeChild(this.Base.firstChild);
            }
        };
        return SVGWorkspace;
    })();
    Workspace.SVGWorkspace = SVGWorkspace;
})(Workspace || (Workspace = {}));
var Main = (function() {
    var wsParent = document.querySelector(".workspace");
    var ws = new Workspace.SVGWorkspace(wsParent, -500, -500, 1000, 1000);
    var NS = "http://www.w3.org/2000/svg";
    var XNS = "http://www.w3.org/1999/xlink";
    var hex = document.createElementNS(NS, "polygon");
    hex.setAttribute("id", "hexagon");
    hex.setAttribute("points", "-25,43.3 -50,0 -25,-43.3 25,-43.3 50,0 25,43.3");
    ws.addToDefs(hex);
    var filter = document.createElementNS(NS, "filter");
    filter.setAttribute("id", "blur");
    var gauss = document.createElementNS(NS, "feGaussianBlur");
    gauss.setAttribute("in", "SourceGraphic");
    gauss.setAttribute("stdDeviation", "2");
    filter.appendChild(gauss);
    ws.addToDefs(filter);

function random(min, max, integer) {
        var r = Math.random() * (max - min) + min;
        return integer ? r | 0 : r;
    }

function useHexagon(x, y, hue) {
        var useHex = document.createElementNS(NS, "use");
        useHex.setAttributeNS(XNS, "href", "#hexagon");
        useHex.setAttribute("x", x.toFixed(2));
        useHex.setAttribute("y", y.toFixed(2));
        useHex.setAttribute("fill", "none");
        useHex.setAttribute("stroke", "hsl(hue, 100%, 35%)".replace("hue", hue.toString()));
        return useHex;
    }
    ws.SVG.addEventListener("pointerdown", function(ev) {
        ws.Base.appendChild(useHexagon(ws.pointer.x, ws.pointer.y, random(180, 359, true)));
    });
})();

编译

CSS

HTML

六边形生成器

jquery, svg, hexgon

编辑器支持Emmet

快捷键

六边形生成器

jquery, svg, hexgon

HTML5 SVG+jQuery.wavify.js 沙滩情侣动画

jQuery+SVG 可改变参数的动态背景图案演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：