Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="wall-of-text">
  <svg width="100%" height="100%" viewBox="0 0 500 572" xmlns="http://www.w3.org/2000/svg" fill="currentColor" preserveAspectRatio="xMidYMid meet">
    <text id="word-1" >Every</text>
    <text id="word-2">line</text>
    <text id="word-3">of</text>
    <text id="word-4">‹code›</text>
    <text id="word-5">brings</text>
    <text id="word-6">you</text>
    <text id="word-7">closer</text>
    <text id="word-8">to</text>
    <text id="word-9">launching</text>
    <text id="word-10">your</text>
    <text id="word-11">vision.</text>
    <text id="word-12">Stay</text>
    <text id="word-13">focused,</text>
    <text id="word-14">build</text>
    <text id="word-15">smarter,</text>
    <text id="word-16">&</text>
    <text id="word-17">watch</text>
    <text id="word-18">your</text>
    <text id="word-19">goals</text>
    <text id="word-20">take</text>
    <text id="word-21">shape</text>
    <text id="word-22">!</text>
  </svg>
</div>
<div class="controls">
  <input type="radio" name="scheme" style="--radio-color:" checked>
  <input type="radio" name="scheme" style="--radio-color:">
  <input type="radio" name="scheme" style="--radio-color:">
  <input type="radio" name="scheme" style="--radio-color:">
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*{
  box-sizing: border-box;
}
:root{
  --clr-txt: white;
  --clr-radio-1: rgb(239, 68, 68);
  --clr-radio-2: rgb(2, 132, 199);
  --clr-radio-3: rgb(245, 158, 11);
  --clr-radio-4: rgb(132, 204, 22);
  --clr-cta: var(--clr-radio-1);
}
body{
  background-color: black;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  font-size: 1rem;
  font-family: system-ui;
}
body:has(input[type=radio]:nth-child(1):checked),
.controls > input:nth-child(1){
  --clr-cta: var(--clr-radio-1);
}
body:has(input[type=radio]:nth-child(2):checked),
.controls > input:nth-child(2){
  --clr-cta: var(--clr-radio-2);
}
body:has(input[type=radio]:nth-child(3):checked),
.controls > input:nth-child(3){
  --clr-cta: var(--clr-radio-3);
}
body:has(input[type=radio]:nth-child(4):checked),
.controls > input:nth-child(4){
  --clr-cta: var(--clr-radio-4);
}
.controls{
  border: 1px solid rgba(255 255 255 /.5);
  padding: .25rem;
  display: flex;
  gap: 0.25rem;
}
.controls > input{
  --_size: 1.5rem;
  margin: 0;
  padding: 0;
  appearance: none;
  border: none;
  outline: none;
  border-radius: 50%;
  width: var(--_size);
  height: var(--_size);
  background-color: var(--clr-cta);
  scale: .8;
  transition: scale 300ms ease-in-out;
}
.controls > input:focus-visible,
.controls > input:hover{
   scale: 1;
}
.controls > input:checked{
  scale: 1.05;
}

.wall-of-text{
  position: relative;
  border: 1px solid rgba(255 255 255 / .35);
  width: min(calc(100% - 2rem), 600px);
  padding: clamp(.75rem, 1.5vw,2rem);
  background-color: black;
}
.wall-of-text::before{
  content: '';
  position: absolute;
  inset: -14px;
  background-color: var(--clr-cta);
  z-index: -1;
  opacity: .35;
  transition: background-color 300ms ease-in-out;
}
svg {
  width: 100%;
  height: auto;
  
}
/*
--x = x postion
--y = y position
--c = color
--f-s = font size
--f-w = font weight
--t = text transform
*/
svg > text{
  color: var(--c,var(--clr-txt));
  translate: var(--x,-50%) var(--y,-50%);
  font-size: var(--f-s, 2rem);
  font-weight: var(--f-w,400);
  text-transform: var(--t);
  transition: color 300ms ease-in-out;
}
#word-1 { /* Every */
  --x: 16px;
  --y: 50px;
  --f-w: 600;
  --f-s: 3rem;
  --t: uppercase;
}

#word-2 { /* line */
  --x: 45px;
  --y: 93px;
  --f-s: 3.5rem;
  --f-w: 300;
  --t: uppercase;
}

#word-3 { /* of */
  --x: 152px;
  --y: 70px;
  --f-s: 1.5rem;
  --f-w: 300;
}
#word-4 { /* code */
  --x: 170px;
  --y: 102px;
  --f-s: 6.8rem;
  --f-w: 600;
  --c: var(--clr-cta);
}
#word-5 { /* brings */
  --x: 14px;
  --y: 138px;
  --f-s: 1.8rem;
  --f-w: 300
}
#word-6 { /* you */
  --x: 80px;
  --y: 142px;
  --f-s: 4rem;
  --f-w: 600;
  --t: uppercase;
  /*--clr: var(--clr-2);*/
}
#word-7 { /* closer */
  --x: 215px;
  --y: 138px;
  --f-s: 1.8rem;
  --f-w: 300
}
#word-8 { /* to */
  --x: 136px;
  --y: 170px;
  --f-s: 1.6rem;
  --f-w: 300
}
#word-9 { /* launching */
  --x: 161px;
  --y: 180px;
  --f-s: 4rem;
  --f-w: 300
}
#word-10 { /* your */
  --x: 107px;
  --y: 194px;
  --f-s: 1.8rem;
  --f-w: 300;
  --c: var(--clr-cta);
  rotate: 70deg;
}
#word-11 { /* vision */
  --x: 123px;
  --y: 240px;
  --f-s: 5.065rem;
  --f-w: 600;
  --t: uppercase;
}
#word-11:first-letter{
  /*font-size: 6rem;*/
}
#word-12 { /* stay */
  --x: 214px;
  --y: 302px;
  --f-s: 3rem;
  --f-w: 300;
}
#word-13 { /* focused */
  --x: 161px;
  --y: 346px;
  --f-s: 5rem;
  --c: var(--clr-cta);
  /*
  filter: blur(3px);
  transition: filter 300ms ease-in-out;
  */
}
/*
svg:hover #word-13{
  filter: blur(0);
}
*/
#word-14 { /* build */
  --x: 102px;
  --y: 378px;
  --f-s: 2.6rem;
  --f-w: 300;
  --t: uppercase;
}
#word-14:first-letter{
  /*font-size: 5rem;*/
}
#word-15 { /* smarter */
  --x: 226px;
  --y: 378px;
  --f-s: 2.6rem;
  --f-w: 300;
  --t: uppercase;
}
#word-16 { /* & */
  --x: 17px;
  --y: 437px;
  --f-s: 3rem;
  --c: var(--clr-cta);
}
#word-17 { /* watch */
  --x: 40px;
  --y: 437px;
  --f-s: 5rem;
  --f-w: 600;
  --t: uppercase;
}
#word-18 { /* your */
  --x: 320px;
  --y: 437px;
  --f-s: 2rem;
}
#word-19 { /* goals */
  --x: 59px;
  --y: 482px;
  --f-s: 5.1rem;
  --f-w: 400;
  --c: var(--clr-cta);
}
#word-20 { /* take */
  --x: 102px;
  --y: 510px;
  --f-s: 3rem;
  --f-w: 300;
}
#word-21 { /* shape */
  --x: 190px;
  --y: 530px;
  --f-s: 4rem;
  --f-w: 600;
  --t: uppercase;
}

#word-22 { /* ! */
  --x: 390px;
  --y: 601q;
  --f-s: 10rem;
  --c: var(--clr-cta);
}

Frontend Forever App