Single Element Box Shadow Cow

index.html

<img class=reference src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/cow32.png" />

Single Element Box Shadow Cow.markdown

Single Element Box Shadow Cow

My preemptive attempt at making something notable for HolySpaceCowsWeekend.

box-shadow ftw

Safari no likey

A Pen by Jake Albaugh on CodePen.

License.

style.scss

// total diameter of object
$total-diameter: 300px;
$total-radius: $total-diameter / 2;
// matrix of colors, thanks to imagemagick and regex (see comments for how to)
$matrix: (
  #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFE, #FFFFFD, #FFFFFD, #FFFFFD, #FFFFFC, #FFFFFD, #FFFFFD, #FFFFFC, #FFFFFD, #FFFFFD, #FFFFFD, #FFFFFE, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFC, #FEFEFA, #FDFDEE, #FDFBE3, #FDFAE0, #FCFAE1, #FCF9DB, #FCFADC, #FCFADD, #FCF9DB, #FCFAE0, #FDFAE0, #FDFAE2, #FDFCEB, #FEFEF9, #FFFFFC, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFC, #FBF7CE, #FCF9DC, #FDFCED, #FFFEF7, #FFFEF8, #FFFEF8, #FFFFF8, #FFFFF8, #FFFFF8, #FFFEF7, #FFFEF8, #FFFEF8, #FFFEF7, #FDFCEE, #FCFADF, #FCF7CB, #FEFEF7, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FEFCED, #FCFADC, #FCF9DC, #FDFAE0, #FCFADE, #FEFCE3, #F9F6DA, #F8F4D4, #F9F5D5, #FBF9DC, #FEFCE3, #FDFADE, #FDFAE0, #FCFADC, #FCF9DA, #FEFCE9, #FFFFFD, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFB, #FFFEFA, #FFFEFA, #FEFEF9, #F0EEEA, #BBB6AD, #B4AC9E, #C0B7A9, #D5D1CA, #F9F8F4, #FFFFFA, #FFFEFA, #FFFEFA, #FFFFFB, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FDFDFD, #F4F4F4, #E1E1E1, #E8E8E7, #F8F8F8, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #F4F2F3, #AFA7A2, #C7BDAF, #D9CFBD, #D1C4B4, #A7988C, #BBB5B2, #F8F7F8, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FDFDFD, #A8A8A8, #464848, #2C2E2F, #313333, #5B5C5B, #CCCBCB, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #EBEAE8, #E3E2E0, #E8E3DD, #ECE9E0, #E7E1D7, #D0C6B5, #B1A696, #DDD9D5, #FDFDFC, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #F3F3F3, #3F4242, #080C0D, #080C0D, #090E0F, #101514, #454544, #D9D9D8, #FFFFFF, #FFFFFF, #F6F6F6, #EEEFF0, #EFF0F1, #D0CCC5, #D9D5CC, #E7E3DB, #E8E4DC, #DDD5C6, #DCD3C3, #ECE7DE, #FAF9F5, #FFFFFF, #FFFFFF, #FFFFFF, #FEFEFE, #FBFBFB, #FCFCFC, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #F9F9F9, #606263, #0F1314, #090D0E, #0C1011, #0C1112, #131615, #585755, #D4D3D0, #F4F4F2, #CBCAC9, #A6A2A1, #B9B6B5, #CAC6C2, #A19A93, #DCD6CD, #EBE7DE, #E8E5DB, #E3DCCB, #E8E1D5, #E0D8C9, #EDEAE4, #FFFFFF, #F4F4F4, #B1B1B1, #7D7E7E, #8D8F8F, #CFCFCF, #FAFAFA, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #BFBFC0, #303333, #080C0D, #0B0F10, #0D0F0F, #0E1010, #131513, #4C4843, #D5D1CA, #716E6B, #393433, #3D3B39, #938E8A, #BBB4AC, #E8E3DD, #EAE5DA, #E2DDCF, #DBD3C3, #E4DDD1, #C7BFB2, #88837E, #BDBCBC, #616465, #24292B, #192022, #182022, #2B3134, #929494, #F6F6F5, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FAFAFA, #A4A3A4, #232627, #070B0C, #0A0C0B, #0C0E0D, #0D100D, #21201B, #B7B0A9, #4F4B4B, #332F2F, #312B2B, #403B39, #C7C3BF, #F1F1F0, #EDEBE6, #E2DDCF, #CDC2B1, #BAAF9F, #4E4D47, #232524, #222626, #121819, #0D1417, #0E1618, #0A1214, #081114, #272F30, #D9DADB, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #F8F7F7, #9F9E9E, #2C2E2E, #151716, #141615, #0F1110, #151513, #807870, #5D5756, #353130, #25221F, #2D2B28, #ADACA9, #EEEFEF, #F1F1F2, #EEEDE9, #DDD8D0, #7F7668, #181816, #161819, #0F1212, #0A1011, #0C1215, #0B1214, #091214, #101A1C, #4D5254, #EAEAEB, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #F8F8F8, #D2D2D2, #A2A1A1, #7D7C7B, #535352, #22221F, #443F39, #544D4A, #302E2C, #232220, #272523, #676360, #DCDBDD, #F4F5F6, #F0F0F0, #E9E8E4, #A09B94, #21221F, #0E1010, #070B0B, #05090A, #060B0C, #070C0F, #171E20, #6A6C6E, #D7D7D7, #FEFEFE, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FAFAFA, #F4F4F4, #EEEEED, #CFCECC, #7E7771, #6B645E, #302F2C, #262523, #282624, #393636, #CCCBCC, #E9E6E3, #B7AB9E, #AC9E91, #BFB5AC, #7F776F, #3B3935, #171A1A, #121517, #15181B, #35383A, #9A9B9B, #ECECEC, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #D3CBC3, #8C8682, #32302E, #282725, #2A2927, #413E3F, #D2D1D2, #AE988F, #564744, #4B413B, #48413B, #3C3631, #47423E, #ACABA9, #C9C9C9, #C7C7C7, #DFDEDE, #F9F9F9, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #E8E3DE, #8A8786, #2F2E2D, #242321, #2E2C2C, #7C7A7A, #E3DEDB, #A88179, #3D2628, #362E2A, #28241F, #221C19, #3B2C2C, #D9D5D3, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #E4E1DF, #888686, #2B2A28, #262522, #514C4A, #C5C5C5, #EEEDEB, #B5A095, #796764, #38302D, #25211D, #26211E, #403430, #C6BBB4, #FFFEFC, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #E8E5E5, #A8A5A6, #5D5958, #A19C9B, #D8D7D6, #EFEFF1, #EDE7E3, #AF9F90, #50433C, #2B2321, #29241F, #27221F, #3F3531, #B1A091, #FBF9F6, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFEFE, #F0EEEE, #E6E4E7, #DAD9DB, #EAE8EB, #F3F3F4, #EBE7E1, #B79F8A, #7C5D48, #624332, #5F4032, #5B4033, #533C30, #574236, #A08B78, #F8F5F3, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FEFEFE, #EFEEEF, #EEEEF0, #F0F0F2, #ECEBEA, #E6E1D9, #CABBA7, #94765C, #86644A, #8C674D, #7D5B44, #7C5A44, #85624B, #7E624F, #B4A295, #F9F7F6, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FEFEFE, #E0DCDC, #E6E4E4, #EAE7E4, #E4E0D9, #CFC2AF, #AE997D, #A38B6E, #9D8368, #93765B, #876A52, #8B6D55, #AE9886, #E5DFD9, #F7F5F4, #FFFEFE, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FBF9F9, #A59A8D, #CCC6BF, #E3DDD3, #D4C9B9, #B7A68E, #AA9679, #C4B397, #B7A48A, #9A8266, #987F64, #A18C73, #E0DAD3, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #E6DDCF, #635544, #B2A9A1, #D3C7B7, #BDAC93, #B19F85, #C3B499, #C1B095, #A59073, #9A8265, #A08A6E, #CBC0B2, #FAF9F9, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FDFBFA, #AA957B, #322B22, #9A938C, #D3C7B5, #C3B298, #B6A287, #B8A589, #A28D70, #968064, #9D866A, #99856E, #E6E3DF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #E4D7C5, #584835, #1F1D19, #76716A, #D1C6B6, #C4B49B, #CEBFA8, #D1C2AA, #B29E83, #AD9981, #A18A71, #7E6B57, #B1A7A0, #FAF9F8, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #F8F4EE, #A98F6E, #2C251C, #1C1C1A, #645F5A, #D6CEC1, #D9CCB8, #C7B59C, #D7CBB7, #D1C5B2, #A9957D, #927C65, #604E41, #6F5C4C, #DCD9D5, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FBF8F4, #D6C2A5, #5C4931, #201E1B, #1D1D1C, #534F4B, #D4CCC1, #E5DBCB, #DDD1BD, #CCBDA7, #B19C84, #947E66, #473C34, #3E342C, #594534, #72685D, #E5E5E4, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FEFDFB, #EBDECB, #977A53, #2C251C, #1F1E1F, #1B1A19, #282521, #BBB0A3, #E0D4C1, #D9CBB9, #B39C83, #9C8266, #85715B, #292522, #141412, #2B241B, #5A452F, #837F7A, #F1F2F2, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #F4ECE0, #CFB490, #52412D, #201F1D, #212021, #181817, #23211E, #BAAFA2, #DED1BE, #CDBEA6, #A79074, #977D62, #6D5D4C, #1A1A18, #0B0E0E, #141310, #4F3C25, #433A2C, #C1C0BF, #FEFEFE, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #F3F0EB, #DDCCB4, #957651, #342C25, #212122, #222122, #151514, #161613, #6E665F, #CEC2B0, #CDBCA3, #A78F72, #947A61, #514539, #141513, #0E1010, #0E0F0E, #292216, #5B4629, #696661, #EEEEEF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #FAFAF9, #A0978F, #B39670, #68513D, #342E2B, #232222, #201F20, #141515, #0E0E0D, #201E1B, #7F7569, #B7A288, #9F8666, #78634D, #211D18, #0E100E, #111213, #0E0F11, #14140F, #5B472B, #43392A, #C8C6C5, #FEFEFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, 
 #FFFFFF, #FFFFFF, #FFFFFF, #E9E7E5, #9B8B7B, #906E48, #483C33, #262726, #232323, #212222, #131414, #101010, #121210, #2B2824, #85735E, #967C5E, #635140, #161513, #101110, #121414, #101314, #111312, #2E271B, #6D5737, #8B8782, #F2F3F4, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF
);

