DEV Community: codingdudecom

JavaScript Copy to Clipboard: Build a Kaomoji Picker

codingdudecom — Wed, 04 Nov 2026 18:52:19 +0000

Want a useful JavaScript copy to clipboard example that goes beyond copying “Hello world”? Let’s build a small kaomoji picker. Click a face, copy the complete expression, and paste it into a message, document, or comment. No framework, icon library, or build tools required.

Kaomoji are text faces such as (＾▽＾) and ʕ•ᴥ•ʔ. They make a good practice project because the interface is simple, while the strings introduce a few real-world details: Unicode characters, backslashes, browser permissions, and accessible feedback.

The finished picker has six buttons, a visible focus outline, and a status message. When automatic copying is unavailable, it offers a selected text field for manual copying. The same pattern works for coupon codes, command-line snippets, and invitation links.

For a ready-made option alongside this project, see the kaomoji generator on Coding Dude. Here, we’ll focus on building the copying behavior ourselves.

Interface illustration: each button copies one complete face; the focus outline and status area make the interaction easier to use.

JavaScript copy to clipboard: the smallest working example

The method we need is navigator.clipboard.writeText(). Give it a string and wait for its promise to resolve before telling the user the copy succeeded. Here is a complete starter example:

<button id="copy-happy" type="button">Copy happy face</button>
<p id="message" role="status"></p>
<script>
  const message = document.querySelector("#message");
  document.querySelector("#copy-happy").addEventListener("click", async () => {
    message.textContent = "Copying…";
    try {
      await navigator.clipboard.writeText("(＾▽＾)");
      message.textContent = "Copied!";
    } catch {
      message.textContent = "Copy failed. Select and copy this face: (＾▽＾)";
    }
  });
</script>

Save this example in an HTML file and serve it from HTTPS or a local development server. The click handler provides the user action browsers expect for copying. A failed operation goes to catch, so the button never reports success simply because it was clicked.

For the full project, we’ll separate the markup, styling, and behavior. Put the HTML inside the body, the CSS inside a style element in the head, and the JavaScript in a script element just before the closing body tag.

1. Add the HTML structure

The picker needs a container for its buttons, a status region, and a manual-copy area. JavaScript will create the six buttons from an array, so you only need to maintain the list in one place.

<main class="picker" aria-labelledby="picker-title">
  <p class="eyebrow">VANILLA JAVASCRIPT · SMALL PROJECT</p>
  <h1 id="picker-title">Kaomoji picker</h1>
  <p id="picker-help">Choose a face to copy it. Then paste it into your message.</p>
  <div id="faces" class="faces" aria-describedby="picker-help"></div>
  <p id="copy-status" class="status" role="status" aria-live="polite"
     aria-atomic="true">Ready when you are.</p>
  <div id="manual-copy" class="manual" hidden>
    <label for="copy-text">Text to copy manually</label>
    <p id="manual-help">Press Ctrl+C on Windows/Linux or Command+C on Mac.
      On mobile, touch and hold the selected text and choose Copy.</p>
    <textarea id="copy-text" rows="2" readonly
              aria-describedby="manual-help" spellcheck="false"></textarea>
  </div>
  <noscript><p>Enable JavaScript to use the picker. You can still select
    and copy this face manually: (＾▽＾)</p></noscript>
</main>

The status region exists before any interaction happens. Its role="status" and polite live announcement let assistive technology announce updates without moving focus after every successful copy. The manual-copy field starts hidden and has a visible label plus platform-specific instructions.

A real button already supports mouse clicks, touch, Enter, and Space. We don’t need to recreate that behavior with a clickable div. The noscript message also leaves a face available to select when JavaScript is turned off.

2. Style a responsive picker with CSS

