Blowout text effect

Feb 6 · 1 min

A simple blowout text effect created using fixed positioning:

<!DOCTYPE html>
<html>
  <head>
    <title>blowout text effect</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <section>
      <div class="section__content">
        <!-- <h1>Your Name</h1> -->
        <svg>
          <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">
            Your Name
          </text>
        </svg>
      </div>
    </section>
  </body>
</html>

Open Sandbox