Karl-the-fog NPM

karl-the-fog

Creates a "stylized fog" using an HTML5 canvas.

About

I follow Dribbble pretty religiously and I have seen a quite a few different types of "stylized fog" in designers' work. Examples: here, here, here, and there. To me, it looks really freakin' awesome and I thought that it would fit in well with the theme of "Pacifica" for my personal website.

alt demo

Setup

Save karl-the-fog like any other npm dependency
```
npm i -S karl-the-fog
```

Import the KarlTheFog class

ES6
```
import KarlTheFog from 'karl-the-fog';
```

ES5

var KarlTheFog = require('karl-the-fog').default;

Script

<script src="karl-the-fog/dist/web.js"></script>

How to Use

There's not much to using it. You just need to pass an options object to the KarlTheFog class.

const options = {
  canvas: document.getElementById('fog'),
  style: {
    color: '#fff',
    scaleY: 35,
    scaleX: 50,
    width: 700,
  },
  steps: 100,
  animate: true,
  resize: true,
  timingFunction: 'cubicInOut',
};
new KarlTheFog(options);