Strikethroughs

Description

A proof of concept of some interesting strikethrough varieties.

Created on 28 June 2026.

Code

<style>
  p {
    margin: 2rem;
    font: 3rem Arial, sans-serif;
  }

  /* Strikethrough to redaction */
  s {
    display: inline-block;
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-underline-offset: -1rem;
    text-decoration-skip-ink: none;
    transition: all 200ms;
    
    &:hover {
      text-decoration-thickness: 1.5cap;
      text-underline-offset: -2.5rem;
    }
  }

  /* Redaction to strikethrough */
  s.redact {
    display: inline-block;
    text-decoration: underline;
    text-decoration-thickness: 1.5cap;
    text-underline-offset: -1rem;
    text-decoration-skip-ink: none;
    text-underline-offset: -2.5rem;
    transition: all 200ms;
    
    &:hover {
      text-decoration-thickness: 0.2rem;
      text-underline-offset: -1rem;
    }
  }

  /* Scribble out */
  s.scribble {
    text-decoration: none;
    position: relative;
    
    &:hover {
      text-decoration: line-through;
      canvas {
        opacity: 0;
      }
    }
  }

  canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    transition: opacity 200ms;
  }
</style>

<p>Lorem ipsum dolor sit <s class='scribble'>NSW</s> ipsum <s class='scribble'>Australia</s>. Dolor sit amet consectetur lorem ipsum.</p>

<p>Lorem ipsum dolor sit <s>Tansmania</s> ipsum <s>Victoria</s> dolor sit amet, consectetur lorem ipsum.</p>

<p>Lorem sit <s class='redact'>Canada</s> ipsum <s class='redact'>USA</s>. Dolor sit amet ipsum dolor lorem ipsum.</p>

<script>
  const randomInt = (max) => Math.floor(Math.random() * max),
    randomBool = () => Math.random() < .5,
    randomSign = number => randomBool() ? -number : number;

  setTimeout(() => {
    document.querySelectorAll('s.scribble').forEach((s) => {
      const { width, height, top, left, } = s.getBoundingClientRect(),
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        
      canvas.width = width;
      canvas.height = height;
      s.append(canvas);

      let x = width / 2, y = height / 2;
      //ctx.lineWidth = 3;
      ctx.strokeStyle = '#000';
      ctx.beginPath();
      ctx.moveTo(x, y);
      
      function draw() {
        ctx.lineTo(x = randomInt(width), y = y + randomSign(randomInt(height / 2)));
        if (y > height - 10 || y < 10) {
          ctx.lineTo(x = randomInt(width), y = height / 2);
        }
        ctx.stroke();
        setTimeout(draw, 100);
      }
      draw();
    });
  }, 1000);
</script>