Morse-Code-Pattern-Background - TripleLog Code Snippet

Morse Code Pattern Background

Output Readme Download Replit Sel. & Copy Full

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="favicon.png">
  <title></title>
  <meta name="description" content="" />
  <link href="style.css" rel="stylesheet" type="text/css" />

  <style>

  </style>
</head>

<body>
  <input type="text" oninput="updateText(this.value)" onchange="updateText(this.value)" placeholder="Text to convert..."/>
  <a id="downloadSVG" href="" download="bg.svg">Download SVG</a>
  <button onclick="navigator.clipboard.writeText(urlStr); alert('Copied to clipboard');">Copy Encoded SVG URL</button>
  <div id="preview">
    
  </div>
  <script src="script.js"></script>
  <script>
    var urlStr = "";
    var encodedSVG = "";
    function updateText(input){
      var morse = toMorse(input);
      var svg = toSVG(morse.colors,morse.arr);
      var svgEl = document.getElementById("downloadSVG");
      encodedSVG = encodeSvg(svg);
      svgEl.setAttribute('href','data:image/svg+xml,'+encodedSVG)
      urlStr = 'url("data:image/svg+xml,'+encodedSVG+'")';
      document.body.style.backgroundImage = urlStr;
    }
  </script>
</body>

</html>

//This function picks a random (not very dark) hex color from #AAA to #FFF.
//You can replace with a better random color picker
function randomColor(){
	var letters = ['A','B','C','D','E','F'];
	var c = "#";
	c += letters[Math.floor(Math.random()*6)];
	c += letters[Math.floor(Math.random()*6)];
	c += letters[Math.floor(Math.random()*6)];
	return c;
}
//This function converts a string of text into a 2d array of morse code
function toMorse(input){
	var letters = {'a':[1,2],'b':[2,1,1,1],'c':[2,1,2,1],'d':[2,1,1],'e':[1],'f':[1,1,2,1],'g':[2,2,1],'h':[1,1,1,1],'i':[1,1],'j':[1,2,2,2],'k':[2,1,2],'l':[1,2,1,1],'m':[2,2],'n':[2,1],'o':[2,2,2],'p':[1,2,2,1],'q':[2,2,1,2],'r':[1,2,1],'s':[1,1,1],'t':[2],'u':[1,1,2],'v':[1,1,1,2],'w':[1,2,2],'x':[2,1,1,2],'y':[2,1,2,2],'z':[2,2,1,1],'0':[2,2,2,2,2],'1':[1,2,2,2,2],'2':[1,1,2,2,2],'3':[1,1,1,2,2],'4':[1,1,1,1,2],'5':[1,1,1,1,1],'6':[2,1,1,1,1],'7':[2,2,1,1,1],'8':[2,2,2,1,1],'9':[2,2,2,2,1]};
	input = input.trim().toLowerCase();
	var morse = [];
	for (var i=0;i<input.length;i++){
		var c = input[i];
		if (letters[c]){
			morse.push(letters[c]);
		}
		else {
			morse.push([]);
		}
	}
	var output = [];
	var n = 0;
	for (var i=0;i<morse.length;i++){
		if (morse[i].length == 0){
			output[output.length-1]+=3;
		}
		for (var ii=0;ii<morse[i].length;ii++){
			n++;
			output.push(morse[i][ii]);
			if (ii < morse[i].length-1){
				output.push(1);
			}
			else {
				output.push(2);
			}
		}
	}
	var colors = {};
	for (var i=0;i<n;i++){
		colors[i]={};
		for (var ii=0;ii<n;ii++){
			colors[i][ii]=randomColor();
		}
	}
	return {arr:output,colors:colors};
}
function encodeSvg(svgString) {
  return svgString.replace(/"/g, '\'')
        .replace(/%/g, '%25')   
        .replace(/#/g, '%23')      
        .replace(/</g, '%3C')
        .replace(/>/g, '%3E')
        .replace(/\s+/g,' ');
}

function toSVG(colors,arr){
	var x = 0;
	var y = 0;
	var rects = [];
	var xx = 0;
	var yy = 0;

	for (var i=0;i<arr.length;i++){
		x = 0;
		xx = 0;
		for (var ii=0;ii<arr.length;ii++){
			if (i%2 == 0 && ii%2 == 0){
				var c = colors[xx][yy];
				rects.push([x,y,arr[ii],arr[i],c]);
			}
			x += arr[ii];
			if (ii%2 == 1 && arr[ii] == 2){
				xx++;
			}
		}
		y += arr[i];
		if (i%2 == 1 && arr[i] == 2){
			yy++;
		}
	}
  var svg ="";
	svg += `<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 `+x+` `+y+`' width='`+x+`px' height='`+y+`px'>`;

	for (var i=0;i<rects.length;i++){
		var c = rects[i][4];
		svg += "\n<rect x='"+rects[i][0]+"' y='"+rects[i][1]+"' width='"+rects[i][2]+"' height='"+rects[i][3]+"' fill='"+c+"' stroke='none' />"
	}
	svg += "</svg>";
	return svg;
}

body {
  background: #888;
}

About

This repl generates a simple patterned background based on a string of text. Most of the pattern generation occurs in the script.js file, but the script tag in index.html calls these functions and places it in the DOM, etc.

To view this project on TripleLog, click here.

Create Morse Code

Input any text and it will be converted into a 2-dimensional array based on its representation in morse code. You can modify the conversion to any other code if desired.

Pick Colors

In the script.js there is a function that randomly picks colors. Change this to a different function to pick whatever colors you wish. You can set colors deterministically or just use a different set of random colors.

Download SVG

Click the Download SVG link to download the svg. By default each dot is a pixel so the pattern is quite small for short phrases, but you can stretch to your preferred size. The output will be a square so any other aspect ratio will involve the smaller squares becoming rectangles.

Embed

For short words you might want to just embed the SVG into the url directly. Longer words and phrases will be several KBs so zipping them and linking to the url is likely better.