Base SVG

by Nikhil

HTML

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="80" id="N" y="50%" x="50%" stroke-width="0" stroke="tomato" fill="tomato">n</text>
</svg>

CSS

body {
  background: #222;
}

#N {
  stroke-opacity: 0;
  animation: n-anim 5s infinite;
}

@keyframes n-anim {
  0% {
    stroke-opacity: 0;
    fill-opacity: 0;
  }
  1% {
    stroke-opacity: 1;
    fill-opacity: .2;
  }
  2%{
    stroke-opacity: 0;
    fill-opacity: 0;
  }
  3%{
    stroke-opacity: 0;
    fill-opacity: 0;
  }
  5%{
    stroke-opacity: 1;
    fill-opacity: .2;
  }
  7%{
    stroke-opacity: 0;
    fill-opacity: 0;
  }
  55%{
    stroke-opacity: 0;
    fill-opacity: 0;
  }
  73%{
    stroke-opacity: 1;
    fill-opacity: 0;
  }
  75%{
    stroke-opacity: 0;
    fill-opacity: .2;
  }
}