DEV Community: codingdudecom

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

Designing a Customizable Street Sign Using HTML and CSS

codingdudecom — Wed, 06 Sep 2023 08:55:59 +0000

ORIGINAL ARTICLE: Customizable Street Sign

Street signs are an essential part of urban landscapes, guiding us through cities and neighborhoods. But have you ever wanted to create your own unique street sign for a special occasion or just for fun? In this tutorial, we’ll show you how to design a stylish street sign using HTML and CSS, and even customize it by changing its color. This tutorial is inspired by the free online template Street Sign Maker available on MockoFun, an online graphic design application that makes creative design easy.

Getting Started with HTML

Let’s start with the HTML structure for our street sign. We’ll keep it simple and use a <div> element with the class “street-sign”. Here’s the HTML code:

    <div class="street-sign">MOCKOFUN</div>

In this example, we’ve used the text “MOCKOFUN” for our street sign, but you can replace it with any text of your choice.

Styling with CSS

Now, let’s dive into the CSS code that will make our street sign visually appealing and customizable. We’ll use CSS variables to make it easy to change the sign’s color. Here’s the CSS code:

:root {
  --green: #145203;
  --blue: #0561ad;
  --yellow:#FDDA16;
  --white:#FFFFFF;

  --superscript: "ST";
}

.street-sign {
  --sign-color: var(--green);
  margin: 40vh auto;
  white-space: nowrap;
  font-size: min(15vh, 60px);
  background-color: var(--sign-color);
  width: min-content;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  padding: 0.25em 0.25em 0.25em 0.5em;
  border-radius: 0.25em;
  box-shadow: 0 0 0 0.1em white, 0 0 0 calc(0.1em + 1px) var(--sign-color), 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.25);
}

.street-sign::after {
  content: var(--superscript);
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 0.5em;
}

.street-sign.inverted{
  color:black;
  box-shadow:0 0 0 0.1em black, 0 0 0 calc(0.1em + 1px) var(--sign-color), 0.2em 0.2em 0.1em rgba(0,0,0,0.25);
}

Let’s break down the key components of this CSS code:

CSS Variables: We define color variables, --green , --blue, --yellow and --white which can be customized to change the sign’s color. Additionally, we define a --superscript variable for the superscript text (e.g., “ST”).
.street-sign Class: This class styles our street sign. Here are some important style details:
- --sign-color: This variable determines the background color of the sign. By default, it’s set to --green, but you can easily change it to --blue or any other color you prefer.
- margin, white-space, and font-size properties control the sign’s positioning and text size.
- background-color sets the background color based on the --sign-color variable.
- color defines the text color as white.
- font-family and font-weight determine the font used and its weight.
- padding, border-radius, and box-shadow add stylistic details to the sign.
.street-sign::after Pseudo-element: This pseudo-element allows us to add a superscript (e.g., “ST”) to the sign. You can change the --superscript variable to display different superscript text like “ROAD”, “RD”, “W”, “AVE”, “BLVD”, etc.
.street-sign.inverted Class: is a CSS class that you can add for the yellow and white signs. These street signs will have a black text color and black border.

Here’s a quick explanation about the code for the street sign border. In this case I’ve used CSS shadows, but if you read my CSS Stroke Definitive Guide you’ll see there are many other ways to achieve this.

css .box-shadow: 0 0 0 0.1em white, 0 0 0 calc(0.1em + 1px) var(--sign-color), 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.25);

In this line of CSS code, you’re applying multiple box shadows to the .street-sign class to achieve a stylish border effect around the sign. Let’s break down each part of this box shadow:

First Shadow: 0 0 0 0.1em white this is the white border of the street sign.
- 0 for the horizontal offset: This means there is no horizontal offset, so the shadow appears directly behind the element.
- 0 for the vertical offset: Similarly, there’s no vertical offset, so the shadow is right behind the element.
- 0 for the blur radius: The blur radius is set to zero, which means the shadow has a sharp edge.
- 0.1em for the spread radius: The spread radius creates a border-like effect by expanding the shadow by a small distance of 0.1em.
- white for the shadow color: This part of the shadow is white, which creates the appearance of an inner border.
Second Shadow: 0 0 0 calc(0.1em + 1px) var(--sign-color) this is the outside edge of the street sign which is the same color as the street sign itself.
- 0 for the horizontal and vertical offset: No horizontal or vertical offset is applied.
- 0 for the blur radius: There’s no blur effect.
- calc(0.1em + 1px) for the spread radius: This dynamically calculates the spread radius to be slightly larger than the previous shadow, creating an outer border effect.
- var(--sign-color) for the shadow color: This part of the shadow takes on the color defined by the --sign-color variable, allowing you to customize the border color.
Third Shadow: 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.25) this is an extra effect creating a diffuse drop shadow effect for the entire street sign.
- 0.2em for the horizontal offset: A slight horizontal offset of 0.2em gives the appearance of a shadow to the right and below the sign.
- 0.2em for the vertical offset: Similarly, a vertical offset of 0.2em creates a shadow to the right and below the sign.
- 0.1em for the blur radius: This adds a subtle blur effect to the shadow.
- rgba(0, 0, 0, 0.25) for the shadow color: The shadow is semi-transparent and dark, which creates a shadowed effect to give depth to the sign.

In summary, by combining these multiple box shadows, you create a visually appealing border effect for the street sign. The first shadow is an inner border, the second shadow is an outer border, and the third shadow provides a subtle drop shadow effect, resulting in a polished and stylish appearance for the sign.

Customizing the Street Sign’s Color

To customize the sign’s color, simply change the value of the --sign-color variable in the :root section of your CSS. For example, to make the sign blue, update it like this:

:root {
  --green: #145203;
  --blue: #0561ad;

  --superscript: "ST";
}
.street-sign{
  --sign-color: var(--blue); /\* Change to blue \*/
...

You can experiment with different color values to create a street sign that matches your preferences or the theme of your project. For some light colors you might need to use the .inverted CSS class in order to have a black text and border.

Try it on CodePen!

Want to see and experiment with this street sign project in action? You can find the code on CodePen. Feel free to customize it, change the text, or explore different color options right in your browser. Have fun designing your own street signs!

Conclusion

Creating a stylish and customizable street sign using HTML and CSS is a fun way to add a personal touch to your web projects. This tutorial, inspired by MockoFun’s street sign template, provides a solid foundation to get you started. Whether you want to design a playful sign for an event or add a unique element to your website, have fun designing your own street signs!

Simple CSS Threshold Filter

codingdudecom — Mon, 14 Aug 2023 13:32:22 +0000

Original article on Coding-Dude.com: CSS Threshold Filter

There are many applications that have a threshold tool including Photoshop, GIMP, etc. There are even free online applications that allow you to apply a threshold filter to an image online. For example the stencil maker from MockoFun is a cool example of a free online application. It basically applies the threshold filter to any photo and transforms it into a stencil like the famous Bansky street art designs.

Stencil Maker on MockoFun

CSS Threshold Filter - The Code

So, the HTML code is just a simple image:

<img src="https://i.imgur.com/r4csVkj.jpeg" alt="CSS Stencil Filter" class="threshold">

we've added the CSS class name threshold which is where we will place our CSS threshold filter code:

`:root{
--threshold:50%;
}

.threshold{
filter: brightness(calc(100% + var(--threshold))) grayscale(100%) contrast(1000%);
}`

So, let’s take a look at this code and explain a bit what’s going on.

`:root{ --threshold:50%; }`

This line sets a CSS variable named --threshold in the root of the document, which acts as a threshold value for the filter. In this case, the threshold value is set to 50%, indicating that pixels with grayscale values below 50% will turn black, and those above 50% will turn white.

This variable is optional, as you could simply put in the value in the .threshold class CSS code, but it’s a convenient way of separating the value for the threshold. This is especially useful if you want to make the threshold dynamic, as I’ve done in my code. Changing the threshold is as easy as changing this CSS variable.

`.threshold{ ... }`

This CSS class selector targets elements with the class name “threshold” and applies a series of filter effects to them. The effects combine to create the threshold filter.

Let’s break it down:

brightness(calc(100% + var(--threshold))): Here, the brightness filter is used to adjust the overall brightness of the image. The calc() function combines the original brightness (100%) with the custom threshold value stored in the --threshold variable. This effectively brightens the pixels that are above the threshold value.
grayscale(100%): The grayscale filter is applied at maximum intensity (100%), converting the image to grayscale.
contrast(1000%): The contrast filter is used to enhance the contrast between black and white pixels by increasing the contrast level to 1000% – a large enough value to produce only black and white pixels, which is what we need for our threshold filter.

In Conclusion

In web design, the CSS Threshold Filter is a very versatile tool for sophisticated photo effects. Using this simple filter you can achieve some really cool effects that will make your designs stand out.

As we conclude this journey, remember that CSS filters are a gateway to limitless creativity. Experimentation is your compass, leading you to explore beyond thresholds. Why not venture into applying vintage photo filters using CSS or merging various filters for breathtaking effects? The canvas is yours to paint, and the possibilities are boundless. Embrace innovation, and let the CSS Threshold Filter be the stepping stone to your design masterpiece. Unleash the power of code to transform the ordinary into the extraordinary, and watch your web designs come alive like never before.

Follow me on DEV: @codingdudecom
Follow me on Twitter/X: @codingdudecom

Gradient Text CSS

codingdudecom — Sun, 02 Apr 2023 05:57:17 +0000

.gradient-text {
   background-image: linear-gradient(to right, #833ab4, #fd1d1d,#fcb045);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

In the above example, we apply the linear-gradient() function to the background-image property, and then set the background-clip property to text and the text-fill-color property to transparent. This tells the browser to apply the gradient to the text itself, and make the text color transparent so that the gradient shows through.

You can actually create gradient text in HTML in several other ways.

Check out the full article about gradient text

DEV Community: codingdudecom

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

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

Demo

How to install

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

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

Journey

Simple Face Swap Python Script (Free Download Available)

Ethical Considerations

Further Exploration

CSS Rainbow Text Effect To Spice Up Your Web Design

Method 1 - Rainbow Text with CSS Linear Gradient

Method 2 - Rainbow Text In CSS Using Text Shadows

Method 3 - Rainbow Text Using CSS & Rainbow Texture

Method 4 - Use an Online Tool For Creating Rainbow Text

Animated Rainbow Gradient Text CSS

CSS Animated Rainbow Text Shadow

You can follow me

CSS Comic Book Style Speech Bubble

Speech Bubble CSS

Speech Bubble HTML Code:

Speech Bubble CSS Code:

Speech Bubble CSS Classes & Customization

Additional Customization via CSS Variables

Breaking Down `drawSpiral`

Semicolon `;`

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

`:root{ --threshold:50%; }`

`.threshold{ ... }`