<canvas id="icon1" width="150" height="75"></canvas>
<canvas id="icon2" width="150" height="75"></canvas>
<canvas id="icon3" width="150" height="75"></canvas>
<canvas id="icon4" width="150" height="75"></canvas>
<canvas id="icon5" width="150" height="75"></canvas>
<canvas id="icon6" width="150" height="75"></canvas>
<canvas id="icon7" width="150" height="75"></canvas>
<canvas id="icon8" width="150" height="75"></canvas>
<canvas id="icon9" width="150" height="75"></canvas>
<canvas id="icon10" width="150" height="75"></canvas>
<script src="https://rawgit.com/darkskyapp/skycons/master/skycons.js"></script>
document.addEventListener("DOMContentLoaded", event => {
  let skycons1 = new Skycons({"color": "#3da4ab"});
  let skycons2 = new Skycons({"color": "#3EB890"});
  let skycons3 = new Skycons({"color": "#E8A723"});
  let skycons4 = new Skycons({"color": "#472A49"});
  let skycons5 = new Skycons({"color": "#65863A"});
  let skycons6 = new Skycons({"color": "#CC2027"});
  let skycons7 = new Skycons({"color": "#56B68B"});
  let skycons8 = new Skycons({"color": "#00AB6B"});
  let skycons9 = new Skycons({"color": "#146EB4"});
  let skycons10 = new Skycons({"color": "#E50914"});
  
  skycons1.add("icon1", Skycons.CLEAR_DAY);
  skycons2.add("icon2", Skycons.CLEAR_NIGHT);
  skycons3.add("icon3", Skycons.RAIN);
  skycons4.add("icon4", Skycons.SNOW);
  skycons5.add("icon5", Skycons.WIND);
  skycons6.add("icon6", Skycons.SLEET);
  skycons7.add("icon7", Skycons.FOG);
  skycons8.add("icon8", Skycons.CLOUDY);
  skycons9.add("icon9", Skycons.PARTLY_CLOUDY_DAY);
  skycons10.add("icon10", Skycons.PARTLY_CLOUDY_NIGHT);
  
  skycons1.play();
  skycons2.play();
  skycons3.play();
  skycons4.play();
  skycons5.play();
  skycons6.play();
  skycons7.play();
  skycons8.play();
  skycons9.play();
  skycons10.play();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.