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