ambigram-generator

<title>Ambigram Generator</title> <head> <!-- Handwriting Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Dancing+Script:wght@700&family=Caveat:wght@700&family=Indie+Flower&family=Patrick+Hand&family=Shadows+Into+Light&family=Gloria+Hallelujah&family=Satisfy&family=Kalam:wght@700&display=swap" rel="stylesheet"> <style> body { font-family: Arial, sans-serif; background: #f4f4f4; text-align: center; padding: 30px; } input, select, button { padding: 10px; font-size: 16px; margin: 6px; width: 220px; } canvas { margin-top: 20px; background: #fff; border: 1px solid #ccc; } </style> </head> <body> <h2>✍️ Two-Word Ambigram Generator (Demo)</h2> <p>Enter two words and choose a handwriting font</p> <input type="text" id="text1" placeholder="First word"> <br> <input type="text" id="text2" placeholder="Second word"> <br> <select id="fontSelect"> <option value="Pacifico">Pacifico</option> <option value="Dancing Script">Dancing Script</option> <option value="Caveat">Caveat</option> <option value="Indie Flower">Indie Flower</option> <option value="Patrick Hand">Patrick Hand</option> <option value="Shadows Into Light">Shadows Into Light</option> <option value="Gloria Hallelujah">Gloria Hallelujah</option> <option value="Satisfy">Satisfy</option> <option value="Kalam">Kalam</option> </select> <br>

<button onclick="generateAmbigram()">Generate</button> <button onclick="downloadImage()">Download PNG</button>

<br>

<canvas id="canvas" width="560" height="360"></canvas>

<script> function generateAmbigram() { const word1 = document.getElementById("text1").value || "LOVE"; const word2 = document.getElementById("text2").value || "HATE"; const font = document.getElementById("fontSelect").value; const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#000000"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "64px " + font; // First word (top) ctx.fillText(word1, canvas.width / 2, 110); // Second word rotated (bottom) ctx.save(); ctx.translate(canvas.width / 2, 260); ctx.rotate(Math.PI); ctx.fillText(word2, 0, 0); ctx.restore(); } function downloadImage() { const canvas = document.getElementById("canvas"); const link = document.createElement("a"); link.download = "two-word-ambigram.png"; link.href = canvas.toDataURL("image/png"); link.click(); } </script> <hr> <p style="font-size:14px;"> Two-word demo • Full ambigram tools at <strong>ambigramtools.com</strong> </p>