About

Extraordinary shark tesselation

Edit Tesselation

CSS Code

background-color: #bb9bee;
background-image: url('data:image/svg+xml;base64,PHN2ZyAKICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIAogIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyAKICB3aWR0aD0nMTI1JyAKICBoZWlnaHQ9JzU2JyAKICB2aWV3Qm94PScwIDAgMTI1IDU2Jwo+CiAgPHBhdGggCiAgICBzdHJva2U9IiM3ZTU2YmMiIAogICAgc3Ryb2tlLXdpZHRoPSIxNyIKICAgIGZpbGw9IiNiYjliZWUiIAogICAgZD0iTSAwLDAgTDIwLDEyIFExNTIsLTE0IDEyNSwwIFE5NSwxIDk5LDcgUTc1LDE4IDg3LDE2IFE5NSw0MSA5MCwzOCBRMTcwLDU4IDEyNSw1NiBRMTUyLDQyIDIwLDY4IEwwLDU2IFE0NSw1OCAtMzUsMzggUS0zMywxOSAtMzgsMTYgUS0zOCw5IC0yNiw3IFEtMzAsMSAwLDAgWiIgCiAgICBpZD0icm9vdCI+CiAgPC9wYXRoPgoKICA8dXNlIGhyZWY9IiNyb290IiB4PSItMTI1IiB5PSIwIi8+CiAgPHVzZSBocmVmPSIjcm9vdCIgeD0iMTI1IiB5PSIwIi8+CiAgPHVzZSBocmVmPSIjcm9vdCIgeD0iMCIgeT0iNTYiLz4KICA8dXNlIGhyZWY9IiNyb290IiB4PSIwIiB5PSItNTYiLz4KPC9zdmc+');
background-size: 66px;

SVG Code

<svg 
  xmlns='http://www.w3.org/2000/svg' 
  xmlns:xlink='http://www.w3.org/1999/xlink' 
  width='125' 
  height='56' 
  viewBox='0 0 125 56'
>
  <path 
    stroke="#7e56bc" 
    stroke-width="17"
    fill="#bb9bee" 
    d="M 0,0 L20,12 Q152,-14 125,0 Q95,1 99,7 Q75,18 87,16 Q95,41 90,38 Q170,58 125,56 Q152,42 20,68 L0,56 Q45,58 -35,38 Q-33,19 -38,16 Q-38,9 -26,7 Q-30,1 0,0 Z" 
    id="root">
  </path>

  <use href="#root" x="-125" y="0"/>
  <use href="#root" x="125" y="0"/>
  <use href="#root" x="0" y="56"/>
  <use href="#root" x="0" y="-56"/>
</svg>
Download