Plone Logo with CSS

HTML part

<div class="plone-logo">
  <div class="plone-circle">
    <div class="plone-circle-inner">
      <div class="plone-dot-1"></div>
      <div class="plone-dot-2"></div>
      <div class="plone-dot-3"></div>
    </div>
  </div>
  <div class="plone-text">Plone</div>
</div>

LESS (CSS) part

@ploneLogoSize: 200px;
@ploneLogoFgColor: #0083be;
@ploneLogoBgColor: #ffffff;
@ploneLogoRatio: 0.797;

.plone-logo {
  background: @ploneLogoBgColor;
  position: relative;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

  .plone-text {
      color: @ploneLogoFgColor;
      float: left;
      font-style: normal;
      font-size: @ploneLogoRatio * @ploneLogoSize;
      line-height: @ploneLogoSize;
      margin-left: @ploneLogoSize * 0.135;
  }

  .plone-circle {
      float: left;
      display: block;
      position: relative;
      width: @ploneLogoSize;
      height: @ploneLogoSize;
      background-color: @ploneLogoFgColor;
      border-radius: @ploneLogoSize / 2;

      .plone-circle-inner {
      display: block;
      position: absolute;
      width: @ploneLogoSize * @ploneLogoRatio;
      height: @ploneLogoSize * @ploneLogoRatio;
      background-color: @ploneLogoBgColor;
      border-radius: @ploneLogoSize * @ploneLogoRatio / 2;
      top: @ploneLogoSize * (1 - @ploneLogoRatio) / 2;
      left: @ploneLogoSize * (1 - @ploneLogoRatio) / 2;

      .plone-dot(@x, @y) {
          display: block;
          position: absolute;
          width: @ploneLogoSize * (1 - @ploneLogoRatio);
          height: @ploneLogoSize * (1 - @ploneLogoRatio);
          background-color: @ploneLogoFgColor;
          border-radius: @ploneLogoSize * (1 - @ploneLogoRatio) / 2;
          top: @y;
          left: @x;
      }

      .plone-dot-1 {
          .plone-dot((0.328 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize,
                  (0.180 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize);
      }
      .plone-dot-2 {
          .plone-dot((0.547 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize,
                  (0.391 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize);
      }
      .plone-dot-3 {
          .plone-dot((0.328 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize,
                  (0.609 - (1 - @ploneLogoRatio) / 2) * @ploneLogoSize);
      }
    }
  }
}

RESULT

And for result look here -> http://codepen.io/garbas/pen/evpns

If anybody knows what this could be good for please let me know, I have no idea!