poKbxGe

index.html

<svg viewBox="0,0,500,1000">
  <defs>
    <pattern id="dots" x="0" y="0" width="1.5" height="1.5" patternUnits="userSpaceOnUse">
      <circle r="0.4" cx=1 cy=1 fill="black">
    </pattern>
    <g id="base-triangle">
      <polygon points="0,0 0,100 100,100" fill="none" stroke="black" stroke-linejoin="bevel" />
      <polygon points="0,0 0,100 100,100" transform="scale(0.94) translate(1.85,4.5)" fill="url(#dots)" stroke="none" />
    </g>
    <g id="up-left-triangle" transform="rotate(90)">
      <use href="#base-triangle">
    </g>
    <g id="up-right-triangle" transform="translate(100, 100) rotate(180)">
      <use href="#base-triangle">
    </g>
    <g id="left-triangle">
      <use href="#base-triangle">
    </g>

    <g id="right-triangle" transform="translate(100, 100) rotate(180)">
      <use href="#base-triangle">
    </g>

    <pattern id="base-triangles" patternUnits="userSpaceOnUse" width="101" height="100">
      <use href="#base-triangle" />
    </pattern>
  </defs>

  <g transform="scale(0.5)">
    <rect width="100" height="1000" fill="url(#base-triangles)" stroke="none" />
  </g>

  <g transform="translate(300,0)" visibility="hidden">
    <use href="#left-triangle" transform="translate(5,5)" />
    <use href="#right-triangle" />
  </g>
</svg>

pokbxge.markdown

poKbxGe

A Pen by Jake on CodePen.

License.