// our eventual box-shadow
$shadow: ();
$expanded-shadow: ();
$scale-factor: 8;
$scale-time: 6s;
$rows: 32;
$cols: 32;
$diameter: $total-diameter / $rows;

@for $row from 1 through $rows {
  // y offset per row
  $y: ($row - 1) * $diameter;
  @for $col from 1 through $cols {
    // x offset per col
    $x: ($col - 1) * $diameter;
    // get matrix index of color
    $index: ($row - 1) * $cols + $col;
    // get color
    $color: nth($matrix, $index);
    // add shadow if not white
    @if $color != #fff {
      $shadow: append($shadow, $x $y 0px 0px $color, comma);
      $expanded-shadow: append($expanded-shadow, $x*$scale-factor $y*$scale-factor 0px 0px $color, comma);
    }
  }
}


body::after {
  content: "";
  width: $diameter; height: $diameter;
  display: block;
  box-shadow: $shadow;
  @if nth($matrix, 1) != #fff {
    background: nth($matrix, 1);
  }
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-$total-radius, -$total-radius);
  animation: scale $scale-time ease-in-out infinite;
}

@keyframes scale {
  0% { 
    width: 0; height: 0;
    box-shadow: $expanded-shadow;
    transform: translate(-$total-radius * $scale-factor, -$total-radius * $scale-factor);
  }
  10% {
    width: $diameter; height: $diameter;
  }
  40%, 50% { 
    box-shadow: $shadow;
    transform: translate(-$total-radius, -$total-radius);
  }
  70%, 75% {
    width: $diameter; height: $diameter;
    transform: rotate(-15deg) translate(-$total-radius, -$total-radius*1.2);
  }
  85% {
    width: $diameter; height: $diameter;
    transform: translate(-$total-radius, -$total-radius);
  }
  90%, 100% {
    width: 0; height: 0;
    transform: translate(-$total-radius, -$total-radius);
  }
}