CSS Grid gives us flexible columns without a long list of breakpoints. Each button has enough room for its text face and label. On narrow screens, the grid drops to fewer columns rather than squeezing the expressions into unreadable fragments.

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(1rem, 5vw, 4rem);
  color: #15283b;
  background: #f7f4ed;
  font: 1rem/1.6 system-ui, sans-serif;
}
.picker {
  max-width: 52rem;
  margin: auto;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 1px solid #ced8d5;
  border-radius: 1.25rem;
  background: #fff;
}
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
h1 { margin: .25rem 0; font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.2; }
.faces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
}
.face-button {
  min-width: 0;
  min-height: 6rem;
  padding: .8rem;
  border: 1px solid #b7cbc7;
  border-radius: .75rem;
  background: #f2f8f6;
  color: #15283b;
  font: inherit;
  cursor: pointer;
}
.face-button:hover { background: #dcefe9; }
.face-button:focus-visible, textarea:focus-visible {
  outline: 3px solid #087c72;
  outline-offset: 4px;
}
.face { display: block; font-size: 1.15rem; white-space: pre; overflow-x: auto; }
.face-label { display: block; margin-top: .4rem; font-size: .85rem; font-weight: 650; }
.status { padding: .75rem 1rem; border-radius: .5rem; background: #e4f3ee; }
.manual { padding: 1rem; border: 1px solid #a16b16; border-radius: .75rem; }
.manual label { font-weight: 700; }
.manual p { font-size: .9rem; }
textarea {
  width: 100%;
  padding: .75rem;
  font: 1.1rem/1.5 system-ui, sans-serif;
  color: #15283b;
  background: #fff;
  resize: vertical;
}

The focus outline is deliberately easy to see. Try navigating with Tab before adding more visual effects. A hover color helps mouse users, but it cannot replace keyboard focus.

The face uses white-space: pre so intentional spaces stay visible. Very long expressions can scroll inside their button instead of stretching the whole page. You can change the palette to match your website while keeping text contrast and the focus outline clear.

3. Copy complete strings with JavaScript

Each item has a human-readable label and the exact string to copy. The label gives the button a useful accessible name; the decorative face is hidden from screen readers to avoid announcing a long sequence of punctuation.

The copy operation has two outcomes: announce success after it resolves, or offer selectable text when automatic copying fails.

const kaomojis = [
  { label: "Happy", text: "(＾▽＾)" },
  { label: "Crying", text: "(T_T)" },
  { label: "Shrug", text: "¯\\_(ツ)_/¯" },
  { label: "Hug", text: "(づ｡◕‿‿◕｡)づ" },
  { label: "Bear", text: "ʕ•ᴥ•ʔ" },
  { label: "Table flip", text: "(╯°□°）╯︵ ┻━┻" }
];

const faces = document.querySelector("#faces");
const status = document.querySelector("#copy-status");
const manual = document.querySelector("#manual-copy");
const copyText = document.querySelector("#copy-text");
let copying = false;

async function copyFace(face) {
  if (copying) return;
  copying = true;
  faces.setAttribute("aria-busy", "true");
  manual.hidden = true;
  status.textContent = `Copying: ${face.label}…`;

  try {
    if (!window.isSecureContext || !navigator.clipboard?.writeText) {
      throw new Error("Clipboard API unavailable");
    }
    await navigator.clipboard.writeText(face.text);
    status.textContent = `Copied: ${face.label}. Paste it wherever you like.`;
  } catch {
    copyText.value = face.text;
    manual.hidden = false;
    status.textContent = "Automatic copy is unavailable. Select the text below and copy it manually.";
    copyText.focus();
    copyText.select();
    copyText.setSelectionRange(0, copyText.value.length);
  } finally {
    copying = false;
    faces.removeAttribute("aria-busy");
  }
}

for (const face of kaomojis) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "face-button";
  button.setAttribute("aria-label", `Copy ${face.label} kaomoji`);

  const symbol = document.createElement("span");
  symbol.className = "face";
  symbol.setAttribute("aria-hidden", "true");
  symbol.textContent = face.text;

  const label = document.createElement("span");
  label.className = "face-label";
  label.textContent = face.label;

  button.append(symbol, label);
  button.addEventListener("click", () => copyFace(face));
  faces.append(button);
}

The copying flag ignores extra activations while a request is pending. That prevents two overlapping requests from racing to update the status. Buttons keep their focus, and they work again when the request finishes.

Notice that we use textContent to display each face. A face is text, so there’s no reason to interpret it as HTML. This also preserves literal characters such as angle brackets when you expand the collection.

If the API is missing or rejects the request, the code reveals the read-only textarea, puts the original string inside it, and selects it. Moving focus is useful here because there’s a new task to complete manually. Selection menus differ on mobile, so the instructions explain touch-and-hold as well.

4. Customize the faces without breaking the strings

To customize the picker, choose a few expressions from this kaomoji collection and add them to your JavaScript array. Keep each face as one complete string so its characters stay together.

You can change the label independently of the face. For example, a team chat might use “Celebration” or “Need coffee.” Keep labels descriptive enough that someone can choose a button without seeing its symbol.

Keep each face as one string. In an ordinary JavaScript string literal, two backslashes represent one literal backslash.

Backslashes deserve special attention. In an ordinary quoted JavaScript string literal, a backslash starts an escape sequence. To put one literal backslash in the resulting text, write two in the source:

const shrug = "¯\\_(ツ)_/¯";
console.log(shrug); // ¯\_(ツ)_/¯

That doubling belongs in JavaScript source. When you paste a face into an HTML text node or type it into a text field, you don’t apply JavaScript string escaping. Likewise, choose quotation marks carefully if a new face contains an apostrophe or a double quote.

Keep the string intact instead of splitting it into letters. Some Unicode characters use multiple code units, and some visible symbols combine several characters. This picker avoids that problem by passing the original string directly to the clipboard.

Why does copying fail on some pages?

The Clipboard API requires a secure context. Use HTTPS on your live site; localhost is generally treated as trustworthy for development. Don’t rely on opening a downloaded file directly to test every browser’s clipboard behavior.

Copying can also fail because of browser policy, document focus, or restrictions on an embedded demo. Keep the request directly inside the user-triggered handler, and avoid an unrelated delay before it. If an embedded version fails, open the standalone demo in its own tab.

The writeText documentation explains the method’s promise and secure-context requirement. Our fallback makes failure recoverable without trying to read clipboard contents or requiring an extra library.

Reuse the copy button in your own projects

To turn this into a snippet picker, replace each face with a command or short code sample and update its label. The copying function doesn’t depend on kaomoji: it receives the selected item and copies its text. For multiline snippets, use a JavaScript template literal and give the manual textarea more rows so readers can inspect the content.

Keep the page’s character encoding set to UTF-8, as it is in the complete download. If a face appears as empty boxes on another device, check the font’s character coverage before changing the string. A font can change how a symbol looks without changing what gets copied.

This example writes only the selected text. It doesn’t read the user’s existing clipboard, store a copy history, or send the expressions to a server. That keeps the small project easy to understand and makes the copy function straightforward to reuse.

Assemble and test the complete demo

The HTML, CSS, and JavaScript sections above contain the complete picker. Create an HTML document with UTF-8 encoding and a viewport meta tag. Put the CSS inside a style element in the head, the picker markup inside the body, and the JavaScript inside a script element just before the closing body tag.

Save the file as kaomoji-picker-demo.html, serve it from your local development server, and open the page in your browser. Nothing needs compiling.

Before reusing it, copy each face into a plain-text editor and check the result. Try Tab and Enter, then Space. Finally, test the manual-copy path with clipboard access blocked. Those small checks are more useful than testing only the happy-face button once.

Want another project with expressive text? Try my JavaScript emoji mouse trail tutorial. For a different treatment, experiment with the wavy text generator. Keep the clipboard picker’s faces intact even when you explore effects that animate individual characters.

You now have a reusable copy-button pattern: store the original text, wait for the clipboard operation, give clear feedback, and offer a manual way forward when copying is blocked.

JavaScript Copy to Clipboard: Build a Kaomoji Picker

codingdudecom — Wed, 04 Nov 2026 18:45:57 +0000

For a ready-made option alongside this project, see the kaomoji generator on Coding Dude. Here, we’ll focus on building the copying behavior ourselves.

Interface illustration: each button copies one complete face; the focus outline and status area make the interaction easier to use.

JavaScript copy to clipboard: the smallest working example

The method we need is navigator.clipboard.writeText(). Give it a string and wait for its promise to resolve before telling the user the copy succeeded. Here is a complete starter example:

<button id="copy-happy" type="button">Copy happy face</button>
<p id="message" role="status"></p>
<script>
  const message = document.querySelector("#message");
  document.querySelector("#copy-happy").addEventListener("click", async () => {
    message.textContent = "Copying…";
    try {
      await navigator.clipboard.writeText("(＾▽＾)");
      message.textContent = "Copied!";
    } catch {
      message.textContent = "Copy failed. Select and copy this face: (＾▽＾)";
    }
  });
</script>

1. Add the HTML structure

The picker needs a container for its buttons, a status region, and a manual-copy area. JavaScript will create the six buttons from an array, so you only need to maintain the list in one place.

<main class="picker" aria-labelledby="picker-title">
  <p class="eyebrow">VANILLA JAVASCRIPT · SMALL PROJECT</p>
  <h1 id="picker-title">Kaomoji picker</h1>
  <p id="picker-help">Choose a face to copy it. Then paste it into your message.</p>
  <div id="faces" class="faces" aria-describedby="picker-help"></div>
  <p id="copy-status" class="status" role="status" aria-live="polite"
     aria-atomic="true">Ready when you are.</p>
  <div id="manual-copy" class="manual" hidden>
    <label for="copy-text">Text to copy manually</label>
    <p id="manual-help">Press Ctrl+C on Windows/Linux or Command+C on Mac.
      On mobile, touch and hold the selected text and choose Copy.</p>
    <textarea id="copy-text" rows="2" readonly
              aria-describedby="manual-help" spellcheck="false"></textarea>
  </div>
  <noscript><p>Enable JavaScript to use the picker. You can still select
    and copy this face manually: (＾▽＾)</p></noscript>
</main>

2. Style a responsive picker with CSS

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  padding: clamp(1rem, 5vw, 4rem);
  color: #15283b;
  background: #f7f4ed;
  font: 1rem/1.6 system-ui, sans-serif;
}
.picker {
  max-width: 52rem;
  margin: auto;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 1px solid #ced8d5;
  border-radius: 1.25rem;
  background: #fff;
}
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
h1 { margin: .25rem 0; font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.2; }
.faces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
}
.face-button {
  min-width: 0;
  min-height: 6rem;
  padding: .8rem;
  border: 1px solid #b7cbc7;
  border-radius: .75rem;
  background: #f2f8f6;
  color: #15283b;
  font: inherit;
  cursor: pointer;
}
.face-button:hover { background: #dcefe9; }
.face-button:focus-visible, textarea:focus-visible {
  outline: 3px solid #087c72;
  outline-offset: 4px;
}
.face { display: block; font-size: 1.15rem; white-space: pre; overflow-x: auto; }
.face-label { display: block; margin-top: .4rem; font-size: .85rem; font-weight: 650; }
.status { padding: .75rem 1rem; border-radius: .5rem; background: #e4f3ee; }
.manual { padding: 1rem; border: 1px solid #a16b16; border-radius: .75rem; }
.manual label { font-weight: 700; }
.manual p { font-size: .9rem; }
textarea {
  width: 100%;
  padding: .75rem;
  font: 1.1rem/1.5 system-ui, sans-serif;
  color: #15283b;
  background: #fff;
  resize: vertical;
}

The focus outline is deliberately easy to see. Try navigating with Tab before adding more visual effects. A hover color helps mouse users, but it cannot replace keyboard focus.

3. Copy complete strings with JavaScript

The copy operation has two outcomes: announce success after it resolves, or offer selectable text when automatic copying fails.

const kaomojis = [
  { label: "Happy", text: "(＾▽＾)" },
  { label: "Crying", text: "(T_T)" },
  { label: "Shrug", text: "¯\\_(ツ)_/¯" },
  { label: "Hug", text: "(づ｡◕‿‿◕｡)づ" },
  { label: "Bear", text: "ʕ•ᴥ•ʔ" },
  { label: "Table flip", text: "(╯°□°）╯︵ ┻━┻" }
];

const faces = document.querySelector("#faces");
const status = document.querySelector("#copy-status");
const manual = document.querySelector("#manual-copy");
const copyText = document.querySelector("#copy-text");
let copying = false;

async function copyFace(face) {
  if (copying) return;
  copying = true;
  faces.setAttribute("aria-busy", "true");
  manual.hidden = true;
  status.textContent = `Copying: ${face.label}…`;

  try {
    if (!window.isSecureContext || !navigator.clipboard?.writeText) {
      throw new Error("Clipboard API unavailable");
    }
    await navigator.clipboard.writeText(face.text);
    status.textContent = `Copied: ${face.label}. Paste it wherever you like.`;
  } catch {
    copyText.value = face.text;
    manual.hidden = false;
    status.textContent = "Automatic copy is unavailable. Select the text below and copy it manually.";
    copyText.focus();
    copyText.select();
    copyText.setSelectionRange(0, copyText.value.length);
  } finally {
    copying = false;
    faces.removeAttribute("aria-busy");
  }
}

for (const face of kaomojis) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "face-button";
  button.setAttribute("aria-label", `Copy ${face.label} kaomoji`);

  const symbol = document.createElement("span");
  symbol.className = "face";
  symbol.setAttribute("aria-hidden", "true");
  symbol.textContent = face.text;

  const label = document.createElement("span");
  label.className = "face-label";
  label.textContent = face.label;

  button.append(symbol, label);
  button.addEventListener("click", () => copyFace(face));
  faces.append(button);
}

4. Customize the faces without breaking the strings

To customize the picker, choose a few expressions from this kaomoji collection and add them to your JavaScript array. Keep each face as one complete string so its characters stay together.

Keep each face as one string. In an ordinary JavaScript string literal, two backslashes represent one literal backslash.

const shrug = "¯\\_(ツ)_/¯";
console.log(shrug); // ¯\_(ツ)_/¯

Why does copying fail on some pages?

Reuse the copy button in your own projects

Assemble and test the complete demo

Save the file as kaomoji-picker-demo.html, serve it from your local development server, and open the page in your browser. Nothing needs compiling.

You now have a reusable copy-button pattern: store the original text, wait for the clipboard operation, give clear feedback, and offer a manual way forward when copying is blocked.

Online Photoshop Alternatives: An Image Workflow for Web Developers

codingdudecom — Mon, 28 Sep 2026 18:09:57 +0000

You have finished the feature. The README needs a screenshot, the landing page needs a hero image, and the launch announcement needs a preview card.

None of these jobs requires a complicated design process. But each needs more care than opening an image, adding text, and clicking Export.

When choosing online Photoshop alternatives, start with the asset you need to ship. The useful question is: can this editor take your source file through editing, export, and the next revision without creating extra work?

Here is a repeatable workflow for small web projects.

1. Define the asset before opening an editor

A documentation screenshot and a social preview card have different jobs.

The screenshot should explain an interface. The preview card should help someone recognize a project before opening a link. A hero image needs to fit the page at several screen sizes.

Write a short specification for each asset:

Asset: project launch card
Canvas: 1200 × 630 pixels
Content: project name, one benefit, one interface crop
Output: JPEG
Source: editable document with separate text and image layers
Check: readable at a small preview size

Those dimensions are an example for this project, not a universal requirement. Check the destination's current guidance before choosing your canvas.

Decide whether the image really needs text. On a website, a heading is often easier to maintain as HTML beside an image. That also lets it adapt to the layout without having to export another graphic.

2. Choose an editor around the source file

Start by identifying what you already have.

Starting point	What to check
Layered PSD template	Text remains editable; required masks and effects look right
Product screenshot	Cropping and resizing preserve readable interface details
Photograph	Adjustments and the final crop suit the intended layout
Blank canvas	Text, alignment, and reusable layout elements are easy to manage

For example, Photopea documents opening files, saving PSD documents, and exporting images. That makes it a candidate when you want to keep a layered working file while delivering a flattened image. Or if the Photoshop UI makes you uncomfortable, try a light-weight online photo editor like MockoFun.

Opening a template is only the first check. Change a headline, replace an image, save the working file, and reopen it. Look for missing fonts, changed line breaks, and effects that no longer match your intended design.

For a broader shortlist, our PSDDude guide to online photoshop alternatives compares browser-based editors. Use it to identify candidates, then choose using your own source file and export requirements.

Check any account requirements, plan restrictions, or watermarks before building the complete asset. Finding a limitation after finishing the design is an avoidable interruption.

3. Keep the working file separate from the delivery file

Treat image sources like other project sources: give them a clear home and keep the delivered output separate.

One possible structure is:

design/
  source/
    launch-card.psd
  notes/
    launch-card.md
public/
  images/
    launch-card.jpg

The PSD is the working document in this example. The JPEG is the asset the website serves. The note can record the font, image attribution, intended crop, and export dimensions.

Use another editable format if that suits your chosen editor. The important part is keeping something you can revise.

Decide separately whether large binary sources belong in Git, Git LFS, or shared design storage. Put only the intended public assets in your application's public directory.

4. Edit for the size readers will actually see

A design can look clear on a large canvas and become difficult to read in a small preview.

For the launch card, start with one screenshot crop, a short project name, and one supporting line. Keep them separate so you can adjust the composition without rebuilding everything.

Then inspect it at a reduced size:

Can you recognize the product?
Can you read the main words?
Does the crop show the feature you are announcing?
Is any important content too close to an edge?

If the screenshot contains tiny controls, crop to the relevant interaction rather than shrinking the entire application window. If the headline becomes unreadable, shorten it before adding more decoration.

Use dummy data in screenshots. Check for customer names, email addresses, private URLs, and anything else that should not appear in a public asset.

5. Inspect the exported file inside the application

Save the editable document, export the delivery image, and open the exported file itself.

Check its dimensions, text, crop, and background. If transparency is required, confirm that the chosen format and exported result preserve it.

Next, place the file in the actual page. An editor preview cannot tell you everything about your site's layout.

For example, this markup reserves space for an image whose exported dimensions are 1200 × 630:

<img
  src="/images/launch-card.jpg"
  width="1200"
  height="630"
  alt="Task board showing a new issue moved into the Done column"
  class="launch-card"
/>

.launch-card {
  display: block;
  width: 100%;
  height: auto;
}

Use dimensions that match your file and alternative text that suits the image's role. If an image is purely decorative, use an empty alt value instead.

MDN's image element reference explains these attributes, including how explicit dimensions help the browser reserve space before the image loads.

Check the page at narrow and wide widths. Also inspect the delivered file size: if it is unnecessarily large, try another export setting and compare the visual result.

6. Make the next update easy

Before closing the project, reopen the saved source and confirm that you can still change the headline and screenshot.

Keep a short record of where the asset is used. A launch card may appear in the repository, website metadata, documentation, and a social post. Those copies can drift apart when the product changes.

The next time you update the interface, you should be able to replace the screenshot, adjust the wording, and export again using the same specification.

Which part of your image workflow tends to cause the most rework: choosing a tool, keeping sources editable, or getting the final export right?

Disclosure: This article is shared by PSDDude and links to our own browser-editor comparison.

How to Draw a Spiral with JavaScript

codingdudecom — Sun, 26 Oct 2025 16:59:33 +0000

In this tutorial, we'll explore how to draw a spiral using JavaScript and the HTML5 <canvas> element. We'll break down the code and concepts, making it easy for beginners to follow along.

For those who want to jump right in and play with a finished product, check out this online spiral maker.

Setting up the Canvas

First, we need an HTML file with a <canvas> element. This is where our spiral will be drawn.

<!DOCTYPE html>
<html>
<head>
    <title>JS Spiral</title>
</head>
<body>
    <canvas id="spiral-canvas"></canvas>
    <script src="spiral.js"></script>
</body>
</html>

The JavaScript Logic

Now, let's dive into the JavaScript. The core idea is to draw a series of lines that rotate and expand from the center.

1. Getting the Canvas and Context

We start by getting a reference to our canvas and its 2D drawing context.

const canvas = document.getElementById('spiral-canvas');
const ctx = canvas.getContext('2d');

2. The Drawing Function

We'll create a function that takes parameters like sides, size, gap, and color.

function drawSpiral(sides, size, gap, color) {
    // Set canvas dimensions
    canvas.width = size;
    canvas.height = size;

    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Move to the center
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);

    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;

    let angle = 0;
    let currentGap = 0;

    for (let i = 0; i < 5000; i++) {
        if (sides > 1) {
            angle = (2 * Math.PI / sides) * Math.floor(i / (sides * 2));
        } else {
            angle += 0.1;
        }

        currentGap += gap / 100;

        const x = Math.cos(angle) * currentGap;
        const y = Math.sin(angle) * currentGap;

        ctx.lineTo(x, y);
    }

    ctx.stroke();
    ctx.restore();
}

Breaking Down `drawSpiral`

canvas.width = size; and canvas.height = size;: We set the canvas dimensions based on the desired size.
ctx.translate(...): This moves the drawing origin to the center of the canvas, so our spiral starts from the middle.
The Loop: The for loop is where the magic happens. In each iteration:
- We calculate the angle to determine the direction of the line. If sides are specified, it creates a polygonal spiral.
- We increment currentGap to make the spiral expand outwards.
- Math.cos(angle) and Math.sin(angle) are used to get the x and y coordinates on a circle.
- ctx.lineTo(x, y) draws a line to the new point.
ctx.stroke(): This actually draws the spiral on the canvas.

3. Drawing the Initial Spiral

To see our spiral, we need to call the drawSpiral function with some initial values.

drawSpiral(0, 400, 10, '#000000');

This will draw a simple, round spiral.

Interactivity (Optional)

The spiral maker example includes sliders to change the spiral's properties in real-time. This is done by adding event listeners to the input elements and redrawing the spiral whenever a value changes.

const sizeSlider = document.getElementById('size');
sizeSlider.addEventListener('input', () => {
    // Redraw the spiral with the new size
    drawSpiral(0, parseInt(sizeSlider.value), 10, '#000000');
});

Conclusion

And that's it! You've learned the basics of drawing a spiral with JavaScript. You can expand on this by adding more controls, colors, and even animations.

For a more advanced and feature-rich example, be sure to check out the Spiral Maker on my blog.

Happy coding!

...what's next?
Spiral Text Generator: If you want to write text on the spiral path, use this spiral text generator online free.

CSS Dotted Background

codingdudecom — Fri, 16 May 2025 17:39:22 +0000

READ ORIGINAL HERE: CSS Dotted Background

This tutorial breaks down how to create a CSS dotted pattern using SVG to achieve a halftone dotted CSS background. Halftoning is a reprographic technique that simulates continuous-tone imagery through the use of a dotted grid background, varying in size or spacing to generate a gradient-like effect. We’ll create this dot background CSS effect by combining gradients, patterns, and SVG filters to craft a stunning dots background CSS.

The Full SVG Code (for Reference)

Important: The main SVG element in the code above is styled to be hidden (style="position:absolute; top:-9999px; left:-9999px; opacity:0; pointer-events:none;"). This is because its sole purpose is to define the filter components (gradients, patterns, and the filter itself). The actual visual effect will be applied to a separate HTML element using CSS: filter: url(#blendAndThresholdFilter).

Creating a dotted CSS background is a common design requirement, ranging from simple repeating dots background CSS to more complex visual effects. For a basic dotted grid background, CSS offers straightforward solutions using background-image with radial-gradient and background-repeat. You can easily generate a uniform css dotted pattern this way, giving your elements a clean, geometric look. This approach is excellent for static, repeating dot background css where all dots are of the same size and spacing.

However, achieving a true halftone effect—where dot sizes vary to simulate a gradient or an image’s tonal values—presents a greater challenge with pure dotted CSS. While CSS has powerful gradient and masking capabilities, dynamically varying the size of individual dots in a grid based on an underlying intensity map (as true halftone requires) pushes the boundaries of what’s easily manageable with CSS alone. The complexity arises in making each “dot” in the background dots CSS individually responsive to a larger gradient or image pattern.

Let’s Break It Down: Step by Step

Step 1: The Radial Gradient – A Single Soft Dot

First, we define a <radialGradient>. This gradient will form the basis of each individual “dot” in our halftone pattern. It transitions from semi-transparent black (stop-opacity:0.5) at 5% from the center to fully transparent black (stop-opacity:0) at the edge (100% radius). This creates a soft-edged, circular spot.

<radialGradient id="radialBlackToTransparent" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
  <stop offset="5%" style="stop-color:black; stop-opacity:0.5" />
  <stop offset="100%" style="stop-color:black; stop-opacity:0" />
</radialGradient>

Visualizing the Circle Pattern:

Step 2: The Circle Pattern – A Grid of Soft Dots

Next, we use a element to repeat our radial gradient in a grid. The pattern tile is 20×20 units (width="20" height="20"). Inside this tile, we place a circle of radius 10 (r="10") at the center (cx="10" cy="10"), filling it with the radial gradient we just defined (fill="url(#radialBlackToTransparent)"). patternUnits="userSpaceOnUse" means the width and height are absolute coordinate values.

<pattern id="circlesPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
  <circle cx="10" cy="10" r="10" fill="url(#radialBlackToTransparent)" />
</pattern>

Visualizing the CSS Dotted Background Circle Pattern

Step 3: The Linear Gradient – The Intensity Mask

Now, we define a <linearGradient>. This gradient will control the overall intensity or density of the halftone dots across the image. It transitions vertically (x1="0%" y1="0%" x2="0%" y2="100%") from semi-transparent black (stop-opacity:0.5) at the top to fully transparent black (stop-opacity:0) at the bottom. This gradient will later be multiplied with our dot pattern. Where this gradient is darker, the dots will appear more prominent.

&lt;linearGradient id="linearBlackToTransparent" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
  &lt;stop offset="0%" style="stop-color:black; stop-opacity:0.5" /&gt;
  &lt;stop offset="100%" style="stop-color:black; stop-opacity:0" /&gt;
&lt;/linearGradient&gt;```



<h4 style="text-align: center;">Visualizing the Linear Gradient:</h4><p><img loading="lazy" decoding="async" class="aligncenter size-full wp-image-4762" src="https://www.coding-dude.com/wp/wp-content/uploads/2025/05/css-linear-gradient-pattern.png" alt="css linear gradient pattern" width="471" height="441" srcset="https://www.coding-dude.com/wp/wp-content/uploads/2025/05/css-linear-gradient-pattern.png 471w, https://www.coding-dude.com/wp/wp-content/uploads/2025/05/css-linear-gradient-pattern-300x281.png 300w" sizes="(max-width: 471px) 100vw, 471px"></p><div class="9db0862b9cf2e44f8d962262c5a80491" data-index="2" style="float: none; margin:10px 0 10px 0; text-align:center;"> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3421619882899259" data-ad-slot="9789071689" data-ad-format="auto"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script> </div><h3>Step 4: Blending the Pattern and Linear Gradient</h3><p>This is where SVG filters (<code>&lt;filter&gt;</code>) come into play. We need to combine our dot pattern and the linear gradient. Filters operate on image data. So, first, we need to “render” our pattern and linear gradient into image sources that the filter can use. We do this by creating hidden&nbsp; elements filled with them:</p>



```xml

&lt;rect id="circlesSourceLayer" width="100%" height="100%" fill="url(#circlesPattern)" /&gt;
&lt;rect id="overlaySourceLayer" width="100%" height="100%" fill="url(#linearBlackToTransparent)" /&gt;

Inside the <filter>:

<feImage xlink:href="#circlesSourceLayer" result="circlesInput" ... />: Loads the rendered circles pattern as an image input named “circlesInput”.
<feImage xlink:href="#overlaySourceLayer" result="overlayInput" ... />: Loads the rendered linear gradient as an image input named “overlayInput”.
<feBlend mode="multiply" in="circlesInput" in2="overlayInput" result="multiplied" />: This is the key step. It takes “circlesInput” and “overlayInput” and blends them using the multiply mode.
- The multiply blend mode multiplies the color channel values of the two inputs.
- Since both our inputs are shades of black (grayscale) and transparent, multiplying them will result in darker areas where both inputs are dark/opaque, and lighter/transparent areas where either input is light/transparent.
- Effectively, the linear gradient modulates the opacity of the dots. Dots will be more opaque (and thus appear stronger) where the linear gradient is darker (top), and fainter where the linear gradient is transparent (bottom).

```xml <filter id="blendAndThresholdFilter_Step4" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse"> <feImage xlink:href="#circlesSourceLayer" result="circlesInput" x="0" y="0" width="100%" height="100%"/> <feImage xlink:href="#overlaySourceLayer" result="overlayInput" x="0" y="0" width="100%" height="100%"/> <feBlend mode="multiply" in="circlesInput" in2="overlayInput" result="multiplied" /> </filter> ```

Visualizing the Multiply Blend:

(This shows the result of the multiply blend. Notice how the dots are stronger at the top.)

Step 5: The Threshold – Creating Hard Dots

The blended image from Step 4 still has soft, semi-transparent dots. To get the classic halftone look, we need to convert these soft dots into hard-edged, fully opaque (or fully transparent) dots. This is done using a threshold operation. We use to achieve this. The matrix provided:

values="
  1 0 0 0 0
  0 1 0 0 0
  0 0 1 0 0
  0 0 0 255 -128"

This matrix operates on the RGBA (Red, Green, Blue, Alpha) channels of each pixel from the “multiplied” result. Let’s look at the rows:

R’ = 1*R + 0*G + 0*B + 0*A + 0 (Red channel remains unchanged)
G’ = 0*R + 1*G + 0*B + 0*A + 0 (Green channel remains unchanged)
B’ = 0*R + 0*G + 1*B + 0*A + 0 (Blue channel remains unchanged)
A’ = 0*R + 0*G + 0*B + 255*A – 128 (Alpha channel is transformed)

The critical part is the alpha channel transformation: A_new = 255 * A_old - 128. (Note: A_old is typically normalized 0-1, so it’s actually more like `A_new_normalized = (255 * A_old_normalized – 128) / 255`). What this effectively does:

If a pixel’s original alpha (A_old) value (from the “multiplied” image) is greater than 0.5 (or 128 when scaled to 0-255 range), then 255*A_old - 128 will be a positive value, resulting in an opaque pixel (A_new will be clamped to 1, or 255).
If a pixel’s original alpha is less than or equal to 0.5, then 255*A_old - 128 will be zero or negative, resulting in a transparent pixel (A_new will be clamped to 0).

So, any pixel with an opacity greater than 50% becomes fully opaque black (since R,G,B were black), and any pixel with opacity 50% or less becomes fully transparent. This creates the hard-edged dots characteristic of halftone.

&lt;feColorMatrix type="matrix"
  values="
    1 0 0 0 0
    0 1 0 0 0
    0 0 1 0 0
    0 0 0 255 -128" 
  result="thresholded" /&gt;

The visual for this step is essentially the final result, as it’s the last operation in the filter chain.

For these more sophisticated halftone effects, developers often look beyond basic CSS or combine it with other technologies like SVG, as we’ve explored.

If you’re looking for ready-made solutions or tools to help, a halftone generator can be an excellent resource for quickly creating custom patterns.

Understanding the principles behind a halftone gradient is also crucial for a deeper appreciation of the effect, and for high-quality, scalable results, exploring vector halftone techniques is highly recommended.

These resources can complement your CSS efforts, especially when aiming for dynamic and detailed halftone dotted backgrounds. Alternatively, there are high quality premade halftone pattern Photoshop addons that you can download for free online.

Putting It All Together: The Filter Chain Diagram

Here’s a diagram showing how these elements combine within the SVG filter to create the CSS dotted background halftone effect:

The filterUnits="userSpaceOnUse" attribute on the element means that all coordinates and lengths within the filter are interpreted in the current user coordinate system (the coordinate system of the element the filter is applied to). The x="0" y="0" width="100%" height="100%" on the and elements define the region to which the filter effect applies and from which the images are sourced, relative to the target element’s bounding box.

If you take a close look at how the SVG filter is composed, you will notice that you can change the halftone dotted background effect by changing the linear gradient. Change the direction, add different stops or even switch to a radial gradient and you will get different halftone effects.

The Final Result

The defined SVG <filter> with id="blendAndThresholdFilter" can then be applied to any HTML element using the CSS filter property. For example, <div style="filter:url(#blendAndThresholdFilter);"></div>. The content of the div will be replaced by the output of the SVG filter.

In the provided code snippet at the top of the tutorial, the main <svg id="halftonePattern" ...> element is hidden. It only serves as a container for the <defs>. The actual effect is shown by applying the filter to the <div> below it:

<div style="width:100vw;height:100vh;filter:url(#blendAndThresholdFilter)"></div>

Live Demo of the Final Effect:

SVG Animation Example

codingdudecom — Sun, 27 Apr 2025 07:35:03 +0000

READ ORIGINAL POST: How to Animate SVG with CSS & JS

SVG Typography Animation

Let's bring your SVG images to life. In this tutorial, I'll show you how to animate them using CSS and JavaScript. We'll cover the basics of CSS animations, animating SVG elements, and even triggering them with scrolling or a simple click. Check out the demo above to see it in action - you can trigger the animation by scrolling, clicking, or hitting play for a continuous loop.

Create an SVG Image for the Animation

To get started with SVG animation, we need an SVG image. You can create one using Inkscape, Adobe Illustrator, or latest Photoshop versions. Here are your options:

Draw a vector image from scratch
Convert a photo or image to SVG (check out this tutorial on how to convert an image to vector using Photoshop)
Use a vector image generator

We'll use the free online text in shape generator from MockoFun. It's easy to create a cool typography SVG design.

Download the SVG version

We've got our SVG image, so let's move on to animating it!

Animating SVG with CSS

To animate an SVG with CSS, you need to use it as an inline SVG in your HTML page. This means copying the SVG definition from a text editor and pasting it into your HTML.

When you open the SVG, you'll see groups (<g/> tags) and paths (<path/> tags). We'll focus on the paths, as that's what we'll animate.

CSS for SVG works similarly to HTML, but with different properties. Check out this intro to CSS for SVG.

SVG Color Animation

We'll animate the colors of the two <path/> elements in our SVG: the background shape and the text inside the shape. We'll use CSS hsl() values, which make it easy to work with colors.

To change the colors, we'll only modify the hue, keeping the saturation and lightness the same. This will create a harmonious color scheme.

Here's the code:

const SATURATION = '100%';
const LIGHTNESS = '50%';

currentHue = (newHue % 360 + 360) % 360;
const shapeHue = (180 + currentHue)%360;
const dynamicColor = `hsl(${currentHue}, ${SATURATION}, ${LIGHTNESS})`;
const shapeColor = `hsl(${shapeHue}, ${SATURATION}, ${LIGHTNESS})`

svgTexts.forEach(el => {
  el.style.fill = dynamicColor;
});
svgShapes.forEach(el => {
  el.style.fill = shapeColor;
});

Triggering the Animation

We'll use three ways to trigger the animation:

PLAY/PAUSE button: Starts or pauses the color cycle.
Mouse hold: Changes the color while the mouse button is held down.
Mouse scroll wheel: Changes the color when scrolling.

Let's break it down:

PLAY/PAUSE button: Uses a timer to trigger a color change every 100ms.

document.getElementById("playPauseCheckbox").addEventListener('change', event => {
  // ...
});

Mouse hold: Uses setInterval() to change the color while the mouse button is held down.

function handleMouseDown(event){
  // ...
}
function handleMouseUp(event){
  // ...
}

Mouse scroll wheel: Changes the color when scrolling. We'll increment the hue by 15° each time we scroll down or decrease the hue when scrolling up.

window.addEventListener('wheel', handleWheel, { passive: true });
// ...
function handleWheel(event) {
  // ...
}

That's it! You now know how to create a SVG text in shape design and animate it with CSS and JS.

In Conclusion

So there it is: you now know how to create a SVG text in shape design and use CSS and JS to animate it. This is a pretty cool web design trick that you can easily integrate in your website. Drop me a comment if you have any questions.

Coding Tattoos

codingdudecom — Sat, 16 Nov 2024 11:27:24 +0000

As a programmer, I see tattoos as a way to express my passion for code. They're more than just art—they tell a story about who I am and what I love.

If you're like me, you've probably thought about getting a tattoo but weren't sure what design to choose. In this article, I'll share what I've learned about tattoo culture among developers and help you find inspiration for your own ink. Let's explore how coding tattoos can combine creativity and meaning to show off your love for programming.

As a hardcore programmer, I think the ultimate tattoo design for programmers would be a tattoo design made with AI. At the end of this article I will tell you about a free AI tattoo generator.

Why Developers Love Coding Tattoos

Developers use tattoos to express their passion for coding. Tattoos show their creativity, dedication, and connection to programming culture. Coding tattoos combine technical elements with artistic designs. These tattoos help developers display their skills and identity.

Coding tattoos also reflect the growing influence of technology in everyday life. Developers pick designs that symbolize their love for problem-solving and innovation. Tattoos for programmers often carry deep personal meaning.

Coding Tattoo Ideas

Many developers choose tech-inspired body art to celebrate their work and interests. Coding tattoos offer a unique way to blend personal expression with professional pride.

Binary code tattoos and syntax elements like curly braces, semicolons, or HTML tags show their connection to the fundamentals of programming. Some coders prefer algorithm tattoos, such as Fibonacci sequences or graph structures, which combine logic and beauty. Others honor their favorite programming languages with designs like Python logos, Ruby gems, or JavaScript symbols. These tattoos let developers express their love for tech and showcase the tools and ideas that define their work.

Let's see some ideas:

"Hello, World!"

A simple yet iconic representation of a programmer's first step in coding.
Example:

"Hello, World!"

Binary Code

A short phrase or word in binary, such as "Code" (e.g., 01000011 01101111 01100100 01100101).
The binary could be arranged in a line or shaped into a meaningful symbol like a heart or infinity loop.

Code Brackets

Minimalist brackets, such as:

{ } (curly brackets for code blocks).
< /> (HTML tags).
[ ] (array brackets).

"if (true)" Statement

Playfully include an unfinished condition, like:

if (true) { // keep coding; }

A symbolic reminder to stay passionate about programming.

Semicolon `;`

A simple semicolon representing the end of a statement in many programming languages.
It can also symbolize perseverance, often associated with the "semicolon movement."

"while ( ! (success ) ) ;"

A witty infinite loop symbolizing persistence and the journey to achieve success. Example:

while ( !(success) ) ;

You can style it with minimalist font or wrap it around your wrist or arm.

404 Error

A humorous nod to the infamous error message:

404: Not Found

You can place it subtly to suggest a "missing" feature, like on your ankle or wrist.

Null Pointer

A classic representation of uninitialized memory in programming:

NULL

Combine with a pointer symbol (->) for an extra nerdy twist.

Boolean Logic

A simple, clean design of true or false in plain text, or a combination like:

true && !false

Symbolic of truth and clarity.

Regex Pattern

A small, meaningful regex expression, such as:

/^code$/

This matches "code" exactly and looks sleek in a monospaced font.

Lambda Symbol

A nod to functional programming:

λ x . x + 1

This minimalist mathematical function form is perfect for anyone into functional programming or lambda calculus.

Use Online Tools to Create AI Tattoo Designs

You can use online tools to create unique tattoo designs with ease. The AI tattoo generator helps you turn text descriptions into stunning tattoo designs. This tool stands out as the best AI tattoo generator because it is online, free, and easy to use. You can describe your idea in words, and the generator will transform it into a design that matches your vision. Whether you want a minimalist code tattoo or an intricate tech-inspired pattern, this tool makes designing fast and fun for programmers.

Here's an example:

Try this AI Tattoo Prompt:

pixel-art simple small tattoo design icon with a programmer working on a computer, 2D flat illustration, black outlines . low-res, blocky, pixel art style, 8-bit graphics <>

Coding tattoos let you celebrate your love for programming in a creative way. From binary code and syntax symbols to algorithms and AI-inspired designs, the possibilities are endless.

Whether you already have a tattoo or are planning your first one, remember to choose a design that feels meaningful to you. Your tattoo is a permanent story—make it one that inspires you every day.

Scrolling Text Using HTML

codingdudecom — Thu, 12 Sep 2024 17:05:28 +0000

When you’ve been building web applications for over 25 years like I have, using HTML, CSS, and JavaScript becomes second nature. In this article, I’ll show you some simple ways to create scrolling text using these tools.

The post Scrolling Text Using HTML appeared first on Coding Dude.

I’ll show you 5 different methods for coding scrolling text with plain HTML, HTML & CSS and finally HTML + CSS + JS.

1. Plain HTML Scrolling Text

Simply add a tag around the text to create a scrolling effect. This tag offers a few interesting parameters among which:

direction — can be: left, right, up, or down
scrollamount - the speed of the scroll text
loop — how many times should the scrolling repeat

NOTE: The is a deprecated HTML tag, so I’d recommend restrain in using it for modern web projects.

2. Animated Scrolling Text with CSS

Define a CSS animation called scroll that animates the translateX property.



@keyframes scroll {
 0% { transform: translateX(100%); }
 100% { transform: translateX(-100%); }
}

Then apply that animation to your text element:



<div class="scrolling-text">Scrolling Text</div>

by adding this CSS:



.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: scroll 10s linear infinite;
}

Changing from translateX to translateY will give you a vertical scrolling text. Switching 0% and 100% around will give you the reverse scrolling text direction. And in the .scrolling-text CSS class if you change the 10s duration of the animation you change the speed of the scrolling text.

3. HTML + CSS + JavaScript Scrolling Text

HTML code:



<div class="scrolling-text">
Scrolling Text Scrolling Text Scrolling Text
</div>

CSS code:



.scrolling-text {
width: 30vw;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
font-size:clamp(16px,50dvh,220px);
white-space:nowrap;
margin: 0 auto;
}

JavaScript code:



const container = document.querySelector('.scrolling-text');
let scrollAmount = 0;

setInterval(() => {
 scrollAmount += 10;
 container.scrollLeft = scrollAmount;
 if (scrollAmount >= container.scrollWidth) {
  scrollAmount = 0;
 }
}, 20);

This is my most “unelegant” solution for making scrolling text. Basically it’s cramming a text in a container with scroll and changes the scrolling of the container programmatically. When the scroll amount goes over the container amount it resets.

4. Scroll Text with jQuery



$(document).ready(
 function loop() {
  $('.scrolling-text').css({scrollLeft:0});
  $('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);
 }
);

Use the animate() jQuery function to animate the scrollLeft property and this will create a scrolling text effect.

In my view jQuery is a bit of an overkill in this situation, and it only makes sense if you already use jQuery in your project.

Of course, animate() can also be used for animating the translateX or translateY properties as seen above.

5. Scrolling Text with Canvas HTML5

This is my favorite method. Especially because it’s so flexible and offers so many possibilities, like for example exporting the scrolling text as GIF or even video. You can see this in action by going the the Scrolling Text generator on PSDDude where you can create your own customized scrolling text images and videos.

The HTML code is straight forwards:



<canvas id="scrollingCanvas" width="300" height="50"></canvas>

and the JS is where the magic happens:



const canvas = document.getElementById('scrollingCanvas');
const ctx = canvas.getContext('2d');
const text = "Scrolling Text Example";
let x = canvas.width;

function draw() {
 ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
 ctx.font = '20px Arial';
 ctx.fillStyle = 'black';
 ctx.fillText(text, x, 30);
 x -= 2; // Adjust speed of scrolling here
 if (x < -ctx.measureText(text).width) {
  x = canvas.width; // Reset position when text is out of view
 }
 requestAnimationFrame(draw);
}

draw();

Using a loop with requestAnimationFrame() calling the function draw() is actually the way HTML5 games implement their graphics drawing. This is a cool way for creating smooth scrolling text.

You get the size on screen of the text using the measureText() context method. This allows creating a seamless scrolling text by resetting the text position when it reaches the end position.

Bonus: A Few Scrolling Text Ideas

LED Scrolling Text GIF:

Star Wars Opening Crawl Scrolling Text Generator:

Stock Market Scrolling Text:

Weather Scrolling Text:

These were created with the scrolling text gif and video generator on PSDDude.

In Conclusion

Now you know how to make scrolling text using HTML, CSS and/or JavaScript.

What will you use this for?

Drop me a comment to let me know. Also, if you feel I’ve missed an important method for creating scrolling text, give me your thoughts on that.

AI Character Generator

codingdudecom — Wed, 10 Apr 2024 05:45:49 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

I've build a RPG character AI generator. It generates a name, back story, description of powers and traits plus the image of the character that is consistent with the description.

The only input necessary is the the class of the character or its species.

Demo

Demo: RPG Character Generator

My Code

You can check out the code here:

codingdudecom / ai-character-generator

Easy-to-use AI character generator that can be integrated in any app. It's based on Cloudflare Workers AI

AI Character Generator

Easy-to-use AI character generator that can be integrated in any app. It's based on Cloudflare Workers AI.

The code generates a name, back story, description of powers and traits plus the image of the character that is consistent with the description The only input necessary is a string that contains a minimal description (eg. the the class of the character or its species).

Demo

Check out a live demo of how this works: AI Character Generator

How to install

First create a Wrangler project for making a Cloudflare Worker. Follow this guide, which in short means:

1. Create a NodeJS project from the Cloudflare Workers template:

npm create cloudflare@latest

Input a name for your project (eg. ai-character-generator) and check Yes for everthing except for deployment. We will do that later.

2. Go into the project folder created and find the `wrangler.toml` file. You need to activate

…

View on GitHub

Journey

The app is pretty straight forwards and generates the result in JSON format, so it's very easy to integrate it in any kind of app, website or event game.

Making the AI RPG Character Creator widget I combined web development, AI integration, and Cloudflare Workers for seamless serverless computing. The primary objective was to design an intuitive interface where users could generate unique RPG characters complete with names, backstories, power details, and visual representations.

One of the standout features of the widget is its ability to generate a cohesive character profile with a name, backstory, powers, and image in real-time. Achieving this level of dynamic content creation using AI was a great experience for me.

Leveraging Cloudflare Workers allows the widget to handle a large number of concurrent requests without compromising on overall website performance.

I also learned that using the Dreamshaper 8 LCM model for image generation, while good enough, it did not present high adherence to the prompt/description of the RPG character. Therefore, I've had to switch to SDXL Lightning that takes into account much more of the details in the character description, provides a higher resolution results (1024px rather than 512px) and has a much more detailed and vibrant style.

Potential further development

Enhanced Personalization: I aim to further refine the UI to provide more personalized and diverse character creations based on user preferences and inputs. Perhaps using more diverse AI character generator prompts would allow creating even more visual appealing characters.

Community Integration: Introducing features that allow users to share and showcase their generated characters within a community setting is on the horizon. This will foster engagement and creativity among users.

Multi-modal Interactions: Integrating voice and visual inputs to allow users to interact with the widget in more natural and immersive ways is another exciting avenue I plan to explore.

Multiple Models and/or Triple Task Types

I've decided to use two models: a llm and a text to image model. I believe that orchestration of AI inference for different models is a very powerful tool. In my opinion this way of working with AI models is far more flexible and more resource efficient than using multimodal AI models.

At its core it is using 2 Cloudflare Workers AI models:

LLM - The zephyr-7b-beta-awq is a good choice as lightweight and fast text generation model. I use it for creating the textual information for the RPG character.
Image Generation - The dreamshaper-8-lcm or stable-diffusion-xl-lightning are both good choices as lightweight and fast text generation models. They are text to image generators that are fast and appropriate for generating images (especially in the digital painting style). They are both a variations on the Stable Diffusion model, and LCM (Latent Consistency Model) is an optimization of the model which renders quality images with impressive speed. While the lightning version is also an accelerated model version of the SDXL mode. You can try with the other text to image models just by replacing the txt2img_model variable in the code.

Simple Face Swap Python Script (Free Download Available)

codingdudecom — Sun, 24 Mar 2024 08:35:30 +0000

Ever wanted to swap faces in images for fun or to create memes? This Python script makes it easy using OpenCV and dlib libraries. While there are more advanced methods available, like MockoFun’s online face swap app, this script offers a hands-on approach to understanding face swapping technology.

note: this image was made with MockoFun online face swap app, NOT with the script

SCRIPT DOWNLOAD LINK: Face Swap Python

Key Features:

Facial Landmark Detection: Utilizes a pre-trained model to identify key facial features.
Face Alignment & Warping: Aligns and overlays faces from two images for a seamless swap.
Color Correction: Adjusts colors to match the target image for a natural look.
Usage: Provide two image paths as command-line arguments to swap faces. The script is best with frontal, well-lit images4.

Ethical Considerations

Use responsibly and respect privacy and consent. You should always ask for the consent of the people whose images you want to use for face swapping or make sure they are used in a context that clearly indicates the nature of the modified images.

Further Exploration

For those interested in the technicalities, the script’s step-by-step breakdown and the science behind face swapping are detailed on the page.

For more advanced techniques, I recommend this article. It goes more in-depth explaining how AI face swap and deepswap works, the architecture of the neural networks and the principles for training it.

As for the applications of the face swap script, one cool app is the Face Swap for Photoshop action available for free on Gumroad.

Drop me a comment if you have any questions or remarks. You can also find me here:

Twitter: @codingdudecom
Github: https://github.com/codingdudecom/

CSS Rainbow Text Effect To Spice Up Your Web Design

codingdudecom — Fri, 03 Nov 2023 12:00:16 +0000

ORIGINAL ARTICLE: CSS Rainbow Text

Imagine making your website or project look super cool with colorful text that looks like a rainbow. Learning how to do this using CSS (a fancy code for making things look good on the web) can be a fun and useful skill.

In this article, I'll show you different ways to make this CSS rainbow text, and I'll even make it move around with cool animations. I'll give you the secret code (HTML and CSS) to make it happen, and you can try it out on CodePen. So, get ready to learn and make your web stuff look awesome with rainbow text!

So, here are 5 methods for creating a rainbow text effect:

Method 1 - Rainbow Text with CSS Linear Gradient

Alternatively, we can make the rainbow without the gradient transitions and display the rainbow as stripes.

Here’s the code and result of that:

Method 2 - Rainbow Text In CSS Using Text Shadows

I’m using the CSS variable --shadow-space to offset each rainbow text color by a configurable amount. This method will come in handy below where I will show you how to create a CSS rainbow text animation.

text-shadow can be used for multiple text effects. A while back I’ve shown how to create a text outline using it.

Method 3 - Rainbow Text Using CSS & Rainbow Texture

This is probably the most commonly used method for making a rainbow text in CSS. Simply using an image or texture as the background image for a text and using the exact same method as for the CSS rainbow gradient text.

This method is less flexible and it requires the rainbow texture image. Of course you can learn how to make a rainbow in Photoshop or make one from scratch in MockoFun. But, it might be simpler to just download this free rainbow pattern or this free rainbow gradient texture from Textures4Photoshop.

Method 4 - Use an Online Tool For Creating Rainbow Text

The fastest and most convenient method to add a rainbow text effect in your HTML is by using a simple graphic design app like MockoFun. This app offers premade template, and as it happens it has an easy to use and 100% free rainbow text generator.

You open it, input your text and download the end result as an image (JPG, WebP, PNG, etc). These images are perfectly fine to use in your HTML webpage instead of the making a pure CSS rainbow text.

And now, some CSS animated rainbow text effects:

Animated Rainbow Gradient Text CSS

CSS Animated Rainbow Text Shadow

In Conclusion
So, now you know several methods how to make a HTML rainbow text with CSS. There are so many uses for a rainbow color text in web pages especially because the rainbow is a symbol for many things.

You can follow me

My blog: coding-dude.com
Twitter: @codingdudecom

CSS Comic Book Style Speech Bubble

codingdudecom — Thu, 05 Oct 2023 05:08:58 +0000

Speech Bubble CSS

Creating speech bubbles with CSS is a simple job, but I made it simpler with this gist. Find the HTML & CSS code for it below.
For more explanations on how it works check out my extended CSS Speech Bubbles post on my CodingDude blog.

inspired by Comic Strip Template by PSDDude

Speech Bubble HTML Code:



<div class="speech-bubble">CSS IS AWESOME!!! 💥 DON'T YOU THINK?</div>

Speech Bubble CSS Code:



.speech-bubble{
  --arrow-w:0.5em;
  --arrow-h:1em;
  --bubble-corners:0;
  --w:12em;
  --border-size:3px;
  --text-color:black;
  --bubble-color:white;
  --border-color:black;
}
.speech-bubble{
  text-align:center;
  font-family:cursive;
  font-size:20px;
  font-weight:bold;
  color:var(--text-color);
  background:var(--bubble-color);
  padding:1em;
  position:relative;
  border-radius:var(--bubble-corners);
  max-width:var(--w);
  box-shadow:0 0 0 var(--border-size) var(--border-color);
}

.speech-bubble.round{
  --bubble-corners:1em;
}

.speech-bubble.circle{
  --bubble-corners:100%;
  padding:2em;
}

.speech-bubble:before,.speech-bubble:after{
  content:"";
  position:absolute;
  bottom:calc(-1 * var(--arrow-h) * 2 + 0.5px);
  left:50%;
  border-style:solid;
  border-width:var(--arrow-h) var(--arrow-w);
  border-color:var(--bubble-color) transparent transparent;
}

.speech-bubble:before{
  border-width:calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
  border-color:var(--border-color) transparent transparent;
  bottom:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
  left:calc(50% - var(--border-size));
}

.speech-bubble.t:after{
  border-color:transparent transparent var(--bubble-color);
  bottom:auto;
  top:calc(-1 * var(--arrow-h) * 2 + 0.5px);
}

.speech-bubble.t:before{
  border-width:calc(var(--arrow-h) + var(--border-size)) calc(var(--arrow-w) + var(--border-size));
  border-color:transparent transparent var(--border-color);
  bottom:auto;
  top:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
}

.speech-bubble.l:after{
  border-color:transparent var(--bubble-color) transparent transparent;
  bottom:auto;
  border-width:var(--arrow-w) var(--arrow-h);
  top:calc(50% - var(--arrow-w));
  left:calc(-1 * var(--arrow-h) * 2 + 0.5px);
}

.speech-bubble.l:before{
  border-width:calc(var(--arrow-w) + var(--border-size)) calc(var(--arrow-h) + var(--border-size));
  border-color:transparent var(--border-color) transparent transparent;
  bottom:auto;  
  top:calc(50% - var(--arrow-w) - var(--border-size));
  left:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
}

.speech-bubble.r:after{
  border-color:transparent transparent transparent var(--bubble-color);
  bottom:auto;
  left:auto;
  border-width:var(--arrow-w) var(--arrow-h);
  top:calc(50% - var(--arrow-w));
  right:calc(-1 * var(--arrow-h) * 2 + 0.5px);
}

.speech-bubble.r:before{
  border-width:calc(var(--arrow-w) + var(--border-size)) calc(var(--arrow-h) + var(--border-size));
  border-color:transparent transparent transparent var(--border-color);
  bottom:auto;
  left:auto;
  top:calc(50% - var(--arrow-w) - var(--border-size));
  right:calc(-1 * var(--arrow-h) * 2 - 2.5*var(--border-size)); 
}

.speech-bubble.pop{
  animation-name: pop;
  animation-duration: 0.5s;
  animation-timing-function:cubic-bezier(0.755, 0.050, 0.855, 0.060);
}

.speech-bubble.float{
  animation-name: float-up;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function:ease;
}

.speech-bubble.r.float{
  animation-name: float-left;
}

.speech-bubble.l.float{
  animation-name: float-right;
}

.speech-bubble.t.float{
  animation-name: float-down;
}

@keyframes pop {
  0% {transform: scale(0.8);}
  80% {transform: scale(1.1);}
  90% {transform: scale(0.9);}
  100% {transform: scale(1);}
}

@keyframes float-up {
  0% {transform: translateY(0);}
  50% {transform: translateY(calc(-1 * var(--arrow-h)));}
}

@keyframes float-left {
  0% {transform: translateX(0);}
  50% {transform: translateX(calc(-1 * var(--arrow-h)));}
}

@keyframes float-right {
  0% {transform: translateX(0);}
  50% {transform: translateX(var(--arrow-h));}
}

@keyframes float-down {
  0% {transform: translateY(0);}
  50% {transform: translateY(var(--arrow-h));}
}

Speech Bubble CSS Classes & Customization

Customize the Speech Bubble Design with Provided CSS Classes
Use the following CSS classes together with the base .speech-bubble class:

t, l, r or b for placing the arrow top, left, right or bottom (by default the speech bubble arrow points downwards)
round or circle for bubble shape (by default the dialog box has square corners); TIP: Circle works best for dialog bubbles, because in old comic books and newspaper doodle drawings, that’s how they were drawn.
pop or float for animation (by default the text bubble is static)

Additional Customization via CSS Variables

--arrow-w: This variable sets the width of the arrow of the speech bubble to 0.5em.
--arrow-h: This variable sets the height of the arrow of the speech bubble to 1em.
--bubble-corners: This variable determines the roundness of the bubble’s corners. A value of 0 indicates sharp corners (so a square text bubble) while something like 50% would make a circle or elliptical talking bubble.
--w: This variable sets the maximum width of the speech bubble, which is 12em in this case.
--border-size: It defines the size or thickness of the border around the speech bubble, which is set to 3px.
--text-color: This variable sets the color of the text inside the speech bubble to black.
--bubble-color: It determines the background color of the speech bubble itself, which is set to white.
--border-color: This variable determines the color of the border around the speech bubble, also set to black.

Codepen Demo

You can follow me

My blog: coding-dude.com
Twitter: @codingdudecom

DEV Community: codingdudecom

JavaScript Copy to Clipboard: Build a Kaomoji Picker

JavaScript copy to clipboard: the smallest working example

1. Add the HTML structure

2. Style a responsive picker with CSS

3. Copy complete strings with JavaScript

4. Customize the faces without breaking the strings

Why does copying fail on some pages?

Reuse the copy button in your own projects

Assemble and test the complete demo

JavaScript Copy to Clipboard: Build a Kaomoji Picker

JavaScript copy to clipboard: the smallest working example

1. Add the HTML structure

2. Style a responsive picker with CSS

3. Copy complete strings with JavaScript

4. Customize the faces without breaking the strings

Why does copying fail on some pages?

Reuse the copy button in your own projects

Assemble and test the complete demo

Online Photoshop Alternatives: An Image Workflow for Web Developers

1. Define the asset before opening an editor

2. Choose an editor around the source file

3. Keep the working file separate from the delivery file

4. Edit for the size readers will actually see

5. Inspect the exported file inside the application

6. Make the next update easy

How to Draw a Spiral with JavaScript

Setting up the Canvas

The JavaScript Logic

1. Getting the Canvas and Context

2. The Drawing Function

Breaking Down drawSpiral

3. Drawing the Initial Spiral

Interactivity (Optional)

Conclusion

CSS Dotted Background

The Full SVG Code (for Reference)

Let’s Break It Down: Step by Step

Step 1: The Radial Gradient – A Single Soft Dot

Step 2: The Circle Pattern – A Grid of Soft Dots

Step 3: The Linear Gradient – The Intensity Mask

Visualizing the Multiply Blend:

Step 5: The Threshold – Creating Hard Dots

Putting It All Together: The Filter Chain Diagram

The Final Result

Live Demo of the Final Effect:

SVG Animation Example

SVG Typography Animation

Create an SVG Image for the Animation

Animating SVG with CSS

SVG Color Animation

Triggering the Animation

In Conclusion

Coding Tattoos

Why Developers Love Coding Tattoos

Coding Tattoo Ideas

"Hello, World!"

Binary Code

Code Brackets

"if (true)" Statement

Semicolon ;

"while ( ! (success ) ) ;"

404 Error

Null Pointer

Boolean Logic

Regex Pattern

Lambda Symbol

Use Online Tools to Create AI Tattoo Designs

Scrolling Text Using HTML

1. Plain HTML Scrolling Text

2. Animated Scrolling Text with CSS

3. HTML + CSS + JavaScript Scrolling Text

4. Scroll Text with jQuery

5. Scrolling Text with Canvas HTML5

Bonus: A Few Scrolling Text Ideas

In Conclusion

AI Character Generator

What I Built

Demo

My Code

Breaking Down `drawSpiral`

Semicolon `;`

2. Go into the project folder created and find the `wrangler.toml` file. You need to activate