SVG text outline

by skeemer

HTML

<div class="my-box">
<!--     <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 600 90" width="600px" height="90px"
         xml:lang="en">
        <title>Outlined text, using paint-order</title>
        <rect fill="navy" height="100%" width="100%" />
        <text x="50%" y="70" 
              text-anchor="middle"
              font-size="80" 
              zfont-family="sans-serif"
              fill="white" 
              stroke="violet"
              stroke-width="0"
              paint-order="stroke"
              >Taking a break!</text>
    </svg> -->
    
    <svg xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 600 116" width="600px" height="90px"
         xml:lang="en">
        <text>Taking a break!</text>
    </svg>
    
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 112" height="90px" xml:lang="en" class="right">
        <rect fill="yellow" height="100%" width="100%" />
        <text>Show Starts Soon!</text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 112" height="90px" xml:lang="en" class="center">
        <rect fill="yellow" height="100%" width="100%" />
        <text>Show Starts Soon!</text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 112" height="90px" xml:lang="en">
        <rect fill="yellow" height="100%" width="100%" />
        <text>Show Starts Soon!</text>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 112" height="90px" xml:lang="en">
        <rect fill="yellow" height="100%" width="100%" />
        <text>QWERTYUIOP[]\{}|</text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 112" height="90px" xml:lang="en">
        <rect fill="yellow" height="100%" width="100%" />
        <text>ASDFGHJKL;'':"</text>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 112" height="90px" xml:lang="en">
        <rect fill="yellow" height="100%" width="100%" />
       ...

CSS

@import url('https://fonts.googleapis.com/css?family=Knewave');
body {
  background-color: #2f2149;
}

.my-box svg {
  display: block;
  margin: 0.25em;
  font-family: 'Knewave', cursive;
  font-variant: small-caps;
  font-size: 80px;
  /* letter-spacing: 10px; */
  fill: white;
  stroke: #160a2f;
  stroke-width: 18px;
  text-anchor: middle;
  paint-order: stroke;
}

.my-box svg text {
  alignment-baseline: hanging;
  text-anchor: start;
  transform: translate(20px, 7px);
}

.my-box svg.center text {
  text-anchor: middle;
  transform: translate(50%, 7px);
}

.my-box svg.right text {
  text-anchor: end;
  transform: translate(calc(100% - 25px), 7px);
}