See the Pen Dots by Katy DeCorah (@katydecorah) on CodePen.

The other day I came across the Dribbble shot Cross by Helvetic Brands. I loved the pixels and the animation, so I started to code it out. I used a single element to create the first pixel and then used box-shadow to generate the rest. I started to add the animation, but I spun myself in another direction.

I cloned the box-shadow, creating two sets of dots and had the pair square dancing, as seen above.

1 dot + box-shadow = 16 dots

With the single element, .dot, I used its pseudo elements to house each set of dots. The actual element serves as container. The width and height of the element adjusts to the $size of the dots, the number of $dots, and the number of dot $rows.

Each pseudo element creates the first dot, the upper-most, left-most dot. The dot sets the precedent for the box-shadow dots using $size.

I used box-shadow to spin out 4 rows and 4 columns of dots. I admit that I first wrote out the shadow values by hand (more on that later). Instead of assigning the color value of the box-shadow, I used the color property within each pseudo element to control the color.

Negative Delays

I created an animation cross that translates the pseudo elements around a rigid square (down, right, up, left). At first I calculated the translate values by hand. Then I figured out how to replace the values with a variable using $size to make the animation scalable.

animation: cross 2s infinite ease-in;

I created a second animation criss to apply to the second pseudo element. Then I remembered that I had seen that you can use a negative value on the animation-delay to give the animation a head start. I nixed the criss animation, duplicated the original rule, and added a negative delay.

animation: cross 2s infinite ease-in -1s;

Square dancing dots!

dotMama: The Sass Function

I had the project finished, but I wanted to optimize my code.

I sent myself on a mission to write a Sass function to output the box-shadow values. I had never written a Sass function before, but I found a post about creating Sassy Text Shadows by Adam Stacoviak. I borrowed the bones of the function and started hacking at it.

Even though my function needed to loop through a small set of value, I started to confuse myself. I kept getting in my head about it. Maybe it was the complex function I was altering or the fact that I was playing with a new syntax. Whatever the reason, I decided to switch languages for a hot minute.

I thought to my myself, “How would I write this at work?” I am limited to ColdFusion at work. Yeah, it’s not great, but it’s the language that I’m using at daily, thus it’s freshest in my mind.

Within a couple minutes, I wrote the following loop in ColdFusion using absolute values:

<cfset x = 0>
<cfset y = 0>
<cfset max = 16>
<cfset row = 4>

<ol>
<cfloop from="1" to="#max#" index="i">
<li>#x#em #y#em 0</li>
<cfset y = y + 3>
<cfif i % row eq 0>
<cfset x = x + 3>
<cfset y = 0>
</cfif>
</cfloop>
</ol>

Next, I translated the ColdFusion to Sass and added in my relative values.

@function dotMama($max, $r, $x, $y) {
  $output: "";
  @for $i from 1 through $max {
    $output: $output + "#{$x} #{$y} 0";
    @if $i < $max {
      $output: $output + ", ";
    }
    $y: $y + ($size _ 2);
    @if $i % $r == 0 {
      $y: 0;
      $x: $x + ($size _ 2);
    }
  }
  @return unquote(\$output);
}

I am the proud creator of the Sass function, dotMama.

(p.s. holy hell, I used modulus!)

Play, please

I tried my darnedest to make this whole project scalable. Try changing the $dots and $rows in the Sass. You will find that the dots do a great job of following your orders.