サンプルのhtmlソースコード

<main class="wrapper">
  <div class="title-wrapper">
    <h2 class="title">Demo Title Over Dot Pattern</h2>
  </div>
  <svg role="img" aria-hidden="true" class="">
    <title>Dot Loose</title>
    <pattern id="dot-loose-pattern" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
      <rect width="0.5" height="0.5"></rect>
      <rect y="1" width="0.5" height="0.5"></rect>
      <rect y="0.5" width="0.5" height="0.5"></rect>
      <rect x="1" width="0.5" height="0.5"></rect>
      <rect x="1" y="1" width="0.5" height="0.5"></rect>
      <rect x="1" y="0.5" width="0.5" height="0.5"></rect>
      <rect x="0.5" width="0.5" height="0.5"></rect>
      <rect x="0.5" y="1" width="0.5" height="0.5"></rect>
      <rect x="0.5" y="0.5" width="0.5" height="0.5"></rect>
    </pattern>
    <rect width="100%" height="100%" fill="url(#dot-loose-pattern)"></rect>
  </svg>  
</main>

サンプルのCSSソースコード

:root {
  --bg-color: #ddd;
  --citation-bg-color: #1E0519;
  --citation-a-color: darkmagenta;
  --citation-a-hover-color: magenta;
  --width: 90%;
  --height: 400px;
}
svg {
  width: var(--width);
  height: var(--height);
}
svg pattern rect {
  fill: blue;
}
.wrapper {
  position: relative;
  width: 100%;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg-color);
}
.title-wrapper {
  padding: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ddd;
}
.title-wrapper h2 {
  margin: 0;
  padding: 0;
  color: blue;
}

.citation {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: var(--citation-bg-color);
}
.citation p {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  color: white;
}
.citation p a {
  color: var(--citation-a-color);
  cursor: pointer;
}
.citation p a:hover {
  color: var(--citation-a-hover-color);
}