Responsive CSS Box Shadow Radial Pastel Dots 2

index.html

<span id=el></span>

Responsive CSS Box Shadow Radial Pastel Dots 2.markdown

Responsive CSS Box Shadow Radial Pastel Dots 2

My third attempt at something notable for #PastelDots weekend.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

// defining the relative line width 
// (think of it as a percentage of window width)
$line-width: 1;
// rem value of line width
$line-width-rem: $line-width * 1rem;
$colors: #77DD77, #966fd6, #f49ac2, #ffb347, #ff6961;

// initial element styles
#el {
  // centering on screen
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  
  $hover-dur: 200ms;
  
  animation: 
    // animating rotation
    rotate 2000ms * 5 infinite,
    // animating pulsation
    pulsate 2000ms * 5 infinite;
  // transition on size
  transition: height $hover-dur, width $hover-dur;
  
  // initial dimensions
  width: $line-width-rem - 0.1;
  height: $line-width-rem - 0.1;
  
  // increase hover area
  &::after {
    content: "";
    position: absolute;
    width: 200%; height: 200%;
    left: -50%; top: -50%;
    transition-property: height, width, top, left;
    transition-duration: $hover-dur;
    border-radius: 50%;
  }
  
  // on hover
  &:hover {
    width: $line-width-rem / 2 - 0.1;
    height: $line-width-rem / 2 - 0.1;
    // keep hover area same size
    &::after {
      width: 400%; height: 400%;
      left: -100%; top: -100%;
    }
  }
  
  
  // making it a circle
  border-radius: 50%;
  // initial color
  background: nth($colors,1);
  
}

// had an insane loop over every viewport size here 
// setting font-size to 1% window width in pixels.
// @AmeliaBR kindly reminded me that `vw` exists 
// and that i am an idiot.

// 1rem = 1% viewport width
html { font-size: 1vw; }

// math vars
$pi: 3.14159265359;
// number of perimeters to generate
$line-count: 10;
// initial shadow lists
$shadow: ();
$out-shadow: ();
// dot width
$dot: $line-width-rem;
// for each line
@for $b from 1 through $line-count {
  // unique color
  $color: nth($colors,$b % 5 + 1);
  // radius
  $rad: $dot * $b;
  // diameter
  $di: $rad * 2;
  // circumference
  $circ: $pi * $di;
  // dots per circumference
  $dots-per: round($circ / $dot / 2);
  // throttle (lower = greater distance spacing)
  $throttle-factor: 3;
  $throttle: $b * ($b + $throttle-factor) / $throttle-factor;
  // for each dot
  @for $d from 0 through $dots-per {
    $x1: cos($d * $pi / $dots-per) * $dot * $b;
    $y1: sin($d * $pi / $dots-per) * $dot * $b;
    $x2: cos($d * $pi / -$dots-per) * $dot * $b;
    $y2: sin($d * $pi / -$dots-per) * $dot * $b;
    $x3: cos($d * $pi / $dots-per) * $dot * $throttle;
    $y3: sin($d * $pi / $dots-per) * $dot * $throttle;
    $x4: cos($d * $pi / -$dots-per) * $dot * $throttle;
    $y4: sin($d * $pi / -$dots-per) * $dot * $throttle;

    $shad: $x1 $y1 0px 0px $color, $x2 $y2 0px 0px $color;
    $out-shad: $x3 $y3 0px 0px $color, $x4 $y4 0px 0px $color;
    $shadow: append($shadow, $shad, comma);
    $out-shadow: append($out-shadow, $out-shad, comma);
  }
}

// animating rotation of circle
@keyframes rotate {
  0%, 2%   { transform: rotate(0deg); }
  23%, 27% { transform: rotate(90deg); }
  48%, 52% { transform: rotate(180deg); }
  73%, 77% { transform: rotate(270deg); }
  98%, 100%{ transform: rotate(360deg); }
}

// animating pulsation of circle
@keyframes pulsate {
  0%, 50%, 100% { box-shadow: $shadow; }
  25%, 75% { box-shadow: $out-shadow; }
}

body {
  background: white;
  // add box shadow to our element
  #el {
    box-shadow: $shadow;
  }
}