SVG 卡通动画风格的多边形布局

SVG: Polygon Layout

SVG, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function(argument) {
    w = window.innerWidth,
        h = window.innerHeight;

/* svg init */
    var paper = Snap(w, h);

var team_rwby = {
        "ruby": "http://puu.sh/oXDLO/7b5a932ef1.jpg",
        "weiss": "http://puu.sh/oXDNd/169a74d36c.jpg",
        "blake": "http://puu.sh/oXDNQ/bec8c790e4.jpg",
        "yang": "http://puu.sh/oXDO9/3c169032d0.jpg"
    };

/* this polygons' array include coordinates and image's source  */
    var polygons = [];
    polygons.push({
        "coordinates": [
            [0, 0],
            [w * 0.6, 0],
            [0, h * 0.5]
        ],
        "strokeStyle": "black",
        "strokeWidth": 10,
        "image_src": team_rwby.ruby
    }, {
        "coordinates": [
            [0, h * 0.5],
            [w * 0.3, h * 0.25],
            [w * 0.55, h],
            [0, h]
        ],
        "strokeStyle": "black",
        "strokeWidth": 10,
        "image_src": team_rwby.yang
    }, {
        "coordinates": [
            [w * 0.3, h * 0.25],
            [w * 0.75, h * 0.55],
            [w * 0.55, h],
        ],
        "strokeStyle": "black",
        "strokeWidth": 10,
        "image_src": team_rwby.blake
    }, {
        "coordinates": [
            [w * 0.55, h],
            [w, 0],
            [w, h],
        ],
        "strokeStyle": "black",
        "strokeWidth": 10,
        "image_src": team_rwby.ruby
    }, {
        "coordinates": [
            [w * 0.6, 0],
            [w, 0],
            [w * 0.75, h * 0.55],
            [w * 0.3, h * 0.25],
        ],
        "strokeStyle": "black",
        "strokeWidth": 10,
        "image_src": team_rwby.weiss
    });

for (var i = 0; i < polygons.length; i++) {
        make_polygon_layout(paper, polygons[i]);
    }
}

function make_polygon_layout() {
    paper = arguments[0];
    polygon = arguments[1];
    tempA = [];
    for (var i = 0; i < polygon.coordinates.length; i++) {
        tempA[i] = polygon.coordinates[i];
    }
    /* get largest and smallest x coordinate */
    tempA.sort(function(a, b) {
        return a[0] - b[0];
    });
    sX = tempA[0][0];
    bX = tempA[tempA.length - 1][0];

/* get largest and smallest ycoordinate */
    tempA.sort(function(a, b) {
        return a[1] - b[1];
    });
    sY = tempA[0][1];
    bY = tempA[tempA.length - 1][1];

polygon.startPoint = [sX, sY];
    polygon.endPoint = [bX, bY];

polygon.width = polygon.endPoint[0] - polygon.startPoint[0];
    polygon.height = polygon.endPoint[1] - polygon.startPoint[1];

var pattern = paper.image(polygon.image_src, 0, 0, polygon.width, polygon.height)
        .attr("preserveAspectRatio", "xMidYMid slice")
        .pattern({
            'x': polygon.startPoint[0],
            'y': polygon.startPoint[1],
            'width': polygon.width,
            'height': polygon.height
        }).attr('viewBox', "");

var path = paper.path({
        "d": make_path(polygon.coordinates),
        "strokeWidth": polygon.strokeWidth,
        'stroke-linejoin': "round",
        'stroke': polygon.strokeStyle,
        "fill": pattern,
    });

path.click(function(event) {

});

}

编译

CSS

HTML

SVG: Polygon Layout

SVG, template

编辑器支持Emmet

快捷键

SVG: Polygon Layout

SVG, template

使用SVG创建原质化设计风格的按钮涟漪动效 - 六边形脉冲波

HTML5 SVG 构造等边多边形的教学动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：