code review animations created with html, js, css to give understanding of code review flow

code_review_flow.html

<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="1200" height="800" fill="#f8fafc"/>
  
  <!-- Logo -->
  <image x="50" y="10" width="80" height="80" href="https://res.cloudinary.com/dqarz88r6/image/upload/v1751589662/sb-logo2_vg1dz8.png"/>
  
  <!-- Title -->
  <text x="600" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1e293b">
    Code Review: Technical Practice & Learning Journey
  </text>
  
  <!-- Main Process Flow -->
  <!-- Developer writes code -->
  <g transform="translate(50, 100)">
    <rect x="0" y="0" width="200" height="80" rx="10" fill="#3b82f6" stroke="#2563eb" stroke-width="2"/>
    <text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">Developer</text>
    <text x="100" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">Writes Code</text>
    <text x="100" y="70" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#dbeafe">Initial Implementation</text>
  </g>
  
  <!-- Arrow 1 with animation -->
  <path d="M 270 140 L 330 140" stroke="#64748b" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
  <circle r="4" fill="#3b82f6">
    <animateMotion dur="8s" repeatCount="indefinite" begin="0s">
      <mpath href="#path1"/>
    </animateMotion>
  </circle>
  
  <!-- Pull Request Creation -->
  <g transform="translate(350, 100)">
    <rect x="0" y="0" width="200" height="80" rx="10" fill="#059669" stroke="#047857" stroke-width="2"/>
    <text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">Create Pull Request</text>
    <text x="100" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">/ Merge Request</text>
    <text x="100" y="70" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#d1fae5">Documentation & Context</text>
  </g>
  
  <!-- Arrow 2 with animation -->
  <path d="M 570 140 L 630 140" stroke="#64748b" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
  <circle r="4" fill="#059669">
    <animateMotion dur="8s" repeatCount="indefinite" begin="2s">
      <mpath href="#path2"/>
    </animateMotion>
  </circle>
  
  <!-- Code Review -->
  <g transform="translate(650, 100)">
    <rect x="0" y="0" width="200" height="80" rx="10" fill="#dc2626" stroke="#b91c1c" stroke-width="2"/>
    <text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">Peer Review</text>
    <text x="100" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">& Discussion</text>
    <text x="100" y="70" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#fecaca">Analysis & Feedback</text>
  </g>
  
  <!-- Arrow 3 with animation -->
  <path d="M 870 140 L 930 140" stroke="#64748b" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
  <circle r="4" fill="#dc2626">
    <animateMotion dur="8s" repeatCount="indefinite" begin="4s">
      <mpath href="#path3"/>
    </animateMotion>
  </circle>
  
  <!-- Merge/Deploy -->
  <g transform="translate(950, 100)">
    <rect x="0" y="0" width="200" height="80" rx="10" fill="#7c3aed" stroke="#6d28d9" stroke-width="2"/>
    <text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">Merge & Deploy</text>
    <text x="100" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">to Production</text>
    <text x="100" y="70" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#ddd6fe">Quality Assurance</text>
  </g>
  
  <!-- Return arrow with animation -->
  <path d="M 1050 200 Q 1100 250 1050 300 L 150 300 Q 100 250 150 200" stroke="#64748b" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="5,5"/>
  <circle r="4" fill="#7c3aed">
    <animateMotion dur="8s" repeatCount="indefinite" begin="6s">
      <mpath href="#returnPath"/>
    </animateMotion>
  </circle>
  
  <!-- Learning Aspects - Top Section -->
  <text x="600" y="350" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1e293b">
    Learning Dimensions
  </text>
  
  <!-- Knowledge Sharing -->
  <g transform="translate(50, 380)">
    <rect x="0" y="0" width="280" height="120" rx="10" fill="#fef3c7" stroke="#f59e0b" stroke-width="2"/>
    <text x="140" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#92400e">Knowledge Sharing</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="13" fill="#92400e">• Best practices propagation</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="13" fill="#92400e">• Domain expertise transfer</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="13" fill="#92400e">• Tool and technique discovery</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="13" fill="#92400e">• Architectural pattern learning</text>
  </g>
  
  <!-- Skill Development -->
  <g transform="translate(350, 380)">
    <rect x="0" y="0" width="280" height="120" rx="10" fill="#dbeafe" stroke="#3b82f6" stroke-width="2"/>
    <text x="140" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#1e40af">Skill Development</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="13" fill="#1e40af">• Code quality improvement</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="13" fill="#1e40af">• Critical thinking enhancement</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="13" fill="#1e40af">• Communication skills</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="13" fill="#1e40af">• Debugging proficiency</text>
  </g>
  
  <!-- Team Building -->
  <g transform="translate(650, 380)">
    <rect x="0" y="0" width="280" height="120" rx="10" fill="#dcfce7" stroke="#16a34a" stroke-width="2"/>
    <text x="140" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#15803d">Team Building</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="13" fill="#15803d">• Collaborative problem solving</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="13" fill="#15803d">• Mentor-mentee relationships</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="13" fill="#15803d">• Cross-team understanding</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="13" fill="#15803d">• Cultural norm establishment</text>
  </g>
  
  <!-- Quality Assurance Section -->
  <text x="600" y="550" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#1e293b">
    Quality Assurance Elements
  </text>
  
  <!-- Technical Quality -->
  <g transform="translate(100, 580)">
    <rect x="0" y="0" width="200" height="140" rx="10" fill="#fef2f2" stroke="#dc2626" stroke-width="2"/>
    <text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#dc2626">Technical Quality</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="12" fill="#dc2626">• Bug detection</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="12" fill="#dc2626">• Performance issues</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="12" fill="#dc2626">• Security vulnerabilities</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="12" fill="#dc2626">• Logic errors</text>
    <text x="20" y="130" font-family="Arial, sans-serif" font-size="12" fill="#dc2626">• Edge case handling</text>
  </g>
  
  <!-- Code Standards -->
  <g transform="translate(320, 580)">
    <rect x="0" y="0" width="200" height="140" rx="10" fill="#f3e8ff" stroke="#7c3aed" stroke-width="2"/>
    <text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#7c3aed">Code Standards</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="12" fill="#7c3aed">• Coding conventions</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="12" fill="#7c3aed">• Style consistency</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="12" fill="#7c3aed">• Documentation quality</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="12" fill="#7c3aed">• Test coverage</text>
    <text x="20" y="130" font-family="Arial, sans-serif" font-size="12" fill="#7c3aed">• Maintainability</text>
  </g>
  
  <!-- Architecture Review -->
  <g transform="translate(540, 580)">
    <rect x="0" y="0" width="200" height="140" rx="10" fill="#ecfdf5" stroke="#059669" stroke-width="2"/>
    <text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#059669">Architecture Review</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="12" fill="#059669">• Design patterns</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="12" fill="#059669">• System integration</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="12" fill="#059669">• Scalability concerns</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="12" fill="#059669">• Dependency management</text>
    <text x="20" y="130" font-family="Arial, sans-serif" font-size="12" fill="#059669">• API design</text>
  </g>
  
  <!-- Knowledge Transfer -->
  <g transform="translate(760, 580)">
    <rect x="0" y="0" width="200" height="140" rx="10" fill="#fffbeb" stroke="#d97706" stroke-width="2"/>
    <text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#d97706">Knowledge Transfer</text>
    <text x="20" y="50" font-family="Arial, sans-serif" font-size="12" fill="#d97706">• Context explanation</text>
    <text x="20" y="70" font-family="Arial, sans-serif" font-size="12" fill="#d97706">• Business logic clarity</text>
    <text x="20" y="90" font-family="Arial, sans-serif" font-size="12" fill="#d97706">• Technical rationale</text>
    <text x="20" y="110" font-family="Arial, sans-serif" font-size="12" fill="#d97706">• Alternative approaches</text>
    <text x="20" y="130" font-family="Arial, sans-serif" font-size="12" fill="#d97706">• Future considerations</text>
  </g>
  
  <!-- Feedback Loop -->
  <path d="M 150 200 Q 75 240 150 340" stroke="#64748b" stroke-width="2" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="5,5"/>
  <text x="75" y="235" font-family="Arial, sans-serif" font-size="12" fill="#64748b">Continuous</text>
  <text x="75" y="250" font-family="Arial, sans-serif" font-size="12" fill="#64748b">Learning</text>
  
  <!-- Outcome -->
  <g transform="translate(450, 750)">
    <rect x="0" y="0" width="300" height="60" rx="10" fill="#065f46" stroke="#047857" stroke-width="2"/>
    <text x="150" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white">Outcome: Better Code + Better Developers</text>
    <text x="150" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#a7f3d0">Enhanced team capability and product quality</text>
  </g>
  
  <!-- Arrow marker definition -->
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#64748b" />
    </marker>
    
    <!-- Animation paths -->
    <path id="path1" d="M 270 140 L 330 140" stroke="none" fill="none"/>
    <path id="path2" d="M 570 140 L 630 140" stroke="none" fill="none"/>
    <path id="path3" d="M 870 140 L 930 140" stroke="none" fill="none"/>
    <path id="returnPath" d="M 1050 200 Q 1100 250 1050 300 L 150 300 Q 100 250 150 200" stroke="none" fill="none"/>
  </defs>
</svg>