JSFiddle - React, Tailwind, and code Playground

by sosegon

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zarpazo de Tigre Irregulares</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background-color: #000;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
  <!-- Primera franja -->
  <path d="M50,10 Q70,40 60,120 T70,190" fill="none" stroke="red" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
  
  <!-- Segunda franja -->
  <path d="M90,15 Q110,50 100,130 T110,195" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
  
  <!-- Tercera franja -->
  <path d="M130,20 Q150,60 140,140 T150,200" fill="none" stroke="red" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
  
  <!-- Cuarta franja -->
  <path d="M170,25 Q190,70 180,150 T190,205" fill="none" stroke="red" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

  <canvas id="scratchCanvas"></canvas>

  <script>
    const canvas = document.getElementById("scratchCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// ConfiguraciĂłn de las franjas
const scratches = [];
const numScratches = 4;
const scratchWidth = 20;
const scratchHeight = 150;
const fadeSpeed = 0.05;
const scratchDelay = 500;
const cycleTime = 2000;

function createScratchSet(x, y, direction) {
    for (let i = 0; i < numScratches; i++) {
        scratches.push({
            x: x + (i * 30 * direction),
            y: y,
            width: scratchWidth + Math.random() * 10,
            height: scratchHeight + Math.random() * 50,
            alpha: 1,
            velocity: 5 + Math.random() * 5,
        });
    }
}

function updateScratches() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i =...