JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="g-container">
  <div class="g-top">
    <div class="line"></div>
  </div>
  <div class="g-bottom"></div>
  <p>Harmony <span>O</span>S</p>
</div>
<svg>
  <filter id="fractal" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence id="turbulence" type="fractalNoise" baseFrequency="0.005 0.005" numOctaves="10">
      <animate attributeName="baseFrequency" dur="30s" values="0.005 0.005;0.05 0.3;0.005 0.005" repeatCount="indefinite" />
    </feTurbulence>
    <feDisplacementMap in="SourceGraphic" scale="15"></feDisplacementMap>
  </filter>
</svg>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;1,200&display=swap');

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  background: #000;
  font-family: 'Montserrat', sans-serif;
}

.g-container {
  margin: auto;
}

p {
  position: fixed;
  bottom: calc(50vh - 200px);
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 36px;
  color: #fff;
  text-align: center;
  margin-top: 12px;

  span {
    display: inline-block;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      width: 18px;
      left: 50%;
      transform: translate(-50%, 4px);
      border-bottom: 4px solid #2d60aa;
    }
  }
}

svg {
  position: absolute;
}

.g-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: #000;
  overflow: hidden;
  z-index: 10;

  &::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    bottom: 0;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, 100px);
    box-sizing: border-box;
    background: #000;
    border: 25px solid #fff;
    z-index: 1;
    box-shadow:
      0 0 4px 1px rgba(255, 255, 255, .8),
      0 0 8px 2px rgba(255, 255, 255, .6);
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-radial-gradient(circle at 50% 100%, transparent, transparent 5px, #3a77f6 5.2px, #3a77f6 6.2px, transparent 6.5px);
    mask: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 1), transparent 25%, transparent);
    z-index: 0;
  }
}

.g-bottom {
  position: fixed;
  top: 50vh;
  left: 0;
  width: 100vw;
  height: 50vh;
  background: #000;
  overflow: hidden;
  filter: url(#fractal);

  &::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 0;
    width: 200px;
    height: 200px;
    background: #000;
    left: 50%;
    transform: translate(-50%,...

JavaScript

// https://www.cnblogs.com/coco1s/p/16580595.html