About

Varying loon tesselation

Edit Tesselation

CSS Code

background-color: #86b2d9;
background-image: url('data:image/svg+xml;base64,PHN2ZyAKICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIAogIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyAKICB3aWR0aD0nNTcnIAogIGhlaWdodD0nMTExJyAKICB2aWV3Qm94PScwIDAgNTcgMTExJwo+CiAgPHBhdGggCiAgICBzdHJva2U9IiNkMTcyMWUiIAogICAgc3Ryb2tlLXdpZHRoPSIyMSIKICAgIGZpbGw9IiM4NmIyZDkiIAogICAgZD0iTSAwLDAgTDU2LDQgTDU3LDAgTDU2LDIgTDU2LDY4IFE1OSwxMjEgNTcsMTExIEw1NiwxMTUgTDAsMTExIFEyLDEyMSAtMSw2OCBMLTEsMiBMMCwwIFoiIAogICAgaWQ9InJvb3QiPgogIDwvcGF0aD4KCiAgPHVzZSBocmVmPSIjcm9vdCIgeD0iLTU3IiB5PSIwIi8+CiAgPHVzZSBocmVmPSIjcm9vdCIgeD0iNTciIHk9IjAiLz4KICA8dXNlIGhyZWY9IiNyb290IiB4PSIwIiB5PSIxMTEiLz4KICA8dXNlIGhyZWY9IiNyb290IiB4PSIwIiB5PSItMTExIi8+Cjwvc3ZnPg==');
background-size: 81px;

SVG Code

<svg 
  xmlns='http://www.w3.org/2000/svg' 
  xmlns:xlink='http://www.w3.org/1999/xlink' 
  width='57' 
  height='111' 
  viewBox='0 0 57 111'
>
  <path 
    stroke="#d1721e" 
    stroke-width="21"
    fill="#86b2d9" 
    d="M 0,0 L56,4 L57,0 L56,2 L56,68 Q59,121 57,111 L56,115 L0,111 Q2,121 -1,68 L-1,2 L0,0 Z" 
    id="root">
  </path>

  <use href="#root" x="-57" y="0"/>
  <use href="#root" x="57" y="0"/>
  <use href="#root" x="0" y="111"/>
  <use href="#root" x="0" y="-111"/>
</svg>
Download