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>

<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>

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.

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

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

Did you enjoy this post? Support SisterSong. SisterSong strengthens and amplifies the collective voices of indigenous women and women of color to achieve reproductive justice by eradicating reproductive oppression and securing human rights.