Nucleaus logo

by thirdender

HTML

<div class="logo">
  <div class="left arc"></div>
  <div class="right arc"></div>
  <div class="electron yellow"></div>
  <div class="electron red"></div>
  <div class="electron green"></div>
  <div class="electron blue"></div>
</div>

<p>
  The color of the logo will always match the color of the text.
</p>
<input type="color" value="#25221e" id="color-text" />
<input type="color" value="#ffffff" id="color-background" />

SCSS

body {
  color: #25221e;
  margin: 100px;
}
.logo {
  $size: 64px;
  position: relative;
  width: $size;
  height: $size;
  .arc {
    position: absolute;
    top: 0;
    width: ($size / 2);
    height: $size;
    border: ($size * 0.22) solid;
    box-sizing: border-box;
  }
  .electron {
    position: absolute;
    border: ($size * 0.125) solid;
    border-radius: $size;
    margin-top: (0 - ($size * 0.125));
    margin-left: (0 - ($size * 0.125));
  }
  .yellow {
    color: #f6ec21;
    left: -20%;
    top: 50%;
  }
  .red {
    color: #e84124;
    top: -20%;
    left: 50%;
  }
  .green {
    color: #70bf44;
    left: 120%;
    top: 50%;
  }
  .blue {
    color: #0787b5;
    left: 50%;
    top: 50%;
  }
  .left {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    border-right-width: 0;
    transform: rotate(30deg);
    transform-origin: 100% 50%;
    left: 0;
  }
  .right {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    border-left-width: 0;
    transform: rotate(-30deg);
    transform-origin: 0 50%;
    right: 0;
  }
}

JavaScript

document.querySelector('#color-text').addEventListener('input', (event) => {
  document.body.style.color = event.target.value;
});
document.querySelector('#color-background').addEventListener('input', (event) => {
  document.body.style.backgroundColor = event.target.value;
});