DEV Community: leimapapa

Wait, no. THIS is how to make an SVG fire effect

leimapapa — Tue, 01 Jul 2025 23:40:15 +0000

I wrote an article explaining how to achieve a fire effect and it got somewhat… complex.

Any time that you have to have some advanced knowledge of an SVG path’s d attribute to make an effect, you’re in baaad territory. That is to say, tedious, boring territory.

(shapes + turbulence + displacement) = (headache + despair + violent rage)

However, fear not! I, your SVG fire Sherpa am here at last with a way to avoid all that.

In the last article, I explained that applying a turbulence filter, animating a group containing the shape you want to be on fire up, while you animate the shape itself down creates a pretty solid fire effect.

This is fine and perfectly easy for shapes like circles where you animate the cy up by 5000 and the y offset of the group down by 5000 using .

However, it gets super silly once anything more complex like , , or god forbid, s get involved.

In the case of s, you have to animate the d attribute itself, which requires all of the points to be relative to one another and not absolute (e.g. M0 0 h 100and not M 0 0 H 100) which requires converting the path itself using an external tool. Barf.

All this trouble stems from the fact that having 2 components offset one another and the shape does not appear to move at all.

So what we need is to animate the y position of a containing element down, and then use the on the group containing that element to animate it up.

So why not just have 2 group components, animate the y of one group up and the group inside use down?

Good question. You’re so smart. The fact of the matter is that the element does not have a y attribute attached to it representing its y position in the svg... All is lost!

It’s never been more over than it is right now

Well not so fast Doomer McDoomerton, there certainly has to be another element that has a y attribute that we can put our set-me-on-fire path (or groups of paths) inside of so we don’t have to animate their paths.

Enter ! Our savior!

we are so back!

The element lets you define a piece of SVG content once , and then reuse it multiple times elsewhere in your SVG document using the element. And guess what attribute the has…

Ding ding ding! That’s correct, it has a y attribute. Therefore, any thing we want to include inside of a can be animated using the following format:

<use href="mySymbol">
  <animate attributeName="y" 
    values="0; 5000" 
    dur="100s" begin="0s" 
    repeatCount="indefinite" additive="sum" />
</use>

Then, with a simple offset in the opposite direction, the fire effect is complete:

<g filter="url(#fireTurbulence)">
  <use href="mySymbol">
    <animate attributeName="y" 
      values="0; 5000" 
      dur="100s" begin="0s" 
      repeatCount="indefinite" additive="sum" />
  </use>
  <animateTransform attributeName="transform" 
    attributeType="XML" type="translate" 
    values="0 0; 0 -5000" 
    dur="100s" begin="0s" 
    repeatCount="indefinite" additive="sum" />
</g>

And now the symbol itself can include any number of erstwhile impossibly-complex shapes to which we want to add a fire effect. Like so:

<symbol id="star" viewBox="0 0 100 100">
  <polygon 
    points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35"
    fill="gold" stroke="black" />
</symbol>

giving us finally:

<symbol id="star" viewBox="0 0 100 100">
  <polygon 
    points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35"
    fill="gold" stroke="black" />
</symbol>
<g filter="url(#fireTurbulence)">
  <use href="mySymbol">
    <animate attributeName="y" 
      values="0; 5000" 
      dur="100s" begin="0s" 
      repeatCount="indefinite" additive="sum" />
  </use>
  <animateTransform attributeName="transform" 
    attributeType="XML" type="translate" 
    values="0 0; 0 -5000" 
    dur="100s" begin="0s" 
    repeatCount="indefinite" additive="sum" />
</g>

Which, when we apply our fire turbulence filter (and a cool fire gradient instead of just gold fill), gives us something like this:

Star Fire!

One quick note on the fire filter. When turbulence and displacement are applied, it will shift the shape to which you apply your filter down and to the right by ~25–33% of the displacement scale. There’s complex math involved in how the randomness of the turbulence is generated, but I won’t get into it here.

For now, here is the turbulence filter used for my fire effect:

<filter id="fireTurbulence" x="-100%" y="-100%" width="300%" height="300%">
  <feTurbulence type="turbulence" seed="69"
    baseFrequency="0.05" numOctaves="2.5" 
    result="turbulence"/>
  <feDisplacementMap 
    in="SourceGraphic" in2="turbulence" 
    scale="30" 
    result="displacement" />
  <!-- feOffset counteracts the scale of the displacement map -->
  <!-- this will re-center the shape to which it is applied -->
  <feOffset in="displacement" 
    dx="-10" dy="-10" 
    result="offset" />
