index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01001</title>
    <style>
        #content {
          background: #;
          bottom: 0;
          height: 500px;
          left: 0;
          margin: auto;
          position: absolute;
          top: 0;
          right: 0;
          width: 50%;
          padding: 20px;
        }

        p {
          font-size: 200%;
        }
    </style>
</head>
<body>
  <canvas id="c"></canvas>
  <style> body {background: black;} </style>
<!--  https://codepen.io/goodmanmr1/pen/jpPeRR -->
<script>
  function draw(){ctx.fillStyle="rgba(0, 0,0,0.05)",ctx.fillRect(0,0,c.width,c.height),ctx.fillStyle="#0F0",ctx.font=font_size+"px arial";for(var a=0;a<drops.length;a++){var b=j[Math.floor(Math.random()*j.length)];ctx.fillText(b,a*font_size,drops[a]*font_size),drops[a]*font_size>c.height&&Math.random()>.975&&(drops[a]=0),drops[a]++}}var c=document.getElementById("c"),ctx=c.getContext("2d");c.height=window.innerHeight,c.width=window.innerWidth;var j="私は誰ですか？ああ、それは素晴らしいパズルです。1!2@3#4$5%6^7&8*9(0)";j=j.split("");for(var font_size=16,columns=c.width/font_size,drops=[],x=0;x<columns;x++)drops[x]=1;setInterval(draw,33);
</script>
</body>
</html>