smoke.js
i made a simple smoke library in javascript.
you can download it from github and use it to make a customizable smoke effect on any website as simply as including the following:

<script src="url/for/smoke.js"></script>
<script>
new Smoke();
</script>

here's what it looks like:

by default it will appear in the center of the page or the center of a specified html element.
you can make it appear in a particular position within an html element with code like this:

<script>
new Smoke({
  parent: document.querySelector('.some-element-class-name'),
  x: 100,
  y: 100
});
</script>

you can change the size and number of sprites (the circles that make up the smoke).
the default sprite radious is 50 pixels and the default number of sprites is 16.

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  spriteCount: 30,
  spriteRadious: 25,
});
</script>

you can also adjust the color.
the simplest way to do so is by specifying the foreground property as an array of integers [RED, GREEN, BLUE]. each integer should be between 0 and 255 and will determine how much red green or blue to add to the color. for example, to make green smoke:

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  foreground: [0, 255, 0]
});
</script>

you can also get more complicated.
the sprites are drawn using a css radial-gradient. the foreground property determines the color at the center of each sprite and as we go from the center outwards to the circumference the color will fade first to the midground color then to the background color. by default the midground and background properties will simply be the same as the foreground but with a lower alpha value (aka opacity). we can specify opacity as a fourth element of each array that is between 0 and 1 (default 1 for foreground, 0.6 for midground, 0 for background). you could for example make each sprite green in the center, red in a ring around then and then finally yellow (and we'll increase the opacity of the background so that we can see it):

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  foreground: [0, 255, 0],
  midground: [255, 0, 0],
  background: [255, 255, 0, 0.3]
});
</script>

you can also more simply modify the overall opacity of the smoke:

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  foreground: [0, 255, 0],
  opacity: 0.4
});
</script>

you can make the smoke move at a different speed. by default there is a 200 milisecond delay between animation frames.

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  foreground: [0, 144, 255],
  animationMiliseconds: 1000
});
</script>

you can even customize the way that the smoke moves and fades.
you do this by defining the functions that determine how each sprite's x and y coordinates, radious, and opacity changes each frame.
below for reference are the relevant options with their default functions.
smoke.random takes a minimum value and a maximum value and returns a random number in between the two.

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  deltaRadious: (smoke) => {
    return - smoke.options.spriteRadious / smoke.options.spriteCount;
  },
  deltaY: (smoke, sprite) => {
    return (sprite.y - smoke.y > 5) ? -10 : smoke.random(-25, 10);
  },
  deltaX: (smoke, sprite) => {
    return smoke.random(-20, 15);
  },
  deltaOpacity: (smoke) => {
    return - 1 / smoke.options.spriteCount;
  }
});
</script>

you could also change things up as follows:
have the radious decrease half as slowly so they stay bigger longer
have each sprite rise at a constant rate of 10 pixels per frame
have each sprite move to the right a random number of pixels between 0 and 10
keep the opacity at 1 for each sprite until it disappears

<script src="url/for/smoke.js"></script>
<script>
new Smoke({
  deltaRadious: (smoke) => {
    return - 0.5 * smoke.options.spriteRadious / smoke.options.spriteCount;
  },
  deltaY: () => {
    return -10;
  },
  deltaX: (smoke, sprite) => {
    return smoke.random(0, 10);
  },
  deltaOpacity: (smoke) => {
    return 0;
  }
});
</script>

back