Codepen Dots and Dashes challenge

codepen-dots-and-dashes-challenge.markdown

Codepen Dots and Dashes challenge

A Pen by Zarko Rvovic on CodePen.

License.

index.pug

.container
	- for (var x = 1; x < 65; x++)
		.kvad
			.top
			.right
			.bottom
			.left

script.js

let pattern = "random";

gsap.to(".top, .left, .right, .bottom", {
	duration: 1.5,
	scale: 0.1,
	width: 10,
	height: 10,
	borderRadius: 100,
	rotate: 360,
	transformOrigin: "center",
	x: "random(-200, 200, 5)",
	y: "random(-200, 200, 5)",
	z: "random(-100, 200, 5)",
	boxShadow: "0 0 20px 13px green",
	//ease: "power1.inOut",
	repeat: -1,
	yoyo: true,
	stagger: {
		grid: [8, 8],
		yoyo: true,
		from: pattern,
		amount: 5
	}
});

gsap.to(".container", {
	duration: 2111,
	rotation: 10000,
	transformOrigin: "center",
	//ease: "power1.inOut",
	repeat: -1
});

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.scss

//******************************************************
// ❤️ it if you ❤️ it :) Thank you 🤘🤘🤘
// Best viewed in fullscreen
// https://codepen.io/nocni_sovac/full/ZEKWRJG
// Check my other pens as well: https://codepen.io/nocni_sovac
// Version II :https://codepen.io/nocni_sovac/full/jOmrQzq

//******************************************************

body {
	background: radial-gradient(ellipse at bottom, #3f4b5b 0%, #0d0e16 100%);
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transform: rotateX(300deg);
	transform-style: preserve-3d;
	perspective: 200px;
}

.container {
	width: 516px;
	height: 511px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	transform: rotate(45deg);
	transform-style: preserve-3d;
	//perspective: 300px;
	.kvad {
		width: 57px;
		height: 57px;
		position: relative;
		margin: 2px;

		.top,
		.right,
		.bottom,
		.left {
			position: absolute;
			height: 1px;
			transform-origin: center;
			//border-radius: 100%;
			@for $i from 1 through 65 {
				&:nth-of-type(#{$i}) {
					box-shadow: 0 0 10px 3px green;
					background: greenyellow;
					filter: hue-rotate(55deg * $i);
				}
			}
		}

		.top {
			width: 100%;
		}

		.right {
			height: 100%;
			width: 1px;
			right: 0;
			//border-radius: 100%;
		}

		.left {
			height: 100%;
			width: 1px;
			left: 0;
			//border-radius: 100%;
		}

		.bottom {
			bottom: 0;
			width: 100%;
		}
	}
}

a {
	position: absolute;
	top: 0;
	color: white;
}