Morse Code Image Generator

From text to dots and dashes to a picture

Morse code represents each letter and digit as a short sequence of two signals: a dot (a brief mark) and a dash (a longer one). The letter E is a single dot; T is a single dash; the famous distress call SOS is ... --- .... This tool does two jobs at once. First it translates your text into Morse using the standard International Morse alphabet — it uppercases your input, looks up each character, and joins the symbols with spaces. Then it renders that Morse as an actual image on an HTML canvas, drawing every dot as a filled circle and every dash as a filled rectangle, which you can style and download as a PNG.

How the spacing encodes meaning

In Morse, timing is grammar. The gaps between marks are what separate one letter from the next and one word from the next, and this tool mirrors that structure visually. Within a single letter, symbols sit close together separated by the symbol gap. Between letters the spacing widens — three times the symbol gap — so you can see where one character ends. Between whole words a larger break appears, which in the horizontal layout starts a new row entirely. The text output above the image shows the same structure with single spaces between letters and double spaces between words, so the picture and the code line up exactly.

The controls and what they change

• Dot size sets the diameter of each dot in pixels and is the base unit everything else scales from.
• Dash length is a multiplier of the dot size — by convention a dash is three times a dot, which is the default, matching real Morse proportions.
• Symbol gap controls the spacing between marks inside a letter.
• Word gap sets the larger break between words (the vertical distance between rows in horizontal mode).
• Foreground and background colours let you match a design or maximise contrast.
• Orientation switches between a horizontal layout, where each word is its own row, and a vertical one, where each letter is drawn as a column from top to bottom.

A worked example

Type SOS. The translator maps S to ..., O to ---, and S to ... again, producing the text ... --- .... On the canvas, the first S becomes three small circles spaced by the symbol gap. Then a wider letter-gap, then O as three rectangles each three dots long laid end to end. Another letter-gap, then the final three circles. With the defaults — an 8-pixel dot and a dash three times as long — the O's dashes are visibly the dominant feature, which is exactly why --- reads as the urgent middle of the distress signal. Increase the dot size and the whole image scales up proportionally; switch to vertical and the same sequence stacks downward instead.

Practical use cases

• Decorative and craft projects. Turn a name, a date, or a short phrase into a clean dot-and-dash pattern for jewellery, engraving, embroidery, or print, then download the PNG to send to a maker or laser cutter.
• Teaching and learning Morse. Seeing the visual rhythm alongside the text helps learners internalise the timing relationships that audio alone makes abstract.
• Puzzles and games. Generate a hidden message as an image clue for an escape room, scavenger hunt, or classroom activity.
• Logos and graphics. A short word rendered in Morse makes a distinctive minimalist motif.

Tips and limitations

• Keep dashes at roughly 3× the dot. This is the authentic Morse proportion; pushing the multiplier too low makes dashes hard to distinguish from dots, and too high distorts the rhythm.
• Use high contrast for legibility. Dark marks on a light background read most clearly, especially if the image will be printed or scaled down.
• Only mapped characters appear. The translator covers A–Z, 0–9, and common punctuation. Characters with no Morse equivalent — most accented or non-Latin letters — are silently skipped, so check the text output to confirm everything you intended is included.
• It encodes, it does not transmit. The output is a static visual representation, not an audible or flashing signal.
• Everything runs locally. Translation and canvas drawing happen entirely in your browser, and the PNG is generated on your device with nothing uploaded, so your text stays private.