Bagua

bagua.markdown

Bagua

A Pen by p6vital on CodePen.

License.

index.html

<div class="bagua bagua-1">
  <div class="li gua">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  <div class="kun">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="dui">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="qian">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="kan">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="gen">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="zhen">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div class="xun">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  <div class="taichi">
    <div></div>
    <div></div>
  </div>
</div>

style.scss

body {
  margin: 50px;
}

@mixin yin($bar-length, $bar-height, $bar-color) {
  position: absolute;
  width: #{$bar-height}px;
  height: #{$bar-height}px;
  margin: 0 #{($bar-length - $bar-height) / 2}px;

  &::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: #{$bar-height}px;
    border-top: #{$bar-height}px solid #{$bar-color};
    border-right: #{($bar-length - $bar-height) / 2}px solid #{$bar-color};
    border-left: #{$bar-height * 0.4142}px solid transparent;
  }

  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: #{$bar-height}px;
    border-top: #{$bar-height}px solid #{$bar-color};
    border-left: #{($bar-length - $bar-height) / 2}px solid #{$bar-color};
    border-right: #{$bar-height * 0.4142}px solid transparent;
  }
}

@mixin yang($bar-length, $bar-height, $bar-color) {
  position: absolute;

  width: #{$bar-length}px;
  height: #{$bar-height}px;
  background: #{$bar-color};

  &::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: #{$bar-length}px;
    border-top: #{$bar-height}px solid #{$bar-color};
    border-left: #{$bar-height * 0.4142}px solid transparent;
  }

  &::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: #{$bar-length}px;
    border-top: #{$bar-height}px solid #{$bar-color};
    border-right: #{$bar-height * 0.4142}px solid transparent;
  }
}

@mixin gua($yao1, $yao2, $yao3, $yao-width, $yao-height, $yao-color, $gua-height) {
  position: absolute;
  width: #{$yao-width}px;
  height: #{$gua-height}px;
  transform-origin: center bottom;

  > * {
    position: absolute;
  }

  :nth-child(1) {
    top: 0;
    left: 0;

    @if $yao1 == 0 {
      @include yin($yao-width, $yao-height, $yao-color);
    }
    @else {
      @include yang($yao-width, $yao-height, $yao-color);
    }
  }

  :nth-child(2) {
    top: #{$yao-height * 2}px;
    left: #{$yao-height * 0.4142 * 2}px;

    @if $yao2 == 0 {
      @include yin($yao-width - $yao-height * 0.4142 * 4, $yao-height, $yao-color);
    }
    @else {
      @include yang($yao-width - $yao-height * 0.4142 * 4, $yao-height, $yao-color);
    }
  }

  :nth-child(3) {
    top: #{$yao-height * 4}px;
    left: #{$yao-height * 0.4142 * 4}px;

    @if $yao3 == 0 {
      @include yin($yao-width - $yao-height * 0.4142 * 8, $yao-height, $yao-color);
    }
    @else {
      @include yang($yao-width - $yao-height * 0.4142 * 8, $yao-height, $yao-color);
    }
  }
}

.bagua {
  $yao-height: 12;
  $yao-width: 96;
  $yao-color: #cecece;
  $gua-height: $yao-width * 1.2071 + $yao-height * 2;

  position: absolute;
  transform-origin: center;
  
  width: #{$gua-height * 2}px;
  height: #{$gua-height * 2}px;
  
  >* {
  margin-left: #{(($yao-width * 1.2071 + $yao-height * 2) * 2 - $yao-width) / 2}px;
  }

  .li {
    @include gua(1, 0, 1, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .kun {
    transform: rotate(45deg);
    @include gua(0, 0, 0, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .dui {
    transform: rotate(90deg);
    @include gua(0, 1, 1, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .qian {
    transform: rotate(135deg);
    @include gua(1, 1, 1, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .kan {
    transform: rotate(180deg);
    @include gua(0, 1, 0, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .gen {
    transform: rotate(225deg);
    @include gua(1, 0, 0, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .zhen {
    transform: rotate(270deg);
    @include gua(0, 0, 1, $yao-width, $yao-height, $yao-color, $gua-height);
  }

  .xun {
    transform: rotate(315deg);
    @include gua(1, 1, 0, $yao-width, $yao-height, $yao-color, $gua-height);
  }
  
  .taichi {
    $taichi-border-size: $yao-height / 2;
    $taichi-size: $gua-height * 2 - $yao-height * 12 - $taichi-border-size * 2;
    
    position: absolute;
    left: 50%;
    top: 50%;
    height: #{$taichi-size}px;
    width: #{$taichi-size}px;
    margin: #{-$taichi-size / 2 - $taichi-border-size}px;
    border-radius: 50%;
    border: solid #{$taichi-border-size}px $yao-color;

    &::before {
      content: '';
      position: absolute;
      right: 0;
      left: 50%;
      height: 100%;
      width: 50%;
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
      background: #{$yao-color};
    }

    $yi-size: ($taichi-size - $taichi-border-size * 3) / 2 + $taichi-border-size;
    :nth-child(1) {
      position: absolute;
      height: #{$yi-size}px;
      width: #{$yi-size / 2}px;
      border-bottom-right-radius: #{$yi-size}px;
      border-top-right-radius: #{$yi-size}px;
      left: 50%;
      top: #{$yi-size / 2 + $taichi-border-size}px;
      margin: #{-$yi-size / 2 - $taichi-border-size}px 0;
      z-index: 100;
      background: white;
      
      &::before {
        content: '';
        position: absolute;
        width: #{$yao-height * 2}px;
        height: #{$yao-height * 2}px;
        border-radius: 50%;
        background: #{$yao-color};
        left: 0;
        top: 50%;
        margin: #{-$yao-height}px;
      }
    }

    :nth-child(2) {
      position: absolute;
      height: #{$yi-size}px;
      width: #{$yi-size}px;
      left: 50%;
      bottom: #{$yi-size / 2}px;;
      margin: #{-$yi-size / 2 - $taichi-border-size}px;
      border: #{$taichi-border-size}px solid #{$yao-color};
      border-radius: 50%;
      z-index: 100;
      background: #{$yao-color};
      
      &::before {
        content: '';
        position: absolute;
        width: #{$yao-height * 2}px;
        height: #{$yao-height * 2}px;
        border-radius: 50%;
        background: #ffffff;
        left: 50%;
        top: 50%;
        margin: #{-$yao-height}px;
      }
    }
  }
}

.bagua-1 {
  animation: spin 8s ease infinite;
}


@keyframes spin {
  0% {
    transform: rotate(0) scale(0.5);
  }
  50% {
    transform: rotate(720deg) scale(1);
  }
  100% {
    transform: rotate(1440deg) scale(0.5);
  }
}