// this one i did myself.
$moo-matrix: (
  null,#333,#222,#333,#222,null,null,#333,#333,#222,null,null,#333,#333,#222,null,null,
  #222,null,#111,null,#111,null,#222,null,null,#111,null,#222,null,null,#111,null,null,
  #222,null,#111,null,#111,null,#111,null,null,#111,null,#111,null,null,#111,null,null,
  #222,null,#111,null,#111,null,#111,#222,#222,#111,null,#111,#222,#222,#111,null,#222  
);
$moo-shadow: ();
$moo-expanded-shadow: ();

@for $row from 1 through 4 {
  // y offset per row
  $y: ($row - 1) * $diameter;
  @for $col from 1 through 17 {
    // x offset per col
    $x: ($col - 1) * $diameter;
    // get matrix index of color
    $index: ($row - 1) * 17 + $col;
    // get color
    $color: nth($moo-matrix, $index);
    // add shadow if not white
    @if $color != null {
      $moo-shadow: append($moo-shadow, $x $y 0px 0px $color, comma);
      $moo-expanded-shadow: append($moo-expanded-shadow, $x*4 $y*4 0px 0px $color, comma);
    }
  }
}

body::before {
  content:"";
  position: absolute;
  color: #666;
  box-shadow: $moo-shadow;
  width: $diameter;
  height: $diameter;
  top: calc(50% - #{$total-radius/2});
  left: calc(50% + #{$total-radius});
  animation: moo $scale-time ease-in-out infinite;
}

@keyframes moo {
  0%, 50% { 
    width: 0; height: 0;
    transform: rotate(0deg);
  }
  70%, 75% { 
    top: calc(50% - #{$total-radius/2});
    left: calc(50% + #{$total-radius});
    transform: rotate(-15deg);
    box-shadow: $moo-shadow;
    width: $diameter; height: $diameter;
  }
  95%, 100% {
    box-shadow: $moo-expanded-shadow;
    left: 90%; top: 10%;
    width: 0; height: 0;
  }
}

body {
  background: #ccc;
  overflow: hidden;
}

img.reference {
  position: absolute;
  bottom: 1em; left: 1em;
}