Morse Code Pattern Background
Output Readme Download Zip View Replit Select & Copy


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.


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.