</filter>

Aaaaand here’s the full code for our fiery star. Nestled safe inside of the to which the fire filter is applied:

<svg viewBox="0 0 100 100">
 <defs>
  <filter id="fireTurbulence" x="-100%" y="-100%" width="300%" height="300%">
   <feTurbulence type="turbulence" seed="69" baseFrequency="0.05" numOctaves="2.5" result="turbulence" />
   <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" result="displacement" />
   <feOffset in="displacement" dx="-10" dy="-10" result="offset" />
  </filter>
  <radialGradient id="fireGrad" cx="50%" cy="80%" fx="50%">
   <stop offset="0%" stop-color="#aaf" />
   <stop offset="20%" stop-color="#fff" />
   <stop offset="60%" stop-color="gold" />
   <stop offset="100%" stop-color="darkorange" />
  </radialGradient>
  <symbol id="star" viewBox="0 0 100 100">
   <polygon points="50,0 61,35 98,35 68,57 79,91 50,70 21,91 32,57 2,35 39,35" fill="url(#fireGrad)" />
  </symbol>
 </defs>
 <g filter="url(#fireTurbulence)">
  <use href="#star">
   <animate attributeName="y" values="0; 5000" dur="100s" begin="0s" repeatCount="indefinite" additive="sum" />
  </use>
  <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 -5000" dur="100s" begin="0s" repeatCount="indefinite" additive="sum" />
 </g>
</svg>

This opens up all sorts of possibilities beyond just fire. You could, for example, generate turbulence against lines so that they look like electricity:

Or you could scale the values way back and apply them in the x direction to create a waving flag effect:

The world is your fiery oyster.

Now go forth armed with this knowledge and set the world on fire! Metaphorically of course…

Legally: “in Minecraft”

Rocket SVG Cursor

leimapapa — Wed, 21 May 2025 21:43:39 +0000

SVG implementation of a cool cursor canvas widget, edited to be a rocket

Let’s Make Fire from an SVG

leimapapa — Wed, 21 May 2025 19:43:11 +0000

The “sale” refers to our savings on file size

Let’s make a realistic fire effect from an SVG!

Impossible you say? How dare you. You and I don’t even know each other and you’re coming at me all hostile like that? Super rude of you.

It’s okay, I’m okay.

Anyways, here’s the effect we’re going for:

Fiya!

Now I know what you’re thinking, that’s impossibly complex and learning how to make it probably causes brain cancer or something.

Wrong again bucko.

This specific fire effect is as simple as applying a turbulence effect to a shape and animating the shape downward while animating the surrounding area up at the same speed.

In fact, here’s the entire code for the fire above:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <!-- turbulence filter -->
  <filter id="turb" x="-100%" y="-100%" width="300%" height="300%">
   <feTurbulence type="turbulence" baseFrequency="0.06" numOctaves="2.5" result="turbulence" seed="69" />
   <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="35" />
  </filter>
  <!-- fire gradient -->
  <radialGradient id="grad" cx="50%" cy="100%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="20%" stop-color="gold" />
      <stop offset="60%" stop-color="gold" />
      <stop offset="100%" stop-color="red" />
 </radialGradient>
 </defs>
 <g>
  <!-- triangle shape with turbulence applied -->
  <path d="M70 200 h60 l-30 -90z" filter="url(#turb)" fill="url(#grad)">
   <!-- triangle shape moving down -->
   <animate attributeName="d" values="M70 200 h60 l-30 -90z; M70 7200 h60 l-30 -90z" dur="100s" begin="0s" repeatCount="indefinite" />
  </path>
  <!-- group container moving up -->
  <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 -7000" dur="100s" begin="0s" repeatCount="indefinite" />
 </g>
</svg>

Dead simple, right? Now you can probably figure out what’s going on from here, but allow me to explain it piece by piece for the SVG nerds among us.

SVG nerds assemble!

First off, the turbulence filter:

<!-- turbulence filter -->
  <filter id="turb" x="-100%" y="-100%" width="300%" height="300%">
   <feTurbulence type="turbulence" baseFrequency="0.06" numOctaves="2.5" result="turbulence" seed="69" />
   <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="35" />
  </filter>

This is where we set the waviness of the fire effect. I massaged the turbulence numbers to make it appear more fire-y, but you could mess with the baseFrequency, numOctaves, and displacement scale to see different styles.

Next, the color gradient of the fire:

<!-- fire gradient -->
  <radialGradient id="grad" cx="50%" cy="100%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="20%" stop-color="gold" />
      <stop offset="60%" stop-color="gold" />
      <stop offset="100%" stop-color="red" />
 </radialGradient>

