99 - Dice

Experimental

EXPERIMENTAL: Rating used for reviews and tests

99.1 - Roll

99.1.1 - Ace

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="50" cy="50" r="10"/>
</svg>

99.1.2 - Deuce

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
</svg>

99.1.3 - Trey

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="50" cy="50" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
</svg>

99.1.4 - Carter

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="25" r="10"/>
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
    <circle class="pip" cx="75" cy="75" r="10"/>
</svg>

99.1.5 - Cinque

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="25" r="10"/>
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="50" cy="50" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
    <circle class="pip" cx="75" cy="75" r="10"/>
</svg>

99.1.6 - Sice

<svg class="dice" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect class="face" x="0" y="0" width="100" height="100"></rect>
    <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
    <circle class="pip" cx="25" cy="25" r="10"/>
    <circle class="pip" cx="25" cy="50" r="10"/>
    <circle class="pip" cx="25" cy="75" r="10"/>
    <circle class="pip" cx="75" cy="25" r="10"/>
    <circle class="pip" cx="75" cy="50" r="10"/>
    <circle class="pip" cx="75" cy="75" r="10"/>
</svg>

99.2 - Colors

.orange

$color-orange

.white

$color-white

.yellow

$color-yellow

.green

$color-green

.blue

$color-blue

.purple

$color-purple

.burgundy

$color-burgundy

.pink

$color-pink

.black

$color-dark

<svg class="dice {$modifiers}" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
  <rect class="face" x="0" y="0" width="100" height="100"></rect>
  <path class="face-shade" d="M 0 0 L 100 0 L 0 100 z" />
  <circle class="pip" cx="25" cy="25" r="10"/>
  <circle class="pip" cx="25" cy="50" r="10"/>
  <circle class="pip" cx="25" cy="75" r="10"/>
  <circle class="pip" cx="75" cy="25" r="10"/>
  <circle class="pip" cx="75" cy="50" r="10"/>
  <circle class="pip" cx="75" cy="75" r="10"/>
</svg>