:root {
    --hamburgerIcon_w: 30px;
    --hamburgerIconLine_h: calc(var(--hamburgerIcon_w) / 5);
    --circleW: 80%;
    --circleColor: #fff;
  }
  #hamburger {display: none;}
  [for="hamburger"] {
    display: block;
    width: var(--hamburgerIcon_w);
    height: var(--hamburgerIcon_w);
    transition: .3s;
    cursor: pointer;
    /* row - colum */
    background:
      /* 1-1 */
      0 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-2 */
      var(--hamburgerIconLine_h) 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-3 */
      calc(var(--hamburgerIconLine_h) * 2) 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-4 */
      calc(var(--hamburgerIconLine_h) * 3) 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-5 */
      calc(var(--hamburgerIconLine_h) * 4) 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-1 */
      0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-2 */
      var(--hamburgerIconLine_h)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-3 */
      calc(var(--hamburgerIconLine_h) * 2)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-4 */
      calc(var(--hamburgerIconLine_h) * 3)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-5 */
      calc(var(--hamburgerIconLine_h) * 4)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-1 */
      0 bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-2 */
      var(--hamburgerIconLine_h) bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-3 */
      calc(var(--hamburgerIconLine_h) * 2) bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-4 */
      calc(var(--hamburgerIconLine_h) * 3) bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-5 */
      calc(var(--hamburgerIconLine_h) * 4) bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat;
  }
  
  #hamburger:checked ~ [for="hamburger"] {
    background:
      /* 1-1 */
      0 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-2 */
      var(--hamburgerIconLine_h) var(--hamburgerIconLine_h)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-3 */
      calc(var(--hamburgerIconLine_h) * 4) 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-4 */
      calc(var(--hamburgerIconLine_h) * 3) var(--hamburgerIconLine_h)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 1-5 */
      calc(var(--hamburgerIconLine_h) * 4) 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-1 */
      0 0/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-2 */
      var(--hamburgerIconLine_h) var(--hamburgerIconLine_h)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-3 */
      calc(var(--hamburgerIconLine_h) * 2)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-4 */
      calc(var(--hamburgerIconLine_h) * 3) calc(var(--hamburgerIconLine_h) * 3)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 3-5 */
      calc(var(--hamburgerIconLine_h) * 4) calc(var(--hamburgerIconLine_h) * 4)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-1 */
      0 bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-2 */
      var(--hamburgerIconLine_h) calc(var(--hamburgerIconLine_h) * 3)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-3 */
      0 bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-4 */
      calc(var(--hamburgerIconLine_h) * 3) calc(var(--hamburgerIconLine_h) * 3)/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat,
      /* 5-5 */
      calc(var(--hamburgerIconLine_h) * 4) bottom/var(--hamburgerIconLine_h) var(--hamburgerIconLine_h) radial-gradient(circle closest-side, var(--circleColor) var(--circleW), transparent var(--circleW)) no-repeat;
  }

  #hamburger :checked~.drop_down{
    display: block;
  }