*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue';
}

:root {
  --primary-color: #00aa8822;
  --secondary-color: #ff000022;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  overflow: hidden;
  background-image: repeating-conic-gradient(
      from var(--deg) at 20% 20%,
      var(--primary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 50% 20%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 70% 20%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 20% 50%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 50% 50%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 70% 50%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 20% 70%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 50% 70%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    ),
    repeating-conic-gradient(
      from var(--deg) at 70% 70%,
      var(--secondary-color) 0 1deg,
      transparent 2deg 3deg
    );
  animation: rotar 120s linear infinite alternate both;
}

@keyframes rotar {
  0% {
    --deg: 0deg;
  }
  100% {
    --deg: 360deg;
  }
}

@property --deg {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}