I used a radial gradient because it seemed to mimic a fire a little better than a linear gradient.

I also added a little bit of blue at the bottom, but some might argue it looks better without it. Not me though, I like the blue.

#backtheblue

Now the most complex part, the path animation:

<!-- group to animate downward -->
<g>
  <!-- triangle shape with turbulence applied and the gradient fill -->
  <path d="M70 200 h60 l-30 -90z" filter="url(#turb)" fill="url(#grad)">
   <!-- triangle shape moving down by animating its path value -->
   <animate attributeName="d" values="M70 200 h60 l-30 -90z; M70 7200 h60 l-30 -90z" dur="100s" begin="0s" repeatCount="indefinite" />
  </path>

The path has a default value of M70 200 h60 l-30 -90z.

Broken down, this path starts at M70 200 (x position 70 and y position 200).

It then goes horizontally relative to its starting position by 60 with h60 (lowercase h is relative).

Lastly, it goes back left by 30 and up by 90 ( l-30 -90 ) before closing with a z.

Here’s the original path (just a simple triangle)

Now the animation part. The animation we apply to its d attribute will make use of the relative movements and therefore we only need to animate to a different starting position.

In my example, I chose 7000 units down. This is because I wanted mine not to visibly repeat itself anytime soon, so I have my repeat value set to repeat at 100 seconds.

And for the fire to appear to whip in a fire-y way, 7000 seemed right. A smaller number (over the course of the 100 seconds animation duration) would make the fire appear to whip faster.

We’re basically just animating the starting point from M70 200 to M70 7200 and leaving everything else the same:

<!-- triangle shape moving down by animating its path value -->
<animate attributeName="d" 
values="
M70 200 h60 l-30 -90z; 
M70 7200 h60 l-30 -90z" 
dur="100s" 
begin="0s" 
repeatCount="indefinite" />

Then, inside the surrounding group ( component) we add a animateTransform to keep the fire inside of the viewBox (so the triangle doesn’t just run away off the screen).

<g>
  <!-- triangle shape moving down -->
  <path ...><animate .../></path>
  <!-- group container moving up -->
  <animateTransform attributeName="transform" 
    attributeType="XML" 
    type="translate" 
    values="0 0; 0 -7000" 
    dur="100s" 
    begin="0s" 
    repeatCount="indefinite" />
 </g>

This one is a simple transform in the opposite direction by the same amount (7000) and over the same amount of time (100 seconds).

Now, I know what you’re thinking yet again. Can’t you just animate the with it’s own < animateTransform> instead of having to deal with all that complicated path nonsense? Something like this?:

<g>
  <!-- triangle shape moving down -->
  <path ...>
    <animateTransform attributeName="transform" 
    attributeType="XML" 
    type="translate" 
    values="0 0; 0 7000" 
    dur="100s" 
    begin="0s" 
    repeatCount="indefinite" />
  </path>
  <!-- group container moving up -->
  <animateTransform attributeName="transform" 
    attributeType="XML" 
    type="translate" 
    values="0 0; 0 -7000" 
    dur="100s" 
    begin="0s" 
    repeatCount="indefinite" />
 </g>

That is an excellent question. Here’s the answer:

no. already tried it, just no.

If you do it that way, the turbulence filter doesn’t change as the two < animateTransform> s cancel each other out and the turbulence of the fire appears fixed and not like an animated fire. Which was kinda the whole goal…

But here’s the good news, it doesn’t have to be a path triangle where you have to worry about the relative paths and animating between them. You can also use the y attribute of a component or the cy attribute of a or :

<!-- ellipse example -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <!-- same as before -->
 </defs>
 <g>
  <!-- ellipse shape with turbulence applied -->
  <ellipse cx="100" cy="100" rx="33" ry="50" filter="url(#turb)" fill="url(#grad)">
   <animate attributeName="cy" values="100; 7100" dur="100s" begin="0s" repeatCount="indefinite" />
  </ellipse>
  <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 0 -7000" dur="100s" begin="0s" repeatCount="indefinite" />
 </g>
</svg>

Which gives us this:

Huzzah for simplicity!

and again I say huzzah!

Here is the SVG fire effect in a CodePen to play around with:

And that’s pretty much it. A computationally cheap and small file size SVG fire… so… um… yeah… See ya.

Let’s Make a Bouncing DVD Loading Screen with only SVG

leimapapa — Thu, 22 Sep 2022 22:57:13 +0000

