Polygonal picture grid layout based on SVG

Brief Tutorial

This is a polygonal picture grid layout made using SVG. In this layout, SVG is used to divide the screen into multiple polygons, and a background image is set in each polygon. The effect is very good.

Usage method

Introduce snap.svg into the page.

<script src=&#39;https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js&#39;></script>

CSS Style

Add some CSS styles as follows:

body {  
margin:0px;  
padding: 0px;  
background-color: #141414;  overflow: hidden;
} 
path{  
-webkit-transition:opacity 0.1s;  
cursor:pointer;  
opacity: 0.6;} 
path:hover{  
opacity: 1;
}

JavaScript

Build a polygon grid layout through the following js code, in which the object Placed in team_rwby is the background image of each polygon.

window.onload = function(argument) {
    w = window.innerWidth,
    h = window.innerHeight;
 
    /* svg init */
    var paper = Snap(w, h);
 
    var team_rwby = {
      "ruby": "http://img.hb.aicdn.com/5d85ca4552076e9ebc84c9275794bebc1ce1dbf12498e-qPbnQc_fw658",
      "weiss": "http://img.hb.aicdn.com/ed55102bd05a0c95473cb958747091f2fcb3b98e94c0b-PC5EbL_fw658",
      "blake": "http://img.hb.aicdn.com/4736a6567a20b1c6d8af1ab22d827abd23bd7f044fd95-3dMoyr_fw658",
      "yang": "http://img.hb.aicdn.com/29125306a1a2cfd2d732a54b487d37b7372c36c8692ce-OwTMnW_fw658"
    };
 
    /* 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({
        &#39;x&#39;: polygon.startPoint[0],
        &#39;y&#39;: polygon.startPoint[1],
        &#39;width&#39;: polygon.width,
        &#39;height&#39;: polygon.height
      }).attr(&#39;viewBox&#39;, "");
 
    var path = paper.path({
      "d": make_path(polygon.coordinates),
      "strokeWidth": polygon.strokeWidth,
      &#39;stroke-linejoin&#39;: "round",
      &#39;stroke&#39;: polygon.strokeStyle,
      "fill": pattern,
    });
 
    path.click(function(event) {
 
    });
 
  }
 
  function make_path() {
    d = "M";
    coordinates = arguments[0];
    for (var i = 0; i < coordinates.length; i++) {
      if (i == 0) {
        d += coordinates[i][0] + " " + coordinates[i][1]
      } else {
        d += "L" + coordinates[i][0] + " " + coordinates[i][1]
      }
    }
    return d + "z";
  }

The above is the content of polygonal image grid layout based on SVG. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!