Pure CSS - Rainbow Background

index.haml

- (1..25).each do
	.rainbow

.h
.v


// delete me if needed
.description-container
	.title
		rainbow background
	.subtitle
		pure css
.author-container
	.picture
	.title
		@SylvainGarnot

pure-css-rainbow-background.markdown

Pure CSS - Rainbow Background

Pure CSS challenge inspired by https://codepen.io/TWilson/details/jOdWqbZ

A Pen by sylvain garnot on CodePen.

License.

style.scss

$purple: rgb(232 121 249);
$blue: rgb(96 165 250);
$green: rgb(94 234 212);

$animationtime: 45s;
$length: 25;

body {
	overflow: hidden;
}

.rainbow {
	height: 100vh;
	width: 0;
	top: 0;
	position: absolute;
	transform: rotate(10deg);
	transform-origin: top right;
	@for $i from 1 through $length {
		&:nth-child(#{$i}) {
			$colors: 0;
			$r: random(6);
			@if $r == 1 {
				$colors: $purple, $blue, $green;
			}
			@elseif $r == 2 {
				$colors: $purple, $green, $blue;
			}
			@elseif $r == 3 {
				$colors: $green, $purple, $blue;
			}
			@elseif $r == 4 {
				$colors: $green, $blue, $purple;
			}
			@elseif $r == 5 {
				$colors: $blue, $green, $purple;
			}
			@elseif $r == 6 {
				$colors: $blue, $purple, $green;
			}
			box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px nth($colors, 1),
				0 0 50px 25px nth($colors, 2), 50px 0 50px 25px nth($colors, 3),
				130px 0 80px 40px white;

			animation: #{$animationtime -
				$animationtime /
				$length /
				2 *
				$i}
				linear
				infinite
				slide;
			animation-delay: -#{$i / $length * $animationtime};
		}
	}
}
@keyframes slide {
	from {
		right: -25vw;
	}
	to {
		right: 125vw;
	}
}

.h {
	box-shadow: 0 0 50vh 40vh white;
	width: 100vw;
	height: 0;
	bottom: 0;
	left: 0;
	position: absolute;
}
.v {
	box-shadow: 0 0 35vw 25vw white;
	width: 0;
	height: 100vh;
	bottom: 0;
	left: 0;
	position: absolute;
}

// DESCRIPTION (delete me if needed)
.description-container {
	position: absolute;
	bottom: 32px;
	left: 32px;
	text-align: left;
	letter-spacing: 3px;
	.title {
		font-size: 19px;
		font-weight: 500;
		color: black;
		text-transform: uppercase;
	}
	.subtitle {
		margin-top: 6px;
		font-size: 26px;
		font-weight: 500;
		color: black;
		text-transform: uppercase;
	}
}
.author-container {
	$width: 42px;
	position: absolute;
	width: 50%;
	right: $width/2;
	bottom: $width/2;
	text-align: right;
	.picture {
		position: absolute;
		right: 0;
		top: -$width;
		margin-top: -12px;
		width: $width;
		height: $width;
		background-size: $width;
		background-position: center;
		background-repeat-style: "no-repeat";
		background-image: url(https://assets.codepen.io/595576/internal/avatars/users/default.png?format=auto&version=1689877807&width=80&height=80);
	}
	.title {
		font-size: 16px;
		letter-spacing: 2px;
		color: black;
	}
}