CSS Challenge Day 052

css-challenge-day-052.markdown

CSS Challenge Day 052

This one is quite complicated and definitely took me time to figure things out. Anyway, this is for Day 52 of the CSS Challenge.

A Pen by Paul on CodePen.

License.

index.pug

.frame
		-for(var i=1; i <= 10; i++) {
			div(class="ring ring-"+i)
				-var dotsPerCircle = (12 + (i * 6))
				-for(var x=1; x <= dotsPerCircle; x++) {
					div(class="dot dot-"+x)
						.fill
				-}
		-}

script.js

// jQuery v3.3.1 is supported

scripts

<script src="https://100dayscss.com/codepen/js/jquery.min.js"></script>

style.scss

// delete the following line if no text is used
// edit the line if you wanna use other fonts
// @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

$numOfRings: 10;
$numOfDots: 12;
$radius: 60;

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #37474F;
  color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ring {
	position: absolute;
	width: ($radius * 2)+px;
	height: ($radius * 2)+px;
	top: ((400 - ($radius * 2))/2)+px;
	left: ((400 - ($radius * 2))/2)+px;
	
	.dot {
		position: absolute;
		width: 6px;
		height: 6px;
		top: ($radius)+px;
		left: ($radius)+px;
		
		.fill {
			width: 6px;
			height: 6px;
			background: #fff;
			border-radius: 50%;
		}
	}
}

@for $i from 1 through $numOfRings {
	$base: $i - 1;
	$dotsPerCircle: ($numOfDots + ($i * 6));
	.ring-#{$i} {
		.fill {
			animation: radiate 2s ease-in-out ($i/3)+s alternate infinite both;
		}
		@for $s from 1 through $dotsPerCircle {
			$sBase: $s - 1;
			$angle: 360 / $dotsPerCircle;
			.dot-#{$s} {
				$deg: ($sBase * $angle)+deg;
				transform: translate3d(0, ( ($radius + ($base * 11)) * -1) + px, 0) rotate($deg);
				transform-origin: 0 ($radius + ($base * 11)) + px;
			}
		}
	}
}

@keyframes radiate {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}