<monster-creator>

Create your own monster

Example usage

    <monster-creator id="monster1" customize="Yes" level="5">
      <svg viewBox="0 0 100 100" slot="silhouette1">
        <g transform="translate(-49.715845,-88.516996)">
          <path
            style="fill:#303ac0;fill-opacity:1;stroke-width:0.56993049"
            d="m 59.043805,186 c -5.325954,-4.59455 -8.457188,-14.21136 -9.198688,-28.25147 -0.804784,-15.23838 2.154418,-29.46325 8.699915,-41.82046 4.177546,-7.88677 13.731995,-17.964394 20.673364,-21.805383 12.7704,-7.066462 27.390544,-7.833555 39.012924,-2.046935 16.8752,8.401928 26.20737,23.819358 30.11805,49.757298 1.9066,12.6456 1.81132,24.87844 -0.24368,31.28467 -3.1672,9.87338 -8.97976,14.98714 -16.25452,14.30033 -2.34183,-0.22108 -4.29556,-0.92305 -5.3959,-1.93871 -2.13621,-1.97181 -4.81908,-2.01103 -7.29692,-0.1067 -2.68661,2.06479 -4.94168,1.83165 -8.35543,-0.86378 -3.28202,-2.59143 -3.66763,-2.53755 -8.95373,1.25105 -3.696974,2.64963 -6.155604,2.37919 -10.283654,-1.1312 -3.93821,-3.34896 -4.3939,-3.29342 -8.65106,1.05433 -3.04679,3.11161 -3.69831,3.2013 -7.52712,1.03622 l -2.872429,-1.62428 -3.842866,1.62428 c -5.098536,2.155 -6.410008,2.05704 -9.628256,-0.71926 z"
          />
        </g>
      </svg>

      <svg viewBox="0 0 100 100" slot="silhouette2">
        <g transform="translate(-14.577234,-12.596795)">
          <path
            style="fill:#d98500;fill-opacity:1;stroke-width:0.56993049"
            d="M 57.201758,12.602219 C 46.060643,13.143941 29.952483,29.243441 23.237283,45.976337 14.651397,64.697673 11.723027,86.037468 17.782152,105.66375 c 2.603662,6.18229 10.640441,7.57026 17.189005,6.69504 5.570961,0.0681 11.576124,-2.57188 12.38949,-7.94298 1.367663,-2.71062 -0.35278,-8.778642 4.781976,-7.247755 10.194738,0.433728 20.403212,0.478723 30.607372,0.54923 2.29575,4.279515 0.51899,12.609745 7.50425,13.621265 7.18668,0.75438 16.627285,2.80331 22.124915,-2.78265 5.11849,-21.921797 0.64888,-44.770555 -6.73842,-65.855509 -4.86168,-12.750877 -14.280635,-25.918648 -29.929255,-29.206542 -2.77488,-0.633931 -5.645017,-0.942566 -8.509727,-0.89163 z"
          />
        </g>
      </svg>

      <svg viewBox="0 0 100 100" slot="silhouette3">
        <g transform="translate(-17.916069,-17.983232)">
          <path
            style="fill:#ff133b;fill-opacity:1;stroke-width:1.22072637"
            d="M 55.752958,117.0221 C 41.428196,114.07158 28.170026,103.6698 21.950392,90.502078 18.097699,82.345457 17.916069,81.297893 17.916069,67.233924 c 0,-14.309022 0.117832,-14.95334 4.151726,-22.70197 5.108029,-9.811912 13.913828,-18.588711 23.198266,-23.121854 6.219035,-3.036457 8.490264,-3.426868 19.935948,-3.426868 12.212955,0 13.384222,0.238186 21.480399,4.368205 10.607908,5.411308 22.152602,17.226997 27.111722,27.748122 2.84724,6.040612 3.63137,9.615849 3.98159,18.153989 0.40102,9.777197 0.13126,11.277038 -3.35541,18.654891 -10.2825,21.758041 -35.755056,34.832971 -58.667352,30.113661 z"
          />
        </g>
      </svg>

      <svg viewBox="0 0 150 150" slot="pickedsilhouette1">
        <path
          style="fill:#303ac0;fill-opacity:1;stroke-width:0.56993049"
          d="m 25.043805,110 c -5.325954,-4.59455 -8.457188,-14.21136 -9.198688,-28.25147 -0.804784,-15.23838 2.154418,-29.46325 8.699915,-41.82046 4.177546,-7.88677 13.731995,-17.964394 20.673364,-21.805383 12.7704,-7.066462 27.390544,-7.833555 39.012924,-2.046935 16.8752,8.401928 26.20737,23.819358 30.11805,49.757298 1.9066,12.6456 1.81132,24.87844 -0.24368,31.28467 -3.1672,9.87338 -8.97976,14.98714 -16.25452,14.30033 -2.34183,-0.22108 -4.29556,-0.92305 -5.3959,-1.93871 -2.13621,-1.97181 -4.81908,-2.01103 -7.29692,-0.1067 -2.68661,2.06479 -4.94168,1.83165 -8.35543,-0.86378 -3.28202,-2.59143 -3.66763,-2.53755 -8.95373,1.25105 -3.696974,2.64963 -6.155604,2.37919 -10.283654,-1.1312 -3.93821,-3.34896 -4.3939,-3.29342 -8.65106,1.05433 -3.04679,3.11161 -3.69831,3.2013 -7.52712,1.03622 l -2.872429,-1.62428 -3.842866,1.62428 c -5.098536,2.155 -6.410008,2.05704 -9.628256,-0.71926 z"
        />
      </svg>

      <svg viewBox="0 0 150 150" slot="pickedsilhouette2">
        <path
          style="fill:#d98500;fill-opacity:1;stroke-width:0.56993049"
          d="M 67.201758,12.602219 C 46.060643,13.143941 29.952483,29.243441 23.237283,45.976337 14.651397,64.697673 11.723027,86.037468 17.782152,105.66375 c 2.603662,6.18229 10.640441,7.57026 17.189005,6.69504 5.570961,0.0681 11.576124,-2.57188 12.38949,-7.94298 1.367663,-2.71062 -0.35278,-8.778642 4.781976,-7.247755 10.194738,0.433728 20.403212,0.478723 30.607372,0.54923 2.29575,4.279515 0.51899,12.609745 7.50425,13.621265 7.18668,0.75438 16.627285,2.80331 22.124915,-2.78265 5.11849,-21.921797 0.64888,-44.770555 -6.73842,-65.855509 -4.86168,-12.750877 -14.280635,-25.918648 -29.929255,-29.206542 -2.77488,-0.633931 -5.645017,-0.942566 -8.509727,-0.89163 z"
        />
      </svg>

      <svg viewBox="0 0 150 150" slot="pickedsilhouette3">
        <path
          style="fill:#ff133b;fill-opacity:1;stroke-width:1.22072637"
          d="M 55.752958,117.0221 C 41.428196,114.07158 28.170026,103.6698 21.950392,90.502078 18.097699,82.345457 17.916069,81.297893 17.916069,67.233924 c 0,-14.309022 0.117832,-14.95334 4.151726,-22.70197 5.108029,-9.811912 13.913828,-18.588711 23.198266,-23.121854 6.219035,-3.036457 8.490264,-3.426868 19.935948,-3.426868 12.212955,0 13.384222,0.238186 21.480399,4.368205 10.607908,5.411308 22.152602,17.226997 27.111722,27.748122 2.84724,6.040612 3.63137,9.615849 3.98159,18.153989 0.40102,9.777197 0.13126,11.277038 -3.35541,18.654891 -10.2825,21.758041 -35.755056,34.832971 -58.667352,30.113661 z"
        />
      </svg>

      <img class="EyeSlot" slot="EyesSlot1" src="eyes1.png" />
      <img class="EyeSlot" slot="EyesSlot2" src="eyes2.png" />
      <img class="EyeSlot" slot="EyesSlot3" src="eyes3.png" />

      <img slot="MouthSlot1" src="mouth1.png" />
      <img slot="MouthSlot2" src="mouth2.png" />
      <img slot="MouthSlot3" src="mouth3.png" />
    </monster-creator>