Lesson 10c - Finally looks like actual Rain

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <rain></rain>

    <script type="text/javascript" src="https://cdn.rawgit.com/riot/riot/master/riot+compiler.min.js"></script>
    <script type="riot/tag" src="./rain.html"></script>

    <script type="text/javascript">
      riot.mount('*')
    </script>

  </body>
</html>

<rain>
	<div class="rain align_center">
		<div each={droplet in droplets} 
			style="animation-duration: {(Math.random()*2)+0.5}s; top: -{random(20) | 0}%; left: {random(100) | 0}%"
			class="droplet"></div>
	</div>
	<style>
		.rain {
			background-color: #171054;
			width: 30em;
			height: 50em;
			position: relative;
			overflow: hidden;
		}
		.rain .droplet {
			background: linear-gradient(to bottom, transparent, #2e20aa);
			width: 1%;
			height: 5%;
			border-radius: 100%;
			position: absolute;
			animation: rain 1.5s linear;
			animation-iteration-count: infinite;
			z-index: 1;
		}
		@keyframes rain {
			100% {
				top: 100%;
			}
		}
		img {
			max-width: 100%;
		}

	</style>
	<script>
		this.droplets = 'x'.repeat(16).split('')
		this.random = function(val)
		{
			return Math.random() * val | 0
		}

	</script>
</rain>

# Riot Bug Reporter

This is a template for bug reporting.

## How to report

1. [Open this template on Plunker](http://riotjs.com/examples/plunker/?app=bug-reporter)
2. Edit & save
3. Share the url