<svg
     width="100"
     height="100"
     viewBox="0 0 100 100">
  <defs>
    <mask id="thinkMask" width="100" height="100" style="position: absolute;">
      <circle
              cy="48.483498"
              cx="21.232237"
              r="18.812815"
              fill="white"
              class="thinkMaskCircle" />
    </mask>
    <mask id="createMask">
      <circle
              cx="69.173874"
              cy="49.998726"
              r="25"
              fill="white"
              class="createMaskCircle" />
    </mask>
  </defs>
  <g
     style="font-style:normal;font-weight:normal;font-size:5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#d1dce1;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     id="textTHINK">
    <path
          d="m 3.7754183,44.826611 6.9378657,0 0,0.933837 -2.9113765,0 0,7.267457 -1.1151123,0 0,-7.267457 -2.9113769,0 0,-0.933837 z" />
    <path
          d="m 11.811917,44.826611 1.109619,0 0,3.361816 4.031983,0 0,-3.361816 1.109619,0 0,8.201294 -1.109619,0 0,-3.90564 -4.031983,0 0,3.90564 -1.109619,0 0,-8.201294 z" />
    <path
          d="m 20.27139,44.826611 1.109619,0 0,8.201294 -1.109619,0 0,-8.201294 z" />
    <path
          d="m 23.589261,44.826611 1.494141,0 3.636474,6.860961 0,-6.860961 1.07666,0 0,8.201294 -1.49414,0 -3.636475,-6.860962 0,6.860962 -1.07666,0 0,-8.201294 z" />
    <path
          d="m 32.004788,44.826611 1.10962,0 0,3.466186 3.680419,-3.466186 1.428223,0 -4.070434,3.823242 4.361572,4.378052 -1.461182,0 -3.938598,-3.949585 0,3.949585 -1.10962,0 0,-8.201294 z" />
  </g>
  <g
     style="font-style:normal;font-weight:normal;font-size:5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0e232e;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     id="textTHINK-dark"
     mask="url(#thinkMask)">
    <path
          d="m 3.7754183,44.826611 6.9378657,0 0,0.933837 -2.9113765,0 0,7.267457 -1.1151123,0 0,-7.267457 -2.9113769,0 0,-0.933837 z" />
    <path
          d="m 11.811917,44.826611 1.109619,0 0,3.361816 4.031983,0 0,-3.361816 1.109619,0 0,8.201294 -1.109619,0 0,-3.90564 -4.031983,0 0,3.90564 -1.109619,0 0,-8.201294 z" />
    <path
          d="m 20.27139,44.826611 1.109619,0 0,8.201294 -1.109619,0 0,-8.201294 z" />
    <path
          d="m 23.589261,44.826611 1.494141,0 3.636474,6.860961 0,-6.860961 1.07666,0 0,8.201294 -1.49414,0 -3.636475,-6.860962 0,6.860962 -1.07666,0 0,-8.201294 z" />
    <path
          d="m 32.004788,44.826611 1.10962,0 0,3.466186 3.680419,-3.466186 1.428223,0 -4.070434,3.823242 4.361572,4.378052 -1.461182,0 -3.938598,-3.949585 0,3.949585 -1.10962,0 0,-8.201294 z" />
  </g>
  <g
     style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#d1dce1;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     id="textCREATE">
    <path
          d="m 53.430572,47.018058 -1.15412,0 q -0.09766,-0.45277 -0.412819,-0.772372 -0.315163,-0.324042 -0.754617,-0.492721 -0.439453,-0.173117 -0.909978,-0.173117 -0.754617,0 -1.35831,0.439453 -0.603693,0.435014 -0.954368,1.251775 -0.350675,0.812323 -0.350675,1.948686 0,1.136364 0.350675,1.953125 0.350675,0.812323 0.954368,1.251776 0.603693,0.435014 1.35831,0.435014 0.470525,0 0.905539,-0.168679 0.435015,-0.173118 0.750178,-0.49272 0.315163,-0.324041 0.421697,-0.776811 l 1.15412,0 q -0.150923,0.78125 -0.621449,1.336115 -0.470526,0.550426 -1.14968,0.843395 -0.679155,0.28853 -1.460405,0.28853 -1.091975,0 -1.93537,-0.563743 -0.838956,-0.563743 -1.318359,-1.611328 -0.474964,-1.047586 -0.474964,-2.494674 0,-1.43821 0.474964,-2.485795 0.479403,-1.047585 1.318359,-1.615767 0.843395,-0.568182 1.93537,-0.568182 0.776811,0 1.455966,0.292969 0.683593,0.28853 1.154119,0.843395 0.470526,0.550426 0.621449,1.331676 z" />
    <path
          d="m 60.357507,53.765217 -1.85103,-3.533381 -2.17951,0 0,3.533381 -1.100852,0 0,-9.090909 2.911932,0 q 1.02983,0 1.731179,0.395064 0.705788,0.395064 1.065341,1.043146 0.363991,0.648082 0.363991,1.402699 0,0.847834 -0.443892,1.500355 -0.443892,0.652521 -1.229581,0.981001 l 1.97532,3.697621 0,0.07102 -1.242898,0 z m -4.03054,-8.114347 0,3.568892 1.81108,0 q 0.763494,0 1.220703,-0.248579 0.461648,-0.24858 0.665838,-0.639205 0.208629,-0.390625 0.208629,-0.816761 0,-0.435014 -0.208629,-0.86559 -0.208629,-0.430575 -0.670277,-0.714666 -0.461648,-0.284091 -1.216264,-0.284091 l -1.81108,0 z" />
    <path
          d="m 68.718214,52.788654 0,0.976563 -5.557529,0 0,-9.090909 5.486506,0 0,0.976562 -4.385653,0 0,3.071733 3.924005,0 0,0.976563 -3.924005,0 0,3.089488 4.456676,0 z" />
    <path
          d="m 70.899943,53.765217 -1.171875,0 3.125,-9.090909 1.136364,0 3.125,9.090909 -1.171875,0 -0.803445,-2.432529 -3.426846,0 -0.812323,2.432529 z m 2.46804,-7.404119 -1.331676,3.995028 2.778764,0 -1.322798,-3.995028 -0.12429,0 z" />
    <path
          d="m 83.763935,44.674308 0,0.976562 -2.858665,0 0,8.114347 -1.100852,0 0,-8.114347 -2.858665,0 0,-0.976562 6.818182,0 z" />
    <path
          d="m 90.935011,52.788654 0,0.976563 -5.557529,0 0,-9.090909 5.486506,0 0,0.976562 -4.385653,0 0,3.071733 3.924005,0 0,0.976563 -3.924005,0 0,3.089488 4.456676,0 z" />
  </g>
  <g
     style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#0e232e;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     class="textCREATE-dark"
     mask="url(#createMask)">
    <path
          d="m 53.430572,47.018058 -1.15412,0 q -0.09766,-0.45277 -0.412819,-0.772372 -0.315163,-0.324042 -0.754617,-0.492721 -0.439453,-0.173117 -0.909978,-0.173117 -0.754617,0 -1.35831,0.439453 -0.603693,0.435014 -0.954368,1.251775 -0.350675,0.812323 -0.350675,1.948686 0,1.136364 0.350675,1.953125 0.350675,0.812323 0.954368,1.251776 0.603693,0.435014 1.35831,0.435014 0.470525,0 0.905539,-0.168679 0.435015,-0.173118 0.750178,-0.49272 0.315163,-0.324041 0.421697,-0.776811 l 1.15412,0 q -0.150923,0.78125 -0.621449,1.336115 -0.470526,0.550426 -1.14968,0.843395 -0.679155,0.28853 -1.460405,0.28853 -1.091975,0 -1.93537,-0.563743 -0.838956,-0.563743 -1.318359,-1.611328 -0.474964,-1.047586 -0.474964,-2.494674 0,-1.43821 0.474964,-2.485795 0.479403,-1.047585 1.318359,-1.615767 0.843395,-0.568182 1.93537,-0.568182 0.776811,0 1.455966,0.292969 0.683593,0.28853 1.154119,0.843395 0.470526,0.550426 0.621449,1.331676 z" />
    <path
          d="m 60.357507,53.765217 -1.85103,-3.533381 -2.17951,0 0,3.533381 -1.100852,0 0,-9.090909 2.911932,0 q 1.02983,0 1.731179,0.395064 0.705788,0.395064 1.065341,1.043146 0.363991,0.648082 0.363991,1.402699 0,0.847834 -0.443892,1.500355 -0.443892,0.652521 -1.229581,0.981001 l 1.97532,3.697621 0,0.07102 -1.242898,0 z m -4.03054,-8.114347 0,3.568892 1.81108,0 q 0.763494,0 1.220703,-0.248579 0.461648,-0.24858 0.665838,-0.639205 0.208629,-0.390625 0.208629,-0.816761 0,-0.435014 -0.208629,-0.86559 -0.208629,-0.430575 -0.670277,-0.714666 -0.461648,-0.284091 -1.216264,-0.284091 l -1.81108,0 z" />
    <path
          d="m 68.718214,52.788654 0,0.976563 -5.557529,0 0,-9.090909 5.486506,0 0,0.976562 -4.385653,0 0,3.071733 3.924005,0 0,0.976563 -3.924005,0 0,3.089488 4.456676,0 z" />
    <path
          d="m 70.899943,53.765217 -1.171875,0 3.125,-9.090909 1.136364,0 3.125,9.090909 -1.171875,0 -0.803445,-2.432529 -3.426846,0 -0.812323,2.432529 z m 2.46804,-7.404119 -1.331676,3.995028 2.778764,0 -1.322798,-3.995028 -0.12429,0 z" />
    <path
          d="m 83.763935,44.674308 0,0.976562 -2.858665,0 0,8.114347 -1.100852,0 0,-8.114347 -2.858665,0 0,-0.976562 6.818182,0 z" />
    <path
          d="m 90.935011,52.788654 0,0.976563 -5.557529,0 0,-9.090909 5.486506,0 0,0.976562 -4.385653,0 0,3.071733 3.924005,0 0,0.976563 -3.924005,0 0,3.089488 4.456676,0 z" />
  </g>
  <circle
          style="opacity:1;fill:#0e232e;fill-opacity:1;stroke:none;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
          class="ball-top"
          cx="0"
          cy="0"
          r="2" />
  <circle
          style="opacity:1;fill:#0e232e;fill-opacity:1;stroke:none;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
          class="ball-bottom"
          cx="0"
          cy="0"
          r="2" />
  <!--circle
