.blobs

@import 'compass/css3';

$base-bg: #f3f3f3;
$n: 7;
$pini: 50%;
$pfin: $pini;
$bdim: 13em;
$size: $bdim $bdim;
$gimg: ();
$blur: 5px;

@function overlay($c) {
	@return linear-gradient($c, $c);
}

@function rand($max: 13, $min: 3, $unit: 1em) {
	@return ($min + random($max - $min))*$unit
}

@for $i from 0 to $n {
	$gimg: $gimg, var(--gimg);
	
	@if $i > 0 {
		$pr: rand();
		$pa: rand(360, 0, 1deg);
		$pini: $pini, 50%;
		$pfin: $pfin, calc(50% + #{$pr*cos($pa)}) calc(50% + #{$pr*sin($pa)});
		$cs: rand(10);
		$size: $size, $cs $cs;
	}
}

html {
	background: overlay(rgba($base-bg, .9)), 
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_bg_easter.jpg) 50%/ cover $base-bg;
	background-blend-mode: normal, luminosity;
	mix-blend-mode: multiply;
}

*, :after { margin: 0; height: 100% }

.blobs {
	--gimg: radial-gradient(#000 67%, transparent 68%);
	background: linear-gradient(deeppink calc(50% - #{$bdim}), yellow calc(50% + #{$bdim}));
	
	&:after {
		display: block;
		box-shadow: 0 0 0 2*$blur #fff;
		background: $gimg #fff;
		background-position: $pfin;
		background-repeat: no-repeat;
		background-size: $size;
		filter: blur($blur) contrast(9);
		mix-blend-mode: lighten;
		animation: ani 1s cubic-bezier(.5,-1,0,1) infinite alternate;
		content: ''
	}
}

@keyframes ani { 0% { background-position: $pini } }

// random blobs, they change on refresh