diff --git a/Data-Matrix/index.html b/Data-Matrix/index.html
new file mode 100644
index 0000000..d816d94
--- /dev/null
+++ b/Data-Matrix/index.html
@@ -0,0 +1,427 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+	<meta charset="utf-8"/>
+	<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"/>
+	<title>Datamatrix generator</title>
+	<link rel="shortcut icon" href="favicon.png" type="image/png"/>
+
+	<style type="text/css">
+	
+		*			{margin:0; padding:0; box-sizing:border-box;}
+		#box			{background:url('data:image/gif;base64,R0lGODlhBgAGAIAAAO7u7t7e3iH5BAAAAAAALAAAAAAGAAYAAAIKhIOXgKGuDIOzAAA7') #eeeff1;}
+
+
+		body			{font-size:12px; background:#ffe;}
+		body,
+		textarea		{text-align:center; font-family:arial;}
+
+
+		input			{}
+		input[type='number'],
+		input[type='color']	{width:5em;}
+		input[type='number']	{padding:0.25em; text-align:right;}
+		select			{width:9em; font-size:11px; padding:0.25em 0.2em;}
+		option			{padding:0.25em 0.2em;}
+		textarea		{resize:none; padding:2.5em; color:#358; background:#eef2f4; font-size:2em; border:0; width:100%;}
+
+
+		#set			{user-select:none; background:#fff; overflow:hidden;}
+		#set table		{border-collapse:collapse; padding:2em; font-size:11px; text-transform:uppercase; margin:2em auto;}
+		#set th,
+		#set td			{padding:0.4em 0.5em;}
+		#set th			{text-align:right; color:#567;}
+		#set td			{text-align:left;}
+
+
+		/* res beautifier */
+		#res			{color:#789; padding:2em; text-align:left; font-family:'Lucida Console', Monaco, monospace;}
+		#res b			{font-weight:normal;}
+		#res i			{font-style:normal;}
+		#res .obj		{color:#789;}
+		#res .obj b		{color:#345; font-weight:bold;}
+		#res .key		{color:#45a;}
+		#res .num		{color:#12a;}
+		#res .txt		{color:#9ab;}
+		#res .txt i		{color:#384;}
+		#res .clr		{color:#9ab;}
+		#res .clr i		{color:#731;}
+		#res a			{color:#67a;}
+		#res a:hover		{color:#67e;}
+
+
+		#box			{overflow:hidden; position:relative; height:300px; padding:3em;}
+		#box svg		{display:block; position:absolute; right:50%; bottom:50%; transform:translate( 50%, 50%); cursor:pointer;}
+		#box svg		{max-width:100%; max-height:100%;}
+
+
+		/* minimized options for small screen */
+		.opt			{display:block; padding:1em; background:#0ae; color:#fff; text-decoration:none;}
+		.opt:hover		{background:#0af;}
+
+		#op2.opt		{background:#ea0;}
+		#op2.opt:hover		{background:#fa0;}
+
+		#set table,
+		#set .legend,
+		#set #op2.opt,
+		#set.show #op1.opt	{display:none;}
+
+		#set.show table		{display:table;}
+		#set.show #op2.opt	{display:block;}
+
+	@media (min-width: 620px) {
+
+		html,
+		body,			
+		#box,
+		#set,
+		#txt,
+		#msg,
+		#hnt			{display:block; position:absolute; top:0; right:0; left:0; bottom:0;}
+
+		html,
+		body			{overflow:hidden;}
+		#box			{height:auto;}
+
+		#txt,
+		#hnt			{height:250px; top:auto; border-top:3px #eee solid;}
+
+		#set,
+		#hnt			{width:270px; left:auto;}
+		#set table		{font-size:10px;}
+
+		#box,
+		#txt			{right:270px}
+
+		#box,
+		#set			{bottom:250px;}
+
+		#hnt			{overflow:auto;}
+		#msg			{width:100%; height:100%;}
+
+		#set			{overflow-y:auto;}
+		#set .legend		{display:block;}
+		#set table		{display:table;}
+		#set .opt		{display:none !important;}
+	}
+
+	@media (min-width:900px) {
+
+		#set,
+		#hnt			{width:30%}
+		#box,
+		#txt			{right:30%}
+	}
+
+	@media (min-width:1024px) {
+
+		#set table		{font-size:11px;}
+	}
+
+	@media (min-width:1600px) {
+
+		#set,
+		#hnt			{width:480px}
+		#box,
+		#txt			{right:480px}
+	}
+
+		.legend			{padding:1.5em 0.5em; border-bottom:1px #eee solid;}
+
+	</style>
+
+	<script src="datamatrix.min.js"></script>
+
+</head>
+<body>
+
+<div id="box"></div>
+
+<div id="set">
+
+<a id="op1" class="opt" href="#">Show settings</a>
+<a id="op2" class="opt" href="#">Hide settings</a>
+
+<div class="legend">
+
+	<h3>DATAMATRIX SETTINGS</h3>
+
+</div>
+
+<table><tr><th>
+
+<label for="in1">Height or Dim</label></th><td><input
+	id="in1" type="number" value="256" min="256" max="61440" step="64"/></td></tr><tr><th>
+
+<label for="in2">Rectangle</label></th><td><input
+	id="in2" type="checkbox"/></td></tr><tr><th>
+
+<label for="in3">Padding</label></th><td><input
+	id="in3" type="number" value="2" min="0" max="10"/></td></tr><tr><th>
+
+<label for="in4">Faces</label></th><td><input
+	id="in4" type="color" value="#000000"/></td></tr><tr><th>
+
+<label for="in5">Background color</label></th><td><input
+	id="in5" type="color" value="#f2f4f8"/></td></tr><tr><th>
+
+<label for="in6">Background opaque</label></th><td><input
+	id="in6" type="checkbox"/></td></tr><tr><th>
+
+<label for="in7">Optimized SVG SIZE</label></th><td><input
+	id="in7" type="checkbox" checked="checked"/></td></tr></table>
+
+</div>
+
+<div id="txt"><textarea id="msg"></textarea></div>
+
+<div id="hnt"><pre id="res"></pre></div>
+
+
+<script>
+
+	'use strict';
+
+	(function() {
+
+	/**
+		This script is not optimized
+	*/
+
+		var
+		box = document.getElementById('box'),
+		txt = document.getElementById('msg'),
+		res = document.getElementById('res'),
+
+		set = document.getElementById('set'),
+		op1 = document.getElementById('op1'),
+		op2 = document.getElementById('op2'),
+
+		in1 = document.getElementById('in1'),
+		in2 = document.getElementById('in2'),
+		in3 = document.getElementById('in3'),
+		in4 = document.getElementById('in4'),
+		in5 = document.getElementById('in5'),
+		in6 = document.getElementById('in6'),
+		in7 = document.getElementById('in7'),
+
+		current = function( o ) {
+
+				o._value = o.value;
+			},
+
+		updated = function( o ) {
+
+				return o._value == o.value;
+			},
+
+		clear = function( o ) {
+
+				while( o.childNodes[ 0 ] ) {
+
+					o.removeChild( o.childNodes[ 0 ] );
+				}
+			},
+
+		hint = function( d ) {
+
+				var
+				c = 0,
+				s = [];
+
+				/* beautify: remove default values */
+				if( 256  == d.dim ) delete d.dim;
+				if(   2  == d.pad ) delete d.pad;
+				if(   0  == d.rct  ) delete d.rct;
+				if(   0  == d.pal[ 1 ] ) delete d.pal.pop();
+				if(   d.pal[ 0 ] == '#000000' && !d.pal[ 1 ] ) delete d.pal;
+				if(   0  == d.vrb ) delete d.vrb;
+
+				for( var k in d ) {
+
+					var
+					v = d[ k ];
+
+					if( 1 * v == v )
+					v = '  <i class="num">' + v + '</i>';
+
+					else if ( Array == v.constructor )
+					v = '[<i class="clr">"<i>' + v.join('</i>"</i>, <i class="clr">"<i>') + '</i>"</i>]';
+
+					else
+					v = ' <i class="txt">"<i>' + v + '</i>"</i>';
+
+					s.push( (s.length ? ',' : ' ') + '<b class="key">' + k + '</b> : ' + v );
+					c++;
+				}
+
+				res.innerHTML = '<b class="obj"><b>DATAMatrix</b>(</b>'
+					+ (( 1 == c )
+					? '<i class="txt">"<i>' + d.msg + '</i>"</i>'
+					: '{\n\n    ' + s.join('\n    ') + '\n\n}')
+					+ '<b class="obj">)</b>;\n'
+					+ '\n\n/**\n\n     Source code and documentation:\n     <a href="https://github.com/datalog/datamatrix-svg">https://github.com/datalog/datamatrix-svg</a>\n\n*/\n\n\n';
+
+		},
+
+		download = function( d ) {
+
+
+			/**
+				ATTN!
+				We are going to download "WHAT WAS RENDERED" by browser
+				not "WHAT WAS GENERATED" by datamatrix.js
+			*/
+
+			function replace( d, r ) { 
+
+				return d.replace( new RegExp( Object.keys( r ).join('|'), 'gi'), function( m ) {
+
+					return r[ m ];
+				}); 
+			} 
+
+			var
+			d = '<!--\n\nhttps://github.com/datalog/datamatrix-svg\n\n-->' + replace( d, {
+
+				/* removing useless spaces */
+				 'M '	: 'M'
+				,' M '	: 'M'
+				,' V '	: 'V'
+				,' v '	: 'v'
+				,' H '	: 'H'
+				,' h '	: 'h'
+				,' Z'	: 'Z'			
+				,' z'	: 'z'
+				,' />'	: '/>'
+
+				,'></path>': '/>'
+				,'svg xmlns="http://www.w3.org/2000/svg"':'svg'
+			}),
+
+			n = 'datamatrix-' + replace( new Date().toISOString().slice( 0, 19 ), {
+
+	 			 ':'	: ''
+	 			,'-'	: ''
+	 			,'T'	: '-'
+
+			}) + '.svg',
+
+			b = new Blob( [ d ], { type:'image/svg+xml'} );
+
+			if( window.navigator.msSaveOrOpenBlob ) {
+
+				window.navigator.msSaveOrOpenBlob( b, n );
+
+			} else {
+
+				var
+				a = document.createElement("a"),
+				u = URL.createObjectURL( b );
+
+				a.href = u;
+				a.download = n;
+
+				document.body.appendChild( a );
+				a.click();
+
+				setTimeout( function() {
+
+					document.body.removeChild( a );
+					window.URL.revokeObjectURL( u );
+
+				}, 0); 
+			}
+
+			return false;
+		};
+
+		op1.onclick = function() {
+
+					set.className = 'show';
+					return false;
+		};
+
+		op2.onclick = function() {
+
+					set.className = 'hide';
+					return false;
+		};
+
+		in1.onchange =
+		in2.onchange =
+		in3.onchange = 
+		in4.onchange =
+		in6.onchange =
+		in7.onchange = function() {
+
+					box.update();
+			};
+
+		in5.onchange = function() {
+
+					in6.checked = true;
+					box.update();
+			};
+
+		txt.onkeyup = function() {
+
+					if( updated( txt ) ) return;
+
+					box.update();
+					current( txt );
+			};
+
+		box.update = function() {
+
+					clear( box );
+
+					var
+					time = new Date(),
+					data = {
+
+						 msg  :   txt.value
+						,dim  :   in1.value | 0
+						,rct  :   in2.checked | 0
+						,pad  :   in3.value | 0
+						,pal  : [ in4.value, in6.checked | 0 && in5.value ]
+						,vrb  : ( in7.checked ) ? 0 : 1
+					};
+
+					box.appendChild( DATAMatrix( data ) )
+
+						.onclick = function() {
+
+							return download( box.innerHTML );
+						};
+
+					console.log('DATAMatrix generation time: ' + ( new Date() - time ) + ' ms');
+
+					hint( data );
+			};
+
+		txt.value = [
+				 'Your message here'
+				,'https://github.com/datalog/datamatrix-svg'
+				,'Pure javascript Datamatrix generator'
+				,'Type here...'
+				,'This is Data Matrix'
+				,'Abyssus abyssum invocat'
+				,'Amor non est medicabilis herbis'
+				,'Nulla dies sine linea'
+				,'Cogitations poenam nemo patitur'
+				,'Verbaque praevisam rem non invita sequentur'
+			][ ( Math.random() * 10 ) | 0 ];
+
+		current( txt );
+		box.update();
+		txt.focus();
+	})();
+
+</script>
+
+
+</body>
+</html>

+ +Height or Dim
+ +Rectangle
+ +Padding
+ +Faces
+ +Background color
+ +Background opaque
+ +Optimized SVG SIZE