SVGでサイコロ作成: iPhoneだけでノマドワーク

2017年02月01日

SVGでサイコロ作成

SVGで賽の目を作成してみよう！

CSSやjavascriptのcanvasでも作成した事がありますが、SVGのほうが比較的簡単に描く事が出来ました。

コード表示

１の目 <svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="20" cy="20" r="6" fill="red"></circle>
</svg>

２の目 <svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="12" cy="12" r="4"></circle>
<circle cx="28" cy="28" r="4"></circle>
</svg>

３の目 <svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="20" cy="20" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
</svg>

４の目 <svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="10" cy="30" r="3"></circle>
<circle cx="30" cy="10" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
</svg>

５の目 <svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="10" cy="30" r="3"></circle>
<circle cx="30" cy="10" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
<circle cx="20" cy="20" r="3"></circle>
</svg>

６の目 <svg width="40" height="40" viewBox="0 0 40 40">
<rect width="40" height="40" fill="#fff" stroke="#999" stroke-width="1" rx="6" ry="6"></rect>
<circle cx="10" cy="10" r="3"></circle>
<circle cx="10" cy="30" r="3"></circle>
<circle cx="30" cy="10" r="3"></circle>
<circle cx="30" cy="30" r="3"></circle>
<circle cx="10" cy="20" r="3"></circle>
<circle cx="30" cy="20" r="3"></circle>
</svg>

サイコロを振る

javascriptでサイコロを振るプログラムを作成してみたくなりました。

一見、動きそうに見えますが、ダミーです！

実際に動くプログラムは別窓で御覧下さいね。

サイコロプログラム