Snowfall

index.html

<svg class="svg-snowscene" xmlns="http://www.w3.org/2000/svg">
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
  <circle class="snow" />
</svg>

script.js

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

(function letItSnow(){
  var snowflakes = document.querySelectorAll('.snow');
  for (var i = 0; i < snowflakes.length; i++) {
    var snowflake = snowflakes[i];
    snowflake.setAttribute('cx', getRandom(1,100) + '%');
    snowflake.setAttribute('cy', '-' + getRandom(1,100));
    snowflake.setAttribute('r', getRandom(1,3));
  }
})();

Snowfall.markdown

Snowfall

Just trying to create a snowfall effect using SVG and CSS animations. JavaScript is used to simply randomize the location of the snowflakes. Full warning: works in Chrome, Safari, Firefox and later versions of Opera. Internet Explorer (up to and including 11) doesn't seem to like it.

A Pen by Chip Cullen on CodePen.

License.

style.css

html {
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background: hsl(190,70%,30%); 
  background: -moz-linear-gradient(top, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(top, #f0f9ff 0%, hsl(190,70%,60%) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%); /* IE10+ */
  background: linear-gradient(to bottom, hsl(190,70%,30%) 0%, hsl(190,70%,60%) 100%);
}
.svg-snowscene {
  width: 100%;
}
.snow {
  fill: #fff; 
  animation-name: snowing;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  &:nth-child(2n){
    animation-delay: 1.5s;
  }
  &:nth-child(3n){
    animation-delay: 2.3s;
    animation-duration: 3.3s;
  }
  &:nth-child(4n){
    animation-delay: 0.8s;
    animation-duration: 3.2s;
  }
  &:nth-child(5n){
    animation-delay: 2.8s;
  }
}

@keyframes snowing {
  0%{ fill-opacity: 1; }
  100% { 
    fill-opacity: 0;
    transform: translateY(200px);
  }
}