Weather Icons

Weather Icons is a set of 19 vectorial animated icons, generated with JavaScript and HTML5 canvas.

* Press over the icons to play/stop them.

Many of the icons have a day and night version and animations effects.

How to use:

<canvas id="icon1" width="128" height="128"></canvas>
<canvas id="icon2" width="128" height="128"></canvas>
<div id="icon3" width="128" height="128"></div>


// You can add a canvas by it's ID...
var icon1 = WeatherIcon.add('icon1', WeatherIcon.SUN, { mode:WeatherIcon.NIGHT, stroke:true, shadow:true, animated:true } );

// ...or by the canvas DOM element itself.
var canvas = document.getElementById('icon2');
var icon2 = skycons.add(canvas, Skycons.RAIN);

// ...or add a canvas element in another HTML node.
var div = document.getElementById('icon3');
var icon3 = skycons.add(div, Skycons.CLOUD);

// The icons name are compatible with the YR API,
// you can also supply the weather icon

// start animation for the second icon;

// you can also stop or toggle the animation
// with the methods stop() and toggle()


// To change the icon use the method change(ico,mode)
// ico: Icond id, for example WeatherIcon.SUN
// mode: WeatherIcon.DAY or WeatherIcon.NIGHT (optional)

icon1.change( WeatherIcon.PARTLYCLOUD );

// To remove one icon use the method remove()



WeatherIcons are based on "plain weather icons" by MerlinTheRed.

The source code is available on Github, and has been released into the public domain.

WeatherIcons is released as "Creative Commons - Attribution - ShareAlike 3.0".

This means you can use them on your own derived works, in part or completely, as long as you also adopt the same license.

You can find the complete text of the license here.