Interactive grid logo

index.slim

.grid
  - (1..7).each do |row|
    - (1..7).each do |col|
      .cell class="row-#{row} col-#{col}"

interactive-grid-logo.markdown

Interactive grid logo

A Pen by Brandon McConnell on CodePen.

License.

script.js

// no js! 🎉

style.scss

$rows: 7;
$cols: 7;

$size: 40px;
$gap: 6px;

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #fdfdfd;
}

.grid {
  display: grid;
  grid-template-columns: repeat($cols, $size);
  grid-template-rows: repeat($rows, $size);
  gap: $gap;

  .cell {
    width: $size;
    height: $size;
    border-radius: 50%;
    transition: transform 0.3s, border-radius 0.3s;
    position: relative;
    z-index: 0;

    &:nth-child(odd) {
      background: black;
    }

    &:hover {
      transform: scale(1.5);
      border-radius: 0%;
      z-index: 2;
    }
  }

  @for $r from 1 through $rows {
    @for $c from 1 through $cols {
      @for $dr from -1 through 1 {
        @for $dc from -1 through 1 {
          @if not($dr == 0 and $dc == 0) {
            $nr: $r + $dr;
            $nc: $c + $dc;

            @if $nr >= 1 and $nr <= $rows and $nc >= 1 and $nc <= $cols {
              @at-root .grid:has(.row-#{$r}.col-#{$c}:hover)
                  .row-#{$nr}.col-#{$nc} {
                transform: scale(1.25);
                border-radius: 25%;
                z-index: 1;
              }

            @at-root .row-#{$r}.col-#{$c}:hover ~ .row-#{$nr}.col-#{$nc} {
                transform: scale(1.25);
                border-radius: 25%;
                z-index: 1;
              }
            }
          }
        }
      }
    }
  }
}

.grid:not(:has(.cell:hover)) {
  .row-4.col-4 {
    transform: scale(1.5);
    border-radius: 0%;
    z-index: 2;
  }

  @for $dr from -1 through 1 {
    @for $dc from -1 through 1 {
      @if not($dr == 0 and $dc == 0) {
        $nr: 4 + $dr;
        $nc: 4 + $dc;

        @if $nr >= 1 and $nr <= 7 and $nc >= 1 and $nc <= 7 {
          .row-#{$nr}.col-#{$nc} {
            transform: scale(1.25);
            border-radius: 25%;
            z-index: 1;
          }
        }
      }
    }
  }
}