style="opacity:0.66100003;fill:#dc0000;fill-opacity:1;stroke:none;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
class="clip-circle-big"
cx="67.173874"
cy="49.998726"
r="25" />
<circle
cy="49.037697"
cx="26.287533"
class="clip-circle-small"
style="opacity:0.66100003;fill:#dc0000;fill-opacity:1;stroke:none;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
r="11" /-->
  <!--path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 67.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208"
id="motion-path-top"
inkscape:connector-curvature="0"
sodipodi:nodetypes="czc" />
<path
sodipodi:nodetypes="czc"
inkscape:connector-curvature="0"
id="motion-path-bottom"
d="m 67.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208"
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /-->
</svg>
body {
  margin: 0;
}

svg {
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: relative;
  width: 100vmin;
}

.ball-top {
  animation: BallTopMove 4s both infinite;
  motion-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
  offset-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
  motion-offset: 0%;
  offset-distance: 0%;
}

.ball-bottom {
  animation: BallBottomMove 4s both infinite;
  motion-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
  offset-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
  motion-offset: 100%;
  offset-distance: 100%;
}

.thinkMaskCircle {
  animation: ClipSmallMove 4s both infinite;
}

.createMaskCircle {
  animation: ClipBigMove 4s both infinite;
}

@keyframes BallTopMove {
  0% {
    motion-offset: 0%;
    offset-distance: 0%;
    transform: scale(0);
  }
  10% { transform: scale(1); }
  42.5% { transform: scale(1); }
  50% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  100% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
}

@keyframes BallBottomMove {
  0% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  50% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  60% { transform: scale(1); }
  92.5% { transform: scale(1); }
  100% {
    motion-offset: 0%;
    offset-distance: 0%;
    transform: scale(0);
  }
}

@keyframes ClipSmallMove {
  0% { transform: translateY(-63%); }
  17.5% { transform: translateY(-63%); }
  50% { transform: translateY(0%); }
  62.5% { transform: translateY(63%); }
  100% { transform: translateY(63%); }
}

@keyframes ClipBigMove {
  0% { transform: translateY(0%); }
  17.5% { transform: translateY(-63%); }
  50% { transform: translateY(-63%); }
  62.499% { transform: translateY(-63%); }
  62.5% { transform: translateY(63%); }
  100% { transform: translateY(0%); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.