Let’s make stuff with SVG shaaaall we. But no! you say. SVG is weird and complicated. Well, true, but it’s basically a superpower once we start to understand all the things it can do.

bouncy trouncy pouncy flouncy, fun fun fun fun fun!

First off, let’s go grab an SVG version of a DVD logo to animate through. Wikipedia has our back with this bad boy: https://commons.wikimedia.org/wiki/File:DVD_logo.svg, but there’s some weirdness…

When we inspect (right-click > Inspect) on the logo itself, we see it’s comprised of 2 elements with a bunch of scary-looking numbers and whatnot. So let’s copy the big ol’ values of the d property for both of these path elements into this handy SVG path editor tool and see what it looks like.

Now we can mess around with how it looks if we want. I went ahead and scaled it down and rounded it to 1 decimal to make it look a little better inside my 1000 x 1000 viewBox: viewBox="0 0 1000 1000".

I like simple base 10 viewBoxes. Don’t judge me!

Here’s the combined path d value I ended up using:

M 91.2 12.7 C 91.2 12.7 80.2 26.3 80.8 27.1 C 81.6 26.3 76.8 12.5 76.8 12.5 S 75.8 9.7 72.8 0.1 H 13.8 L 11.8 8.9 H 30.8 C 40.8 8.9 46.8 13.1 45.2 20.3 C 43.4 28.3 34.8 31.7 25.4 31.7 H 22 L 26.4 12.3 H 11 L 4.4 40.5 H 26.4 C 42.8 40.5 58.6 31.7 61.4 20.3 C 61.8 18.3 61.8 12.9 60.6 9.9 C 60.4 9.5 60.2 8.9 60.6 8.9 C 60.8 8.9 61 9.1 61 9.1 L 75.2 49.9 L 110.8 8.9 H 129.4 C 139.4 8.9 145.4 13.1 143.8 20.3 C 142 28.3 133.2 31.7 124 31.7 H 120.4 L 124.8 12.5 H 109.4 L 102.8 40.7 H 124.8 C 141.2 40.7 157 31.9 159.6 20.5 C 162.2 9.1 150.8 0.3 134 0.3 H 101.2 C 92.8 10.7 91.2 12.7 91.2 12.7 L 91.2 12.7 Z M 75.6 50.3 C 33.8 50.3 0 55.3 0 61.3 C 0 67.3 33.8 72.3 75.6 72.3 C 117.4 72.3 151.2 67.5 151.2 61.3 C 151.2 55.3 117.4 50.3 75.6 50.3 Z M 72.8 65.1 C 63.2 65.1 55.6 63.5 55.6 61.5 C 55.6 59.5 63.2 57.9 72.8 57.9 C 82.4 57.9 90 59.5 90 61.5 C 90 63.5 82.4 65.1 72.8 65.1 Z

Now we need to make use of an SVG trick where we can animate the x and y position of an inner SVG inside of an outer one based on percentages.

<svg class="outerSVG" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 1000 1000">
 <rect id="tvBackground" height="100%" width="100%" fill="#222" rx="10" />
 <svg id="innerSVG" height="100%" width="100%" fill="#0ff">
  <path id="dvdLogo" fill="inherit" d="MY-SCALED-DOWN-PATH" />
  <!-- animation elements-->
  .........

This will animate the inner SVG relative to the outer one. Then we stagger the timing of the x and y animations so the inner SVG hits one edge first:

<animate attributeName="x" dur="9" values="0%;84%;0%" repeatCount="indefinite" />
<animate attributeName="y" dur="10" values="0%;92%;0%" repeatCount="indefinite" />

I dialed in the above edge values so that there’s no overflow. So for the y value, instead of animating the DVD logo from 0% to 100% and then back to 0%, we animate from 0% > 92% > 0% so that the logo doesn’t briefly disappear off the bottom of the SVG when it reaches the bottom edge.

Change color on bounce

On to the color changing. We could always use JavaScript, but let’s not do that! We’re gonna keep everything nice and compact inside of 1 SVG file.

To achieve this, we’re gonna need to get a little (more) hackey. Since the bouncing happens whenever we hit the edge of the X or Y axis, we can time a color change animation to the repeatEvent of the x and y animations.

But this will only change the color 2 times; when we hit the top and the left. So we need to add 2 empty animation events that are timed to the middle of the initial x and y animations. These will trigger 2 additional color changes linked to their repeatEvents so that the color changes when we hit each wall.

<!-- empty animations for triggering color changes -->
<animate id="xx" begin="-4.5s" repeatCount="indefinite" dur="9s" />
<animate id="yy" begin="-5s" repeatCount="indefinite" dur="10s" />

All of the animations together will look like this:

<animate id="xAnim" attributeName="x" dur="9" values="84%;0%;84%" repeatCount="indefinite" />
  <animate id="yAnim" attributeName="y" dur="10" values="0%;92%;0%" repeatCount="indefinite" />
  <animate attributeName="fill" values="#ff0" begin="xAnim.repeatEvent" repeatCount="indefinite" dur="0s" />
  <animate attributeName="fill" values="#0ff" begin="yAnim.repeatEvent" repeatCount="indefinite" dur="0s" />
  <animate attributeName="fill" values="#00f" begin="xx.repeatEvent" repeatCount="indefinite" dur="0s" />
  <animate attributeName="fill" values="#0f0" begin="yy.repeatEvent" repeatCount="indefinite" dur="0s" />
  <!-- empty animations for triggering color changes -->
  <animate id="xx" begin="-4.5s" repeatCount="indefinite" dur="9s" />
  <animate id="yy" begin="-5s" repeatCount="indefinite" dur="10s" />

So our final SVG will look something like this:

<svg class="svg" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)" viewBox="0 0 1000 1000">
 <rect height="100%" width="100%" fill="#222" rx="10" />
 <svg id="dvd" height="100%" width="100%" fill="#0ff">
  <path fill="inherit" d="M 91.2 12.7 C 91.2 12.7 80.2 26.3 80.8 27.1 C 81.6 26.3 76.8 12.5 76.8 12.5 S 75.8 9.7 72.8 0.1 H 13.8 L 11.8 8.9 H 30.8 C 40.8 8.9 46.8 13.1 45.2 20.3 C 43.4 28.3 34.8 31.7 25.4 31.7 H 22 L 26.4 12.3 H 11 L 4.4 40.5 H 26.4 C 42.8 40.5 58.6 31.7 61.4 20.3 C 61.8 18.3 61.8 12.9 60.6 9.9 C 60.4 9.5 60.2 8.9 60.6 8.9 C 60.8 8.9 61 9.1 61 9.1 L 75.2 49.9 L 110.8 8.9 H 129.4 C 139.4 8.9 145.4 13.1 143.8 20.3 C 142 28.3 133.2 31.7 124 31.7 H 120.4 L 124.8 12.5 H 109.4 L 102.8 40.7 H 124.8 C 141.2 40.7 157 31.9 159.6 20.5 C 162.2 9.1 150.8 0.3 134 0.3 H 101.2 C 92.8 10.7 91.2 12.7 91.2 12.7 L 91.2 12.7 Z M 75.6 50.3 C 33.8 50.3 0 55.3 0 61.3 C 0 67.3 33.8 72.3 75.6 72.3 C 117.4 72.3 151.2 67.5 151.2 61.3 C 151.2 55.3 117.4 50.3 75.6 50.3 Z M 72.8 65.1 C 63.2 65.1 55.6 63.5 55.6 61.5 C 55.6 59.5 63.2 57.9 72.8 57.9 C 82.4 57.9 90 59.5 90 61.5 C 90 63.5 82.4 65.1 72.8 65.1 Z" />
  <animate id="xAnim" attributeName="x" dur="9" values="0%;84%;0%" repeatCount="indefinite" />
  <animate id="yAnim" attributeName="y" dur="10" values="0%;92%;0%" repeatCount="indefinite" />
  <animate attributeName="fill" values="#ff0" begin="xAnim.repeatEvent" repeatCount="indefinite" dur="0s" />
  <animate attributeName="fill" values="#0ff" begin="yAnim.repeatEvent" repeatCount="indefinite" dur="0s" />
  <animate attributeName="fill" values="#00f" begin="xx.repeatEvent" repeatCount="indefinite" dur="0s" />
  <animate attributeName="fill" values="#0f0" begin="yy.repeatEvent" repeatCount="indefinite" dur="0s" />
<!-- empty animations for triggering color changes -->
  <animate id="xx" begin="-4.5s" repeatCount="indefinite" dur="9s" />
  <animate id="yy" begin="-5s" repeatCount="indefinite" dur="10s" />
 </svg>
</svg>

Here’s a working example on CodePen.

So that’s it. A bouncing DVD menu with just SVG and no external libraries or nothin’. Pretty neat, huh?

The Turin Horse - Hadi

leimapapa — Wed, 15 Jun 2022 16:57:54 +0000

SVG implementation of Hadi's super cool Dribbble shot: https://dribbble.com/shots/18288950-The-Turin-Horse