JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="pattern-container">
  <div class="pattern">
  </div>
</div>

<p class="centered">
  hongdalin
</p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Playwrite+ES+Deco:[email protected]&display=swap");

:root {
  --dot-distance: 50px;
  --dot-radius: 10%;
  --accent-color: 250, 128, 114;
}

html {
  font-size: 4vw;
}

@media (max-width: 600px) {
  html {
    font-size: 15px;
  }
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}


.pattern-container {
  position: relative;
  /* reference point for absolute positioning */
  width: 100vw;
  height: 100vh;
  background-color: black;
  overflow: hidden;
  min-width: 500px;
}

.pattern {
  width: 200vw;
  height: 100%;

  background-image: radial-gradient(circle,
      rgba(var(--accent-color), 0.6) var(--dot-radius),
      transparent var(--dot-radius));
  background-size: var(--dot-distance) var(--dot-distance);
  /* could animate this instead and just move 1 pattern-width (?) */
  background-position: calc(var(--dot-distance) / 2) 0;
  /* center the first vertical row of dots */
}

.centered {
  position: absolute;
  top: calc(50% - 3rem);
  left: 50%;
  transform: translate(-50%, -50%);
}

p {
  font-family: PlayWrite ES Deco;
  font-size: 3rem;
  text-align: center;
  color: rgba(var(--accent-color), 1);
}

JavaScript

// https://codepen.io/BarbWire/pen/dyExzZx

const pattern = document.querySelector(".pattern");
let patternWidth = pattern.clientWidth;

const directions = {
  left: -1,
  right: 1
};
const SPEED = 0.5;
const DIRECTION = directions.left;

function updatePatternWidth() {
  patternWidth = pattern.clientWidth;
}

function animatePatternBG() {
  let position = 0;

  function updatePosition() {
    position += SPEED * DIRECTION; // px per frame
    pattern.style.transform = `translateX(${position}px)`;

    if (position <= -patternWidth / 2) {
      position = 0;
    }

    requestAnimationFrame(updatePosition);
  }

  updatePosition();
}

animatePatternBG();

window.addEventListener("resize", () => {
  updatePatternWidth();
});

// init with current width
updatePatternWidth();