Circular graphic for navigation from main page

by niklasbuschner

HTML

<div class="pie-container" style="position: relative; top: 100px; left: 100px;">
  <div class="pie">
    <div class="pie__segment" data-href="1" style="--offset: 0; --value: 33.33333; --bg: #089baa">
      <div class="path-text demo1">
        <span id="demo1">BEISPIEL EINTRAG +</span>
      </div>
    </div>
    <div class="pie__segment" data-href="2" style="--offset: 33.33333; --value: 33.33333; --bg: #066f7a;">
      <div class="path-text demo2">
        <span id="demo2">NÄCHSTER EINTRAG +</span>
      </div>
    </div>
    <div class="pie__segment" data-href="3" style="--offset: 66.66666; --value: 33.33333; --bg: #044249;">
      <div class="path-text demo3">
        <span id="demo3">WEITERER EINTRAG +</span>
      </div>
    </div>
  </div>
  <div class="pie-body">
    <p>Kernaussage</p>
  </div>
</div>

<!-- direct embed of CircleType -->
<script>
  /*!
   * circletype 2.3.1
   * A JavaScript library that lets you curve type on the web.
   * Copyright © 2014-2020 Peter Hrynkow
   * Licensed MIT
   * https://github.com/peterhry/CircleType#readme
   */
  ! function(t, n) {
    "object" == typeof exports && "object" == typeof module ? module.exports = n() : "function" == typeof define && define.amd ? define([], n) : "object" == typeof exports ? exports.CircleType = n() : t.CircleType = n()
  }(window, (function() {
    return function(t) {
      var n = {};

      function e(r) {
        if (n[r]) return n[r].exports;
        var o = n[r] = {
          i: r,
          l: !1,
          exports: {}
        };
        return t[r].call(o.exports, o, o.exports, e), o.l = !0, o.exports
      }
      return e.m = t, e.c = n, e.d = function(t, n, r) {
        e.o(t, n) || Object.defineProperty(t, n, {
          enumerable: !0,
          get: r
        })
      }, e.r = function(t) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
          value: "Module"
        }), Object.defineProperty(t, "__esModule", {
...

CSS

html {
  font-family: Arial;
  font-size: 14px;
}

.pie {
  border-radius: 100%;
  height: calc(var(--size, 400) * 1px);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--size, 400) * 1px);
}

.pie__segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  -webkit-transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
  cursor: pointer;
}

.pie__segment:after,
.pie__segment:before {
  background: var(--bg, #e74c3c);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}

.pie__segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  -webkit-transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.pie__segment:after {
  opacity: var(--over50, 0);
}

.pie__segment .path-text {
  position: absolute;
  left: -82px;
  bottom: 122px;
  color: #fff;
  font-weight: 700;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.pie__segment .path-text span div {
  height: 2.5em !important;
}

.pie__segment .path-text span div span:last-child {
  color: rgba(255, 255, 255, 0.75);
}

.pie__segment .path-text.demo1 {
  transform: rotate(-90deg);
}

.pie__segment__path-text__rotation1 {
  transform: rotate(60deg);
}

.pie__segment .path-text.demo2 {
  transform: rotate(-30deg);
}

.pie__segment .path-text.demo3 {
  transform:...

JavaScript

$(document).ready(function() {
  function textRotation() {
    new CircleType(document.getElementById('demo1')).radius(185);
    new CircleType(document.getElementById('demo2')).radius(185);
    new CircleType(document.getElementById('demo3')).radius(185);
  }
  textRotation();
  $('#demo1').children('div').addClass('pie__segment__path-text__rotation1');
  $('#demo3').children('div').addClass('pie__segment__path-text__rotation3');
  $('.pie__segment').on('click', function() {
    var link_target = $(this).data('href');
    alert('KLICK' + link_target);
  });
})