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
.white
$color-white
.yellow
$color-yellow
.green
$color-green
.blue
$color-blue
.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>