magical/flakes.png

## flakes.png

      
    Raw
  

              flakes.png
            
          
## flakes.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              flakes.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<body bgcolor="#808080">
    <script src="snow.js"></script>
</body>

## snow.css
/* Based on https://c.eev.ee/PARTYMODE/ */
/* Snowflake images from https://www.misha.studio/snowflaker/ */
.snow--container {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.snow--flake {
    position: absolute;
    top: 0;
    left: 0;
    animation-name: snow--flake1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    background-image: url(flakes.png);
    width: 54px;
    height: 54px;
    background-size: 425px auto;
    background-position: -26.5625px -26.5625px;
    background-repeat: no-repeat;
}

@keyframes snow--flake1 {
    from {
        transform: translate(-10vw, -20vh) rotate(0deg);
    }
    to {
        transform: translate(10vw, 120vh) rotate(180deg);
    }
}

/* ~ugh~ */
.snow--flake {
    -webkit-animation-name: snow--flake1;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes snow--flake1 {
    from {
        -webkit-transform: translate(-10vw, -20vh) rotate(0deg);
    }
    to {
        -webkit-transform: translate(10vw, 120vh) rotate(180deg);
    }
}

## snow.js
/* Based on https://c.eev.ee/PARTYMODE/ */
/* Snowflake images from https://www.misha.studio/snowflaker/ */
(function() {
    // Number of kilopixels dedicated to each snowflake
    var FLAKE_SPARSITY = 15;
    var FLAKE_POP = 35;

    // Get the path to ourselves
    var cur = document.currentScript;
    var path;
    if (cur) {
        path = cur.src;
    }
    else {
        var scripts = document.getElementsByTagName('script');
        path = scripts[scripts.length - 1].src;
    }
    var lastslash = path.lastIndexOf('/');
    if (lastslash >= 0)
        path = path.substring(0, lastslash + 1);

    // Inject CSS we need
    var css = document.createElement('link');
    css.type = 'text/css';
    css.rel = 'stylesheet';
    css.href = path + 'snow.css';
    document.head.appendChild(css);

    // Create the container and fill it with some elements
    var container = document.createElement('div');
    container.className = 'snow--container';

    var num_flakes = (
        document.documentElement.clientWidth
        * document.documentElement.clientHeight
        / FLAKE_SPARSITY
        / 1000
    );
    for (var i = 0; i < num_flakes; i++) {
        var flake = document.createElement('div');
        flake.className = 'snow--flake';
        //flake.className += ' snow--flake' + Math.floor(Math.random() * FLAKE_POP);
        // Randomize a bit
        flake.style.animationDelay = "-" + String(Math.random() * 4) + "s";
        flake.style.animationDuration = String(Math.random() * 3 + 4) + "s";
        flake.style.left = String(Math.random() * 120 - 10) + "%";
        // Set flake position
        var flakeno = Math.floor(Math.random() * FLAKE_POP);
        flake.style.backgroundPositionX = -(26.5625 + 53.125*(flakeno%7)) + 'px';
        flake.style.backgroundPositionY = -(26.5625 + 53.125*Math.floor(flakeno/7)) + 'px';

        container.appendChild(flake);
    }

    // And done!  No actual iavascript required to keep it running.
    document.documentElement.appendChild(container);
})();
	<!doctype html>
	<body bgcolor="#808080">
	<script src="snow.js"></script>
	</body>
	/* Based on https://c.eev.ee/PARTYMODE/ */
	/* Snowflake images from https://www.misha.studio/snowflaker/ */
	.snow--container {
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;

	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	}

	.snow--flake {
	position: absolute;
	top: 0;
	left: 0;
	animation-name: snow--flake1;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	background-image: url(flakes.png);
	width: 54px;
	height: 54px;
	background-size: 425px auto;
	background-position: -26.5625px -26.5625px;
	background-repeat: no-repeat;
	}

	@keyframes snow--flake1 {
	from {
	transform: translate(-10vw, -20vh) rotate(0deg);
	}
	to {
	transform: translate(10vw, 120vh) rotate(180deg);
	}
	}

	/* ~ugh~ */
	.snow--flake {
	-webkit-animation-name: snow--flake1;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in;
	}
	@-webkit-keyframes snow--flake1 {
	from {
	-webkit-transform: translate(-10vw, -20vh) rotate(0deg);
	}
	to {
	-webkit-transform: translate(10vw, 120vh) rotate(180deg);
	}
	}
	/* Based on https://c.eev.ee/PARTYMODE/ */
	/* Snowflake images from https://www.misha.studio/snowflaker/ */
	(function() {
	// Number of kilopixels dedicated to each snowflake
	var FLAKE_SPARSITY = 15;
	var FLAKE_POP = 35;

	// Get the path to ourselves
	var cur = document.currentScript;
	var path;
	if (cur) {
	path = cur.src;
	}
	else {
	var scripts = document.getElementsByTagName('script');
	path = scripts[scripts.length - 1].src;
	}
	var lastslash = path.lastIndexOf('/');
	if (lastslash >= 0)
	path = path.substring(0, lastslash + 1);

	// Inject CSS we need
	var css = document.createElement('link');
	css.type = 'text/css';
	css.rel = 'stylesheet';
	css.href = path + 'snow.css';
	document.head.appendChild(css);

	// Create the container and fill it with some elements
	var container = document.createElement('div');
	container.className = 'snow--container';

	var num_flakes = (
	document.documentElement.clientWidth
	* document.documentElement.clientHeight
	/ FLAKE_SPARSITY
	/ 1000
	);
	for (var i = 0; i < num_flakes; i++) {
	var flake = document.createElement('div');
	flake.className = 'snow--flake';
	//flake.className += ' snow--flake' + Math.floor(Math.random() * FLAKE_POP);
	// Randomize a bit
	flake.style.animationDelay = "-" + String(Math.random() * 4) + "s";
	flake.style.animationDuration = String(Math.random() * 3 + 4) + "s";
	flake.style.left = String(Math.random() * 120 - 10) + "%";
	// Set flake position
	var flakeno = Math.floor(Math.random() * FLAKE_POP);
	flake.style.backgroundPositionX = -(26.5625 + 53.125*(flakeno%7)) + 'px';
	flake.style.backgroundPositionY = -(26.5625 + 53.125*Math.floor(flakeno/7)) + 'px';

	container.appendChild(flake);
	}

	// And done! No actual iavascript required to keep it running.
	document.documentElement.appendChild(container);
	})();