%h1 Alive Arrows
%h4 hover over any arrow
.container
  -(1..25).each do |i|
    %a.link{:href => 'javascript: void(0)'}
  -(1..25).each do |i|
    .arrow

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: #999;
}
h1, h4{
  margin: 30px 0 0 0;
  text-transform: capitalize;
  text-align: center;
}
.container{
  width: 500px;
  height: 500px;
  margin: 30px auto;
}
.link{border: 1px solid yellow; border-radius:50%;}
.link, .arrow{
  display: inline-block;
  width: 95px;
  height: 95px;
  background-color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 10;
  transition: all 0.2s;
}
.arrow{
  background-color: rgba(0,0,0,0);
  background-image: url('https://cdn3.iconfinder.com/data/icons/pictofoundry-pro-vector-set/512/UpArrow-512.png');
  background-size: 85%;
  background-repeat:no-repeat;
  background-position: center center;
  transform: translateY(-495px);
  pointer-events: none;
  transition: all 0.75s;
}

@for $i from 0 to 5 {
  @for $j from 1 to 6 {
    @for $k from 0 to 5 {
      @for $l from 1 to 6 {
         .link:nth-child(#{5*$i+$j}):hover ~ div:nth-of-type(#{5*$k+$l}){
           @if $k < $i and $l < $j {
               transform: translateY(-495px) rotate(135deg);
           }@else if $k < $i and $l == $j{
               transform: translateY(-495px) rotate(180deg);
           }@else if $k < $i and $l > $j{
               transform: translateY(-495px) rotate(225deg);
           }@else if $k == $i and $l < $j{
               transform: translateY(-495px) rotate(90deg);
           }@else if $k == $i and $l > $j{
               transform: translateY(-495px) rotate(-90deg);
           }@else if $k > $i and $l < $j{
               transform: translateY(-495px) rotate(45deg);
           }@else if $k > $i and $l > $j{
               transform: translateY(-495px) rotate(-45deg);
           }@else if $k == $i and $l == $j{
               
           }
         }
       }
     }
  }
}

/*
     SANDER SAYS:
     NO WARRANTIES EXPRESSED OR IMPLIED
     FOR USING THIS CODE: "ALL THIS"
     HAS HAPPENED BEFORE, AND IT WILL
     HAPPEN AGAIN... BUT IT DOESN'T
     MATTER - BECAUSE WE ARE IN THIS
     TOGETHER. EVERY PATH IS THE RIGHT
     PATH: EVERYTHING COULD HAVE BEEN
     ANYTHING ELSE, AND IT WOULD HAVE
     JUST AS MUCH MEANING. ENJOY. SHARE.
     COMPLIMENTS? PARTY INVITATIONS?
     RIGHT ON!
*/