Home Explore Help
Register Sign In
fphammerle
/
dice
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

replace digits with dice svg

Fabian Peter Hammerle 5 years ago
parent
391624f2c6
commit
955a227c37
7 changed files with 465 additions and 6 deletions
Split View Show Diff Stats
  1. 70 0
      img/dice/1.svg
  2. 72 0
      img/dice/2.svg
  3. 73 0
      img/dice/3.svg
  4. 74 0
      img/dice/4.svg
  5. 76 0
      img/dice/5.svg
  6. 77 0
      img/dice/6.svg
  7. 23 6
      index.html

+ 70 - 0
img/dice/1.svg
View File 

@@ -0,0 +1,70 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 26.989 26.989" style="enable-background:new 0 0 26.989 26.989;" xml:space="preserve">

+<g>

+	<path d="M24.842,0.615H2.146C0.959,0.615,0,1.576,0,2.76v21.469c0,1.182,0.959,2.145,2.146,2.145h22.695

+		c1.186,0,2.148-0.963,2.148-2.145V2.76C26.99,1.576,26.027,0.615,24.842,0.615z M13.494,15.525c-1.531,0-2.777-1.244-2.777-2.775

+		c0-1.535,1.246-2.781,2.777-2.781c1.533,0,2.777,1.246,2.777,2.781C16.271,14.281,15.027,15.525,13.494,15.525z"/>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

+ 72 - 0
img/dice/2.svg
View File 

@@ -0,0 +1,72 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 26.986 26.986" style="enable-background:new 0 0 26.986 26.986;" xml:space="preserve">

+<g>

+	<path d="M0.614,2.145V24.84c0,1.188,0.961,2.146,2.145,2.146h21.467c1.184,0,2.146-0.959,2.146-2.146V2.145

+		C26.372,0.963,25.409,0,24.225,0H2.759C1.575,0,0.614,0.963,0.614,2.145z M8.778,20.82c0,1.533-1.244,2.779-2.777,2.779

+		c-1.535,0-2.777-1.246-2.777-2.779c0-1.531,1.242-2.777,2.777-2.777C7.534,18.043,8.778,19.289,8.778,20.82z M23.696,5.596

+		c0,1.535-1.246,2.779-2.779,2.779c-1.531,0-2.775-1.244-2.775-2.779c0-1.533,1.244-2.777,2.775-2.777

+		C22.45,2.818,23.696,4.062,23.696,5.596z"/>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

+ 73 - 0
img/dice/3.svg
View File 

@@ -0,0 +1,73 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 26.989 26.989" style="enable-background:new 0 0 26.989 26.989;" xml:space="preserve">

+<g>

+	<path d="M0.616,2.148v22.695c0,1.186,0.959,2.146,2.145,2.146h21.467c1.184,0,2.146-0.961,2.146-2.146V2.148

+		C26.374,0.967,25.41,0,24.227,0H2.761C1.575,0,0.616,0.967,0.616,2.148z M8.778,20.824c0,1.531-1.242,2.779-2.777,2.779

+		c-1.533,0-2.777-1.248-2.777-2.779c0-1.533,1.244-2.779,2.777-2.779C7.536,18.045,8.778,19.291,8.778,20.824z M23.695,5.598

+		c0,1.535-1.242,2.777-2.777,2.777c-1.533,0-2.779-1.242-2.779-2.777c0-1.533,1.246-2.777,2.779-2.777

+		C22.453,2.82,23.695,4.064,23.695,5.598z M16.27,13.496c0,1.535-1.242,2.779-2.777,2.779c-1.531,0-2.777-1.244-2.777-2.779

+		c0-1.533,1.246-2.777,2.777-2.777C15.028,10.719,16.27,11.963,16.27,13.496z"/>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

+ 74 - 0
img/dice/4.svg
View File 

@@ -0,0 +1,74 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 26.988 26.988" style="enable-background:new 0 0 26.988 26.988;" xml:space="preserve">

+<g>

+	<path d="M24.84,0.616H2.145C0.959,0.616,0,1.579,0,2.762v21.465c0,1.184,0.959,2.145,2.145,2.145H24.84

+		c1.186,0,2.148-0.961,2.148-2.145V2.762C26.988,1.579,26.025,0.616,24.84,0.616z M6.164,8.78c-1.533,0-2.777-1.244-2.777-2.775

+		c0-1.535,1.244-2.779,2.777-2.779c1.535,0,2.779,1.244,2.779,2.779C8.943,7.536,7.699,8.78,6.164,8.78z M21.164,23.62

+		c-1.535,0-2.779-1.244-2.779-2.777s1.244-2.777,2.779-2.777c1.531,0,2.777,1.244,2.777,2.777S22.695,23.62,21.164,23.62z

+		 M21.004,8.829c-1.533,0-2.777-1.244-2.777-2.775c0-1.535,1.244-2.777,2.777-2.777s2.777,1.242,2.777,2.777

+		C23.781,7.585,22.537,8.829,21.004,8.829z M6.232,23.557c-1.529,0-2.777-1.244-2.777-2.779c0-1.531,1.248-2.775,2.777-2.775

+		c1.535,0,2.779,1.244,2.779,2.775C9.012,22.313,7.768,23.557,6.232,23.557z"/>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

+ 76 - 0
img/dice/5.svg
View File 

@@ -0,0 +1,76 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 26.988 26.988" style="enable-background:new 0 0 26.988 26.988;" xml:space="preserve">

+<g>

+	<path d="M24.842,0.615H2.147C0.958,0.615,0,1.576,0,2.76v21.467c0,1.184,0.958,2.145,2.147,2.145h22.695

+		c1.183,0,2.146-0.961,2.146-2.145V2.76C26.989,1.576,26.025,0.615,24.842,0.615z M6.167,8.779C4.633,8.779,3.389,7.535,3.389,6

+		c0-1.531,1.244-2.777,2.778-2.777S8.945,4.469,8.945,6C8.944,7.536,7.7,8.779,6.167,8.779z M13.495,16.271

+		c-1.534,0-2.778-1.242-2.778-2.777c0-1.533,1.244-2.777,2.778-2.777c1.532,0,2.778,1.244,2.778,2.777

+		C16.273,15.029,15.027,16.271,13.495,16.271z M21.164,23.619c-1.533,0-2.777-1.244-2.777-2.777s1.244-2.777,2.777-2.777

+		s2.777,1.244,2.777,2.777S22.697,23.619,21.164,23.619z M21.005,8.826c-1.535,0-2.779-1.244-2.779-2.775

+		c0-1.533,1.244-2.777,2.779-2.777c1.533,0,2.777,1.244,2.777,2.777C23.783,7.582,22.539,8.826,21.005,8.826z M6.235,23.556

+		c-1.533,0-2.776-1.244-2.776-2.777c0-1.535,1.244-2.777,2.776-2.777s2.776,1.242,2.776,2.777

+		C9.011,22.312,7.768,23.556,6.235,23.556z"/>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

+ 77 - 0
img/dice/6.svg
View File 

@@ -0,0 +1,77 @@
 
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 viewBox="0 0 26.99 26.99" style="enable-background:new 0 0 26.99 26.99;" xml:space="preserve">

+<g>

+	<path d="M24.844,0.616H2.146C0.96,0.616,0,1.577,0,2.761v21.467c0,1.184,0.96,2.145,2.146,2.145h22.698

+		c1.182,0,2.146-0.961,2.146-2.145V2.761C26.99,1.577,26.025,0.616,24.844,0.616z M6.168,8.78c-1.533,0-2.779-1.244-2.779-2.779

+		c0-1.531,1.246-2.777,2.779-2.777c1.534,0,2.777,1.246,2.777,2.777C8.945,7.536,7.702,8.78,6.168,8.78z M20.949,16.272

+		c-1.535,0-2.778-1.242-2.778-2.777c0-1.533,1.243-2.777,2.778-2.777c1.533,0,2.779,1.244,2.779,2.777

+		C23.729,15.03,22.482,16.272,20.949,16.272z M6.208,16.272c-1.534,0-2.777-1.242-2.777-2.777c0-1.533,1.243-2.777,2.777-2.777

+		s2.777,1.244,2.777,2.777C8.985,15.03,7.742,16.272,6.208,16.272z M21.165,23.62c-1.532,0-2.778-1.244-2.778-2.777

+		s1.246-2.777,2.778-2.777c1.534,0,2.778,1.244,2.778,2.777S22.699,23.62,21.165,23.62z M21.006,8.828

+		c-1.533,0-2.777-1.244-2.777-2.775c0-1.533,1.244-2.777,2.777-2.777s2.777,1.244,2.777,2.777

+		C23.783,7.583,22.539,8.828,21.006,8.828z M6.235,23.557c-1.533,0-2.777-1.244-2.777-2.777c0-1.535,1.244-2.777,2.777-2.777

+		c1.534,0,2.779,1.242,2.779,2.777C9.015,22.313,7.77,23.557,6.235,23.557z"/>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+	<g>

+	</g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+<g>

+</g>

+</svg>

+ 23 - 6
index.html
View File 

@@ -48,8 +48,10 @@ function roll() {
 
     roll_tag = document.createElement('div');
 
     dice_num = get_dice_num();
 
     for(i=0; i<dice_num; i++) {
 
-        dice_tag = document.createElement('span');
 
-        dice_tag.appendChild(document.createTextNode(rand_dice() + ' '));
 
+        dice_tag = document.createElement('img');
 
+        dice_value = rand_dice();
 
+        dice_tag.alt = dice_value;
 
+        dice_tag.src = 'img/dice/' + dice_value + '.svg';
 
         roll_tag.appendChild(dice_tag);
 
     }
 
     prependChild(document.getElementById('rolls'), roll_tag);
 
@@ -59,19 +61,30 @@ function roll() {
 
 
 <style>
 
 
-.src {
 
+footer {
 
+    color: gray;
 
     font-size: 0.64em;
 
+    margin-top: 1em;
 
 }
 
 
-.src a {
 
+footer a {
 
     color: gray;
 
     text-decoration: none;
 
 }
 
 
-.src a:hover {
 
+footer a:hover {
 
     text-decoration: underline;
 
 }
 
 
+#rolls div {
 
+    margin-top: 0.4em;
 
+}
 
+
 
+#rolls img {
 
+    height: 3em;
 
+    margin-right: 0.4em;
 
+}
 
+
 
 </style>
 
 
 <p>
 
@@ -85,6 +98,10 @@ function roll() {
 
 
 <div id="rolls"></div>
 
 
-<p class='src'><a href='https://git.hammerle.me/fphammerle/dice'>src</a></p>
 
+<footer>
 
+    <a href='https://git.hammerle.me/fphammerle/dice'>src</a>
 
+    | icons from
 
+    <a href="https://www.flaticon.com/authors/freepik" title="Freepik">flaticon:freepik</a>
 
+</footer>
 
 
 </html>