Code · blind round

R155 · Linked list with animated pointer relinking

blind round 8/11 local models answered

Every answer below carries the name of the model that wrote it. Blind refers to the scoring: the review was done without knowing which model produced which answer — the published result names them.

1 of the 11 local models delivered nothing through our test harness in this round — for reasons that lie with our setup, not with the models. Those cards are marked DNF like any other, but they are not evidence about those models — the reason is noted on the card itself.

Show task

Create ONE self-contained HTML file (STRICT LIMIT: max 7000 characters in total — this is a budget on characters, not on lines, so removing line breaks does not help) that animates a singly linked list on a <canvas>: draw each node as a small labelled box in a horizontal or wrapped row with an explicit arrow drawn from each node to its successor and a distinct marker on the head node, and periodically perform one operation at a time — either inserting a new node at a random position or deleting an existing node at a random position — by first highlighting the affected node and its neighbours, then visibly animating the arrow being redrawn to its new target rather than snapping instantly to the new layout: for an insert, the previous node's arrow swings over to point at the new node, whose own arrow then points onward to the old successor; for a delete, the previous node's arrow swings directly to the deleted node's old successor as the deleted box fades out. Reset to a fresh short list once it grows too long or shrinks to empty. Show the current list length. Smooth requestAnimationFrame animation, NO user input, starts immediately and keeps running (restart with a fresh random instance when finished). No external libraries, no comments needed. Output ONLY the HTML file content, nothing else.

The answers

Local models (Brain cluster) — identical prompt, shuffled order (the sequence is not a ranking)

qwen3:8bSTATFORMAT

Show code

```javascript
let nodes = [], currentLength = 0, isAnimating = false;

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  ctx.clearRect(0, 0, 800, 600);
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, 800, 600);
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    ctx.fillStyle = node.isDeleted ? 'gray' : 'blue';
    ctx.fillRect(100 * i, 300, 80, 40);
    ctx.fillStyle = 'white';
    ctx.font = '16px Arial';
    ctx.fillText(node.value, 100 * i + 40, 330);
    if (i < nodes.length - 1) {
      ctx.beginPath();
      ctx.moveTo(100 * i + 40, 320);
      ctx.lineTo(100 * (i + 1) + 40, 320);
      ctx.strokeStyle = 'black';
      ctx.stroke();
    }
  }
}

function reset() {
  nodes = [];
  currentLength = 0;
  for (let i = 0; i < 5; i++) {
    nodes.push({ value: Math.floor(Math.random() * 100), isDeleted: false });
  }
  currentLength = nodes.length;
  draw();
}

function performOperation() {
  if (currentLength === 0) {
    reset();
    return;
  }
  const type = Math.random() < 0.5 ? 'insert' : 'delete';
  if (type === 'insert') {
    const index = Math.floor(Math.random() * (currentLength + 1));
    const newValue = Math.floor(Math.random() * 100);
    nodes.splice(index, 0, { value: newValue, isDeleted: false });
    currentLength++;
  } else {
    const index = Math.floor(Math.random() * currentLength);
    nodes[index].isDeleted = true;
    currentLength--;
  }
  draw();
}

function animate() {
  if (!isAnimating) return;
  isAnimating = false;
  performOperation();
  setTimeout(() => {
    isAnimating = true;
    draw();
  }, 1000);
}

setInterval(() => {
  if (!isAnimating) {
    isAnimating = true;
    performOperation();
    draw();
  }
}, 2000);

reset();
```

**Note:** This code provides a simplified version of the required functionality within the character limit. It includes a canvas for drawing nodes and arrows, a reset function for initial state, and a performOperation function to handle insert and delete operations. The animation is approximated with a delay and redraw, rather than detailed swinging animations. The actual implementation would require more complex state management and animation logic to achieve the described "swinging" effect.

qwen3-coder:30bSTATLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Linked List Animator</title>
    <style>body { background: #111; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } canvas { border: 1px solid #333; background-color: #222; }</style>
</head>
<body>
    <canvas id="listCanvas"></canvas>
    <script>
        const canvas = document.getElementById('listCanvas');
        const ctx = canvas.getContext('2d');
        let W, H;

        // --- State Variables ---
        class Node { constructor(val) { this.val = val; this.next = null; this.x = 0; this.y = 0; this.width = 80; this.height = 30; } }
        let head = null;
        let nodes = []; // Array of Node objects for easy indexing/manipulation
        let listLength = 0;

        // Animation state
        let animating = false;
        let animationQueue = [];
        const MAX_LENGTH = 15;
        const MIN_LENGTH = 3;

        // --- Utility Functions ---
        function init() {
            W = canvas.width = Math.min(800, window.innerWidth * 0.9);
            H = canvas.height = 120;
            head = null;
            nodes = [];
            listLength = 0;
            animationQueue = [];
            animate();
        }

        function setupList(count) {
            if (count < MIN_LENGTH || count > MAX_LENGTH) return;
            
            // Clear existing state
            head = null;
            nodes.length = 0;
            listLength = 0;

            let currentHead = null;
            let tail = null;

            for (let i = 1; i <= count; i++) {
                const newNode = new Node(String(i));
                if (!head) {
                    head = newNode;
                } else {
                    tail.next = newNode;
                }
                nodes.push(newNode);
                tail = newNode;
            }
            listLength = count;
        }

        function randomOperation() {
            // Reset list if too short or too long before operating
            if (listLength < MIN_LENGTH) setupList(Math.max(MIN_LENGTH, Math.floor(Math.random() * 3) + 2));
            if (listLength > MAX_LENGTH) setupList(Math.floor(Math.random() * (MAX_LENGTH - 5 + 1)) + 5);

            const op = Math.random() < 0.5 ? 'insert' : 'delete';
            
            if (op === 'insert') {
                // Insert at random position (0 to listLength inclusive)
                const pos = Math.floor(Math.random() * (listLength + 1));
                return { type: 'insert', pos: pos, val: String(listLength + 1) };
            } else {
                // Delete random node index (0 to listLength - 1)
                if (listLength === 0) return null;
                const idx = Math.floor(Math.random() * listLength);
                return { type: 'delete', pos: idx };
            }
        }

        // --- Layout and Drawing ---

        function calculateLayout() {
            let currentX = 20;
            nodes.forEach((node, i) => {
                node.x = currentX;
                node.y = (H - node.height) / 2;
                currentX += node.width + 15; // +15 for spacing
            });
        }

        function drawNode(node, isHighlighted = false) {
            ctx.fillStyle = isHighlighted ? '#ffaa00' : '#44aaaaff';
            ctx.strokeStyle = '#6699cc';
            ctx.lineWidth = 2;
            ctx.fillRect(node.x, node.y, node.width, node.height);
            ctx.strokeRect(node.x, node.y, node.width, node.height);

            // Label
            ctx.fillStyle = '#fff';
            ctx.font = '14px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(node.val, node.x + node.width / 2, node.y + 20);

            // Head marker
            if (node === nodes[0] && !isHighlighted) {
                ctx.fillStyle = '#ff4444';
                ctx.beginPath();
                ctx.arc(node.x - 10, node.y + node.height / 2, 5, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        function drawArrow(startNode, endNode, points = { startX: 0, startY: 0, endX: 0, endY: 0 }) {
            if (!startNode || !endNode) return;

            ctx.strokeStyle = points.color || '#6699cc';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(points.startX, points.startY);
            ctx.lineTo(points.endX, points.endY);
            ctx.stroke();

            // Arrowhead calculation (simplified)
            const angle = Math.atan2(points.endY - points.startY, points.endX - points.startX);
            const headLength = 10;
            ctx.strokeStyle = points.color || '#6699cc';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(points.endX - headLength * Math.cos(angle - Math.PI / 6), points.endY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(points.endX, points.endY);
            ctx.lineTo(points.endX - headLength * Math.cos(angle + Math.PI / 6), points.endY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        function render() {
            // Clear canvas and draw list elements
            ctx.clearRect(0, 0, W, H);
            calculateLayout();

            for (let i = 0; i < nodes.length; i++) {
                const node = nodes[i];
                drawNode(node);
            }

            // Draw arrows and links
            for (let i = 0; i < nodes.length - 1; i++) {
                const start = nodes[i];
                const end = nodes[i+1];
                
                // Calculate connection points: Right edge of start, Left edge of end
                const pStart = { x: start.x + start.width, y: start.y + start.height / 2 };
                const pEnd = { x: end.x, y: end.y + end.height / 2 };

                drawArrow(start, end, { startX: pStart.x, startY: pStart.y, endX: pEnd.x, endY: pEnd.y });
            }

            // Draw status text
            ctx.fillStyle = '#ccc';
            ctx.font = '18px Arial';
            ctx.textAlign = 'left';
            ctx.fillText(`Length: ${listLength}`, 20, 30);
        }

        // --- Animation & Operations ---

        function applyOperation(op) {
            if (!op) return;
            animating = true;
            animationQueue.push({ type: op.type, pos: op.pos, val: op.val });
            render(); // Initial draw of the operation state
        }
        
        function processOperation(op) {
            const { type, pos, val } = op;

            if (type === 'insert') {
                const newNode = new Node(val);
                let insertIndex = Math.min(Math.max(0, parseInt(pos)), nodes.length);
                
                // 1. Link the node physically
                if (insertIndex === 0) {
                    newNode.next = head;
                    head = newNode;
                } else if (insertIndex > 0 && insertIndex <= nodes.length) {
                    const prevNode = nodes[insertIndex - 1];
                    newNode.next = prevNode.next;
                    prevNode.next = newNode;
                } else { // Insert at the end
                    nodes[nodes.length - 1].next = newNode;
                }

                // 2. Update array and length
                nodes.splice(insertIndex, 0, newNode);
                listLength++;

            } else if (type === 'delete') {
                const deleteIdx = Math.min(Math.max(0, parseInt(pos)), nodes.length - 1);
                if (deleteIdx < 0) return;

                // 1. Handle head deletion
                if (nodes[0] === nodes[deleteIdx]) {
                    head = nodes[1];
                } else {
                    const prevNode = nodes[deleteIdx - 1];
                    prevNode.next = nodes[deleteIdx + 1];
                }

                // 2. Remove from array and length
                nodes.splice(deleteIdx, 1);
                listLength--;
            }
        }

        function animate() {
            if (!animating) {
                // Request next operation if done or list is stable
                setTimeout(() => {
                    const op = randomOperation();
                    if (op) {
                        applyOperation(op);
                    } else {
                        animate(); // Try again
                    }
                }, 100);
                return;
            }

            if (!animationQueue.length) {
                animating = false;
                calculateLayout(); // Final layout calculation after operations finish
                render();
                // Wait a moment before starting the next operation cycle
                setTimeout(() => animate(), 500);
                return;
            }

            const op = animationQueue[0];
            const step = Math.min(1, (Date.now() - lastTime) / 100); // Time-based progress
            lastTime = Date.now();

            // --- Animation Logic ---
            let currentNodes = [...nodes];
            let prevNode = null;
            let currentArrowStart = { x: 0, y: 0 };

            ctx.clearRect(0, 0, W, H); // Clear for redraw

            // Step 1: Draw Nodes (pre-operation) and Setup Animation Targets
            const highlightIndices = [];
            if (op.type === 'insert') {
                highlightIndices.push(Math.max(0, op.pos - 1)); // Predecessor
                highlightIndices.push(Math.min(nodes.length, op.pos));    // New Node target
                highlightIndices.push(Math.min(nodes.length + 1, op.pos)); // Successor (if exists)
            } else if (op.type === 'delete') {
                 highlightIndices.push(Math.max(0, op.pos - 1)); // Predecessor
                 highlightIndices.push(Math.min(nodes.length, op.pos)); // Deleted Node
                 highlightIndices.push(Math.min(nodes.length + 1, op.pos)); // Successor
            }

            // Draw all nodes, highlighting affected ones
            for (let i = 0; i < currentNodes.length; i++) {
                const node = currentNodes[i];
                if (highlightIndices.includes(i)) {
                    drawNode(node, true); // Highlighted draw
                } else {
                    drawNode(node);
                }
            }

            // Step 2: Draw Animated Arrows
            for (let i = 0; i < currentNodes.length - 1; i++) {
                const start = currentNodes[i];
                const end = currentNodes[i+1];
                
                let pStart, pEnd, color = '#6699cc';

                // Check if this link is affected by the operation
                if (op.type === 'insert' && (i + 1) === op.pos) {
                    // Link before insertion point: Start -> New Node
                    pStart = currentNodes[i].x + currentNodes[i].width;
                    pEnd = nodes[i+1].x; // Target position of the new node
                    color = '#ffaa00';
                } else if (op.type === 'delete' && i + 1 === op.pos) {
                    // Link being deleted: Start -> Deleted Node
                    pStart = currentNodes[i].x + currentNodes[i].width;
                    pEnd = nodes[i+1].x; // Target position of the successor
                    color = '#ff4444'; // Red fade out effect
                } else {
                    // Normal link
                    pStart = start.x + start.width;
                    pEnd = end.x;
                }

                drawArrow(start, end, { 
                    startX: pStart, 
                    startY: start.y + start.height / 2, 
                    endX: pEnd, 
                    endY: end.y + end.height / 2, 
                    color: color 
                });
            }

            // Step 3: Apply the operation (if enough time has passed)
            const elapsed = Date.now() - startTime;
            let applyNow = false;
            if ((op.type === 'insert' && nodes.length < currentNodes.length + 1 && elapsed > 200) || 
                (op.type === 'delete' && nodes.length > currentNodes.length - 1 && elapsed > 200)) {
                    applyNow = true;
            }

            if (applyNow) {
                processOperation(op);
                animationQueue.shift(); // Operation processed, remove it
                // Reset start time to prevent immediate re-application
                startTime = Date.now(); 
            }

            requestAnimationFrame(animate);
        }

        let startTime;
        let lastTime = 0;

        // Initialization sequence
        init();
        setupList(Math.floor(Math.random() * (MAX_LENGTH - MIN_LENGTH + 1)) + MIN_LENGTH);

    </script>
</body>
</html>
```

gemma4:26bharness

No answer reached us (ERR) — and the reason lies with our setup, not with the model: reasoning consumed the entire token budget (3 min 28 s, zero characters of answer); larger budgets are refused by the gateway Counted as a did-not-finish, but it is not evidence about this model.

llama3.1:8bERRSTATFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Singly Linked List Animation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="listCanvas" width="600"></canvas>
    <script>
        const canvas = document.getElementById('listCanvas');
        const ctx = canvas.getContext('2d');
        let nodeList = [];
        let listLength = 0;
        let insertNodeIndex = Math.floor(Math.random() * (nodeList.length + 1));
        let deleteNodeIndex = -1;

        function Node(name) {
            this.name = name;
            this.prevArrowX = null;
            this.prevArrowY = null;
            this.newLine = false;
        }

        function drawNode(node, x, y) {
            ctx.fillStyle = 'lightgray';
            ctx.fillRect(x, y, 40, 20);
            ctx.fillStyle = 'black';
            ctx.font = '12px Arial';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            ctx.fillText(node.name, x + 5, y + 10);
        }

        function drawArrow(prevNode, node) {
            if (prevNode.newLine && node.newLine) return;
            let prevX = node.prevArrowX || (node.prevArrowY ? node.prevArrowY[0] : -1),
                prevY = node.prevArrowY || (node.prevArrowY ? node.prevArrowY[1] : -1);
            if (prevNode.newLine) {
                ctx.beginPath();
                ctx.moveTo(prevX + 20, prevY);
                ctx.lineTo(node.prevArrowY[0], node.prevArrowY[1]);
                ctx.stroke();
            } else if (node.newLine) {
                ctx.beginPath();
                ctx.moveTo(node.prevArrowX || -1, node.prevArrowY || -1);
                ctx.lineTo(prevNode.prevArrowX, prevNode.prevArrowY);
                ctx.stroke();
            } else {
                let angle = Math.atan2(prevX - node.prevArrowX, prevY - node.prevArrowY),
                    endX = node.prevArrowX + 20 * Math.cos(angle),
                    endY = node.prevArrowY + 20 * Math.sin(angle);
                ctx.beginPath();
                ctx.moveTo(node.prevArrowX, node.prevArrowY);
                ctx.lineTo(endX, endY);
                ctx.stroke();
            }
        }

        function animate() {
            if (nodeList.length > 10) nodeList.splice(0, Math.floor((nodeList.length - 1) / 2));
            else if (!nodeList[0]) {
                nodeList = [{ name: 'A' }];
                listLength = 1;
            }
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < nodeList.length; i++) {
                let node = nodeList[i];
                drawNode(node, 50 * i + 20, 100);
                if (node.newLine) {
                    drawArrow(null, node);
                } else if (i === insertNodeIndex) {
                    ctx.fillStyle = 'yellow';
                    ctx.fillRect(50 * i + 10, 90, 30, 20);
                }
            }
            for (let i = 0; i < nodeList.length - 1; i++) {
                drawArrow(nodeList[i], nodeList[i + 1]);
            }
            if (deleteNodeIndex !== -1) {
                let node = nodeList.splice(deleteNodeIndex, 1)[0];
                ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
                ctx.fillRect(50 * deleteNodeIndex + 10, 90, 30, 20);
                for (let i = 0; i < nodeList.length - 1; i++) {
                    let arrowX = null,
                        arrowY = null;
                    if (i === deleteNodeIndex) {
                        arrowX = (nodeList[deleteNodeIndex].prevArrowX || -1),
                            arrowY = (nodeList[deleteNodeIndex].prevArrowY || -1);
                        nodeList[i].prevArrowX = arrowX,
                            nodeList[i].prevArrowY = arrowY;
                    }
                    drawArrow(nodeList[i], nodeList[i + 1]);
                }
            } else if (insertNodeIndex !== Math.floor(Math.random() * (nodeList.length + 1))) {
                let prevNode = nodeList[insertNodeIndex - 1],
                    newNode = nodeList.splice(insertNodeIndex, 0, { name: String.fromCharCode('A'.charCodeAt(0) + insertNodeIndex) });
                ctx.fillStyle = 'yellow';
                ctx.fillRect(50 * (newNode.newLine ? insertNodeIndex : (insertNodeIndex - 1)) + 10, 90, 30, 20);
                prevNode.newLine = true;
                newNode.newLine = false;
                for (let i = 0; i < nodeList.length - 1; i++) {
                    let arrowX = null,
                        arrowY = null;
                    if (i === insertNodeIndex) {
                        arrowX = (prevNode.prevArrowX || -1),
                            arrowY = (prevNode.prevArrowY || -1);
                        prevNode.prevArrowX = arrowX,
                            prevNode.prevArrowY = arrowY;
                    } else if (insertNodeIndex <= i && i < insertNodeIndex + 2) {
                        let node = nodeList[i];
                        node.newLine = true;
                        node.prevArrowX = null,
                            node.prevArrowY = null;
                    }
                    drawArrow(nodeList[i], nodeList[i + 1]);
                }
            } else if (nodeList[0].prevArrowX === null || nodeList[0].prevArrowY === null) {
                let node = nodeList[0];
                ctx.fillStyle = 'yellow';
                ctx.fillRect(50 * insertNodeIndex + 10, 90, 30, 20);
                for (let i = 1; i < nodeList.length; i++) {
                    let arrowX = null,
                        arrowY = null;
                    if (i === insertNodeIndex - 1) {
                        arrowX = (node.prevArrowX || -1),
                            arrowY = (node.prevArrowY || -1);
                        node.prevArrowX = arrowX,
                            node.prevArrowY = arrowY;
                    }
                    drawArrow(nodeList[i - 1], nodeList[i]);
                }
            }
            ctx.font = '12px Arial';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            ctx.fillStyle = 'black';
            ctx.fillText('Length: ' + nodeList.length, canvas.width - 120, 20);
            deleteNodeIndex = Math.floor(Math.random() * (nodeList.length || 1));
            listLength = nodeList.length;
            if (!deleteNodeIndex) {
                insertNodeIndex = Math.floor(Math.random() * (nodeList.length + 1));
            }
        }

        function loop(timestamp) {
            animate();
            requestAnimationFrame(loop);
        }

        requestAnimationFrame(loop);

    </script>
</body>
</html>
```

mistral-small:24bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Linked List</title>
<style>
body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
canvas { border: 1px solid black; }
</style>
</head>
<body><canvas id="linkedListCanvas" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('linkedListCanvas');
const ctx = canvas.getContext('2d');

// Node class
class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
  }
}

// Linked List class
class LinkedList {
  constructor() {
    this.head = null;
    this.length = 0;
  }

  insertAtRandom(value) {
    const newNode = new Node(value);
    if (this.length === 0) {
      this.head = newNode;
    } else {
      let current = this.head;
      const randomIndex = Math.floor(Math.random() * (this.length + 1));
      for (let i = 0; i < randomIndex - 1; i++) {
        current = current.next;
      }
      newNode.next = current.next;
      current.next = newNode;
    }
    this.length++;
  }

  deleteAtRandom() {
    if (this.length === 0) return;
    let current = this.head;
    const randomIndex = Math.floor(Math.random() * this.length);
    for (let i = 0; i < randomIndex - 1; i++) {
      current = current.next;
    }
    if (randomIndex === 0) {
      this.head = current.next;
    } else {
      current.next = current.next.next;
    }
    this.length--;
  }

  reset() {
    this.head = null;
    this.length = 0;
  }

  getListLength() {
    return this.length;
  }

  toArray() {
    let arr = [];
    let current = this.head;
    while (current) {
      arr.push(current);
      current = current.next;
    }
    return arr;
  }
}

const linkedList = new LinkedList();
let animationFrameId;

function drawLinkedList(list) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  let nodes = list.toArray();
  const nodeWidth = 50;
  const nodeHeight = 30;
  const spacing = 60;
  let x = 10;
  let y = (canvas.height - nodeHeight) / 2;

  ctx.font = '14px Arial';
  for (let i = 0; i < nodes.length; i++) {
    if (nodes[i] === list.head) {
      ctx.fillStyle = 'red';
    } else {
      ctx.fillStyle = 'white';
    }
    ctx.fillRect(x, y - nodeHeight / 2, nodeWidth, nodeHeight);
    ctx.strokeRect(x, y - nodeHeight / 2, nodeWidth, nodeHeight);

    ctx.fillStyle = 'black';
    if (nodes[i] === list.head) {
      ctx.beginPath();
      ctx.arc(x + nodeWidth / 2, y - nodeHeight - 10, 5, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.fillText(nodes[i].value, x + 10, y + 5);

    if (i < nodes.length - 1) {
      const nextX = x + nodeWidth;
      const nextY = y;

      ctx.beginPath();
      ctx.moveTo(nextX, nextY);
      ctx.lineTo(nextX + spacing / 2, nextY);
      ctx.stroke();

      ctx.beginPath();
      ctx.arc(x + nodeWidth, y, 5, 0, Math.PI * 2);
      ctx.fillStyle = 'black';
      ctx.fill();
    }

    x += nodeWidth + spacing;
  }
}

function animateLinkedList() {
  function insertAnimation() {
    const value = Math.floor(Math.random() * 100);
    let current = linkedList.head;
    const randomIndex = Math.floor(Math.random() * (linkedList.length + 1));
    for (let i = 0; i < randomIndex - 1; i++) {
      current = current.next;
    }
    const newNode = new Node(value);
    newNode.next = current.next;
    current.next = newNode;
    linkedList.length++;
    drawLinkedList(linkedList);
    requestAnimationFrame(() => animateLinkedList());
  }

  function deleteAnimation() {
    let current = linkedList.head;
    const randomIndex = Math.floor(Math.random() * linkedList.length);
    for (let i = 0; i < randomIndex - 1; i++) {
      current = current.next;
    }
    if (randomIndex === 0) {
      linkedList.head = current.next;
    } else {
      current.next = current.next.next;
    }
    linkedList.length--;
    drawLinkedList(linkedList);
    requestAnimationFrame(() => animateLinkedList());
  }

  function resetAnimation() {
    linkedList.reset();
    let value = Math.floor(Math.random() * 100);
    linkedList.insertAtRandom(value);
    value = Math.floor(Math.random() * 100);
    linkedList.insertAtRandom(value);
    drawLinkedList(linkedList);
    requestAnimationFrame(() => animateLinkedList());
  }

  if (linkedList.length === 0) {
    resetAnimation();
  } else if (Math.random() < 0.5 && linkedList.length > 6 || Math.random()>0.5&&linkedList.length<1) {
    deleteAnimation();
  } else {
    insertAnimation();
  }

}

animationFrameId = requestAnimationFrame(() => animateLinkedList());
</script>
</body>
</html>
```

qwen3.5:9bSTATLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html>
<head>
<title>Animated Linked List</title>
<style>body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; color: #eee;} #canvasContainer {border: 1px solid #444;}</style>
</head>
<body>
<div id="canvasContainer" style="width: 95%; max-width: 1000px;">
<canvas id="listCanvas"></canvas></div>

<script>
const canvas = document.getElementById('listCanvas');
const ctx = canvas.getContext('2d');

let L;
let HEAD_NODE;
let NODE_WIDTH = 80;
let NODE_HEIGHT = 40;
let SPACING = 30;
let CANVAS_WIDTH, CANVAS_HEIGHT;

class Node {
    constructor(value) {
        this.value = value;
        this.next = null;
        this.x = 0;
        this.y = 0;
    }
}

class LinkedList {
    constructor() {
        this.head = null;
        this.length = 0;
        this.animationState = { active: false, targetX: 0, targetY: 0, currentX: 0, currentY: 0 };
        this.highlighting = []; // Stores nodes/indices to highlight
    }

    reset(initialLength = 5) {
        this.head = null;
        this.length = 0;
        for (let i = 0; i < initialLength; i++) {
            this.append(i + 1);
        }
        this.animationState = { active: false, targetX: 0, targetY: 0, currentX: 0, currentY: 0 };
    }

    _getNodePositions() {
        let current = this.head;
        let nodes = [];
        let xOffset = SPACING / 2;
        while (current) {
            current.x = xOffset;
            current.y = NODE_HEIGHT / 2;
            nodes.push(current);
            current = current.next;
            xOffset += NODE_WIDTH + SPACING;
        }
        return nodes;
    }

    append(value) {
        const newNode = new Node(value);
        if (!this.head) {
            this.head = newNode;
        } else {
            let current = this.head;
            while (current.next) {
                current = current.next;
            }
            current.next = newNode;
        }
        this.length++;
    }

    insertAt(index, value) {
        if (index < 0 || index > this.length) return false;

        const newNode = new Node(value);
        let current = this.head;
        for (let i = 0; i < index - 1 && current; i++) {
            current = current.next;
        }
        if (!current) return false; // Index too far

        newNode.next = current.next;
        current.next = newNode;
        this.length++;
        return true;
    }

    deleteAt(index) {
        if (index < 0 || index >= this.length) return null;

        let prev = null;
        let current = this.head;
        for (let i = 0; i < index && current; i++) {
            prev = current;
            current = current.next;
        }

        if (!current) return null; // Should not happen if length check passes

        const deletedNodeValue = current.value;
        if (prev) {
            prev.next = current.next;
        } else {
            this.head = current.next;
        }
        current.next = null; // Isolate node
        this.length--;
        return deletedNodeValue;
    }

    // --- Animation Helpers ---
    startAnimation(target_x, target_y) {
        this.animationState = { active: true, targetX: target_x, targetY: target_y, currentX: this.getNodes()[0]?.x || 0, currentY: this.getNodes()[0]?.y || 0 };
    }

    isAnimating() {
        return this.animationState.active;
    }

    updateAnimation(time) {
        if (!this.isAnimating()) return false;

        const state = this.animationState;
        const progress = (time - state.startTime) / 500; // Target duration: 500ms

        state.currentX = state.currentX + (state.targetX - state.currentX) * 0.1;
        state.currentY = state.currentY + (state.targetY - state.currentY) * 0.1;

        if (progress >= 1) {
            this.animationState.active = false;
            return true; // Animation finished
        }
        return false; // Still running
    }
    
    getNodes() {
        let current = this.head;
        let nodes = [];
        let xOffset = SPACING / 2;
        while (current) {
            const nodeCopy = { value: current.value, next: current.next, x: xOffset, y: NODE_HEIGHT/2 };
            nodes.push(nodeCopy);
            current = current.next;
            xOffset += NODE_WIDTH + SPACING;
        }
        return nodes;
    }

    draw() {
        ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        const nodes = this.getNodes();

        // Draw connections (arrows)
        for (let i = 0; i < nodes.length - 1; i++) {
            const n1 = nodes[i];
            const n2 = nodes[i+1];

            ctx.beginPath();
            ctx.moveTo(n1.x + NODE_WIDTH / 2, n1.y);
            ctx.lineTo(n2.x - NODE_WIDTH / 2, n2.y);
            ctx.strokeStyle = '#aaa';
            ctx.lineWidth = 2;
            ctx.stroke();

            // Draw arrow head (simplified)
            ctx.fillStyle = '#aaa';
            ctx.beginPath();
            ctx.moveTo(n2.x - NODE_WIDTH / 2, n2.y);
            ctx.lineTo(n2.x - NODE_WIDTH / 2 + 8, n2.y - 4);
            ctx.lineTo(n2.x - NODE_WIDTH / 2 + 8, n2.y + 4);
            ctx.fill();
        }

        // Draw nodes
        for (let i = 0; i < nodes.length; i++) {
            const node = nodes[i];
            let highlightColor = 'rgba(150, 150, 255, 0.3)';
            if (this.highlighting.includes(i)) {
                highlightColor = '#888'; // Highlighted state
            }

            // Draw node background
            ctx.fillStyle = highlightColor;
            ctx.fillRect(node.x - 10, node.y - NODE_HEIGHT / 2, NODE_WIDTH + 20, NODE_HEIGHT);
            ctx.strokeStyle = '#555';
            ctx.strokeRect(node.x - 10, node.y - NODE_HEIGHT / 2, NODE_WIDTH + 20, NODE_HEIGHT);

            // Draw value text
            ctx.fillStyle = '#fff';
            ctx.font = '16px Arial';
            ctx.fillText(`(${node.value})`, node.x, node.y + 5);

            // Draw Head marker on the first node only
            if (i === 0 && this.head) {
                ctx.fillStyle = '#ff4d4d';
                ctx.beginPath();
                ctx.arc(node.x - 10, node.y - NODE_HEIGHT / 2, 5, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // Draw animation marker (if animating)
        if (this.isAnimating()) {
             const state = this.animationState;
             ctx.fillStyle = 'rgba(255, 100, 0, 0.8)';
             ctx.beginPath();
             ctx.arc(state.currentX - 10, state.currentY, 6, 0, Math.PI * 2);
             ctx.fill();
        }
    }
}

const list = new LinkedList();

function setupCanvas() {
    CANVAS_WIDTH = document.getElementById('canvasContainer').clientWidth;
    CANVAS_HEIGHT = 150;
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;
}

function randomizeOperation() {
    // Check list length limits
    if (list.length === 0) return 'INIT';
    if (list.length > 12) {
        alert("List too long! Resetting.");
        window.location.reload(); // Simple reset mechanism
        return null;
    }

    const op = Math.random() < 0.5 ? 'INSERT' : 'DELETE';
    let index, value;

    if (op === 'INSERT') {
        // Insert at random position [0, length]
        index = Math.floor(Math.random() * (list.length + 1));
        value = Math.floor(Math.random() * 99) + 1;
        return { type: 'INSERT', index: index, value: value };
    } else {
        // Delete at random position [0, length-1]
        index = Math.floor(Math.random() * list.length);
        return { type: 'DELETE', index: index };
    }
}

async function performOperation(op) {
    if (!op) return;

    const { type, index, value } = op;

    // 1. Highlight neighbors (Pre-animation state)
    list.highlighting = [];
    for (let i = Math.max(0, index - 1); i <= Math.min(list.length - 1, index + 1); i++) {
        list.highlighting.push(i);
    }

    // Wait for the highlight to be visible
    await new Promise(resolve => setTimeout(resolve, 50));
    list.draw();

    let success = false;
    if (type === 'INSERT') {
        success = list.insertAt(index, value);
    } else if (type === 'DELETE') {
        const deletedValue = list.deleteAt(index);
        // If successful deletion occurred, we will animate the link change
        if (deletedValue !== null) {
           window.animationContext = { success: true, type: 'DELETE', index: index };
        } else {
            success = false; // Should not happen if random logic is correct
        }
    }

    // 2. Execute the operation and prepare animation data
    if (success) {
        if (type === 'INSERT') {
             // Inserted node's index is `index` after insertion
            window.animationContext = { success: true, type: 'INSERT', oldIndex: Math.min(index, list.length), newIndex: index };
        } else if (type === 'DELETE') {
           // Already set in the block above
        }

    } else {
         list.highlighting = []; // Clear highlight on failure 
         await new Promise(resolve => setTimeout(resolve, 50));
    }
}


function animateTransition() {
    if (!window.animationContext || !window.animationContext.success) {
        // If we aren't animating or the operation failed, just draw the static state and return
        list.highlighting = [];
        list.draw();
        return;
    }

    const ctx = window.ctx;
    const nodes = list.getNodes();
    const context = window.animationContext;

    // Reset animation phase highlight
    list.highlighting = []; 
    list.draw();

    let finished = false;

    if (context.type === 'DELETE') {
        const deletedOldValue = context.deletedValue;
        const deleteIndex = context.index;

        // Simulate the deletion visual effect
        ctx.fillStyle = 'rgba(255, 0, 0, 0.6)';
        ctx.fillRect(nodes[deleteIndex].x - 10, nodes[deleteIndex].y - NODE_HEIGHT / 2 + (list.length * 0.1), NODE_WIDTH + 20, NODE_HEIGHT);

        // The arrow connecting prev -> next must swing over the space where the node was
        const prevNode = nodes[deleteIndex - 1];
        if (prevNode) {
            ctx.strokeStyle = '#ff4d4d';
            ctx.lineWidth = 3;
            ctx.beginPath();
            // Start at center of previous node
            ctx.moveTo(prevNode.x + NODE_WIDTH / 2, prevNode.y);
            // Swing over the deleted spot to connect directly to next
            const nextNode = nodes[deleteIndex + 1];
            if (nextNode) {
                 ctx.lineTo(nextNode.x - NODE_WIDTH / 2, nextNode.y);
                 ctx.stroke();
            } else {
                // If deleting the last node, just draw it fading away from the prev node
                ctx.lineTo(prevNode.x + NODE_WIDTH / 2 + (NODE_WIDTH + SPACING), prevNode.y);
                ctx.stroke();
            }
        }

    } else if (context.type === 'INSERT') {
        const insertIndex = context.newIndex;
        const oldIndex = context.oldIndex;
        const newNode = nodes[insertIndex];

        // 1. Draw the original connection that is now broken/re-routed (at oldIndex -> next)
        const prevNode = oldIndex > 0 ? nodes[Math.max(0, oldIndex - 1)] : null;
        if (prevNode) {
             ctx.strokeStyle = '#ff4d4d'; // Red for attention/change
             ctx.lineWidth = 3;
             // Draw the arrow from prev to new target point (the spot before the inserted node)
             ctx.beginPath();
             ctx.moveTo(prevNode.x + NODE_WIDTH / 2, prevNode.y);
             ctx.lineTo(newNode.x - NODE_WIDTH / 2, newNode.y); // Target is the new node's start point
             ctx.stroke();

        } else if (oldIndex === 0 && nodes.length > 1) {
            // Inserting at head: nothing to reroute from
        }


        // 2. Draw the new connection (prev -> new node)
        if (prevNode) {
             ctx.strokeStyle = '#4dff4d'; // Green for successful link
             ctx.lineWidth = 3;
             ctx.beginPath();
             ctx.moveTo(prevNode.x + NODE_WIDTH / 2, prevNode.y);
             ctx.lineTo(newNode.x - NODE_WIDTH / 2, newNode.y);
             ctx.stroke();
        }

        // 3. Draw the new connection (new node -> next)
         const nextNode = nodes[insertIndex + 1];
         if (nextNode) {
            ctx.strokeStyle = '#4dff4d'; // Green for successful link
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(newNode.x + NODE_WIDTH / 2, newNode.y);
            ctx.lineTo(nextNode.x - NODE_WIDTH / 2, nextNode.y);
             ctx.stroke();
         }
    }

    // Check if the animation is complete
    if (finished) {
        window.animationContext = null; // Clear context after drawing final state
        list.draw(); // Final clean draw
        setTimeout(() => {
            if(window.intervalId) clearInterval(window.intervalId);
            const nextOp = randomizeOperation();
            performOperation(nextOp);
        }, 500); // Wait half a second after animation before starting the next one

    } else {
        // Continue animation loop
        requestAnimationFrame(() => animateTransition());
    }
}


function loop(time) {
    if (!window.animationContext || !window.animationContext.success) {
        list.draw();
    }
    animateTransition();
}

// --- Initialization and Loop Start ---
window.onload = () => {
    setupCanvas();
    list.reset(5);
    window.ctx = ctx; // Store context for animation phase access

    window.animationContext = null;
    requestAnimationFrame(loop);
};

</script>
</body>
</html>
```

qwen3:14bERRBLANKLIMFORMAT

Show code

```html
<!DOCTYPE html>
<html><head><title>Linked List Animation</title><style>body{margin:0;background:#111;display:flex;justify-content:center;align-items:center;height:100vh}canvas{border:1px solid #333;}</style></head><body onload="init()"><canvas id="canvas" width="960" height="400"></canvas><script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let list = null;
let animationCycleRunning = false;
let currentOperation = null; // {type: 'insert'/'delete', pos: N, old_next: ..., new_target: ...}
let step = 0;

const NODE_W = 150;
const NODE_H = 60;
const SPACING = 30;
const MAX_NODES = 8;
const MIN_NODES = 2;

class Node {
    constructor(data, next=null) {
        this.data = data;
        this.next = next;
        this.x = 0; // Calculated position
        this.y = 0;
        this.highlight = false;
        this.is_deleted = false;
    }
}

class LinkedList {
    constructor() {
        this.head = null;
        this.length = 0;
    }

    isEmpty() { return this.head === null; }
    get length() { return this._length; }
    _length = 0;

    append(data) {
        const newNode = new Node(data);
        if (this.isEmpty()) {
            this.head = newNode;
        } else {
            let current = this.traverse();
            while (current.next) {
                current = current.next;
            }
            current.next = newNode;
        }
        this._length++;
    }

    insert(pos, data) {
        if (pos < 0 || pos > this.length) return null;
        const newNode = new Node(data);
        
        let current = this.head;
        let prev = null;
        for(let i=0; i<pos; i++) {
            prev = current;
            current = current.next;
        }

        if (pos === 0) {
            newNode.next = this.head;
            this.head = newNode;
        } else if (current) {
            newNode.next = current.next;
            current.next = newNode;
        } else { // Insert at end
            prev.next = newNode;
        }
        this._length++;
        return newNode;
    }

    delete(pos) {
        if (pos < 0 || pos >= this.length) return null;

        let nodeToDelete = this.head;
        let prev = null;
        for(let i=0; i<pos; i++) {
            prev = nodeToDelete;
            nodeToDelete = nodeToDelete.next;
        }

        if (pos === 0) {
            this.head = nodeToDelete.next;
        } else if (prev && nodeToDelete) {
            prev.next = nodeToDelete.next;
        }
        this._length--;
        return nodeToDelete;
    }
    
    traverse() {
        let current = this.head;
        while(current) {
            current = current.next;
        }
        return null;
    }
}

function setupList() {
    list = new LinkedList();
    const initialLength = Math.floor(Math.random() * 5) + 2;
    for (let i = 1; i <= initialLength; i++) {
        list.append(`N${i}`);
    }
}

function calculatePositions() {
    if (!list || !list.head) return [];
    
    let current = list.head;
    const positions = [];
    let x_offset = 0;
    let row = 0;
    const max_rows = Math.ceil((NODE_W + SPACING) * list.length / canvas.width);

    while (current) {
        // Simple single-row wrap simulation for visualization
        if (!positions[current.data]) positions[current.data] = {x: 0, y: 0};
        
        let i = positions[current.data].count || 0;
        
        // Calculate position based on index (simple linear layout)
        const x_pos = (i % Math.floor(canvas.width / (NODE_W + SPACING)) * (NODE_W + SPACING)) + SPACING/2;
        const y_pos = Math.floor(i / Math.floor(canvas.width / (NODE_W + SPACING))) * (NODE_H + SPACING) + SPACING/2;

        current.x = x_pos;
        current.y = y_pos;
        positions[current.data] = {count: i + 1, x: x_pos, y: y_pos};
        current = current.next;
    }
}

function drawNode(node) {
    ctx.save();
    ctx.beginPath();
    let color = node.highlight ? '#FFD700' : (node.is_deleted ? 'rgba(255, 0, 0, 0)' : '#4CAF50');
    ctx.fillStyle = color;
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;

    if (!node.is_deleted) {
        ctx.rect(node.x - NODE_W / 2, node.y - NODE_H / 2, NODE_W, NODE_H);
        ctx.fill();
        ctx.stroke();
    } else {
        // Fade out effect for deleted nodes
        let alpha = 1 - (step % 30) / 30; // Fades over 30 frames
        if (alpha > 0.1) {
            ctx.globalAlpha = alpha;
            ctx.rect(node.x - NODE_W / 2, node.y - NODE_H / 2, NODE_W, NODE_H);
            ctx.fillStyle = 'rgba(255, 0, 0, 0)'; // Visually fading color
            ctx.fill();
        } else {
             ctx.globalAlpha = 0; // Fully invisible after fade cycle
        }
    }

    // Label
    ctx.fillStyle = '#FFF';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(node.data, node.x, node.y);

    // Head Marker
    if (node === list.head && !node.is_deleted) {
        ctx.fillStyle = '#FFD700';
        ctx.beginPath();
        ctx.arc(node.x + NODE_W/2, node.y - 15, 8, 0, Math.PI * 2);
        ctx.fill();
    }

    ctx.restore();
}

function drawArrow(prevNode, nextNode) {
    if (!prevNode || !nextNode) return;
    
    // Use the current calculated positions (x, y)
    const startX = prevNode.x + NODE_W / 2;
    const startY = prevNode.y;
    const endX = nextNode.x - NODE_W / 2;
    const endY = nextNode.y;

    ctx.strokeStyle = '#333';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();

    // Arrowhead calculation (simplified)
    const angle = Math.atan2(endy - startY, endX - startX);
    const headSize = 10;
    ctx.fillStyle = '#333';
    ctx.beginPath();
    ctx.moveTo(endX, endY);
    ctx.lineTo(endX - headSize * Math.cos(angle - Math.PI/6), endY - headSize * Math.sin(angle - Math.PI/6));
    ctx.lineTo(endX - headSize * Math.cos(angle + Math.PI/6), endY - headSize * Math.sin(angle + Math.PI/6));
    ctx.closePath();
    ctx.fill();
}

function drawList() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    let current = list.head;
    while (current) {
        drawNode(current);
        if (current.next) {
            drawArrow(current, current.next);
        }
        current = current.next;
    }

    // Display Length
    ctx.fillStyle = '#FFF';
    ctx.font = '20px Arial';
    ctx.fillText(`List Length: ${list ? list.length : 0}`, 10, 30);
}

function updateVisualization() {
    if (!currentOperation) {
        drawList();
        return;
    }
    
    let op = currentOperation;
    step++;

    // --- Deletion Animation Logic ---
    if (op.type === 'delete') {
        const deletedNode = op.deleted_node;
        const prevNode = op.prev_node;
        const nextNode = op.next_node;
        
        drawList(); // Draw existing nodes including faded target
        
        // Redraw the arrow from P -> N (the jump) if it exists
        if (prevNode && nextNode) {
            // Temporarily set position for clean drawing of swinging arrow path
            const startX = prevNode.x + NODE_W / 2;
            const startY = prevNode.y;
            const endX = nextNode.x - NODE_W / 2;
            const endY = nextNode.y;

            // Simplified interpolation for the swing path (linear transition)
            ctx.strokeStyle = '#FF4500'; // Orange/Red highlight color
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();
        }

        // Handle fade-out and final state cleanup
        if (step > 60) { // Fade out duration (e.g., 2 seconds at 30fps/frame rate)
             list = new LinkedList(); // Reset the list structure completely for simplicity in this constrained environment
             setupList(); 
             currentOperation = null;
             return;
        }

    } 
    // --- Insertion Animation Logic ---
    else if (op.type === 'insert') {
        const prevNode = op.prev_node;
        const newNode = op.inserted_node;
        const nextNode = op.next_node;

        drawList(); // Draw existing nodes

        // 1. Visualize P -> N swing: Redraw arrow from Prev to New (Temporary)
        if (prevNode && newNode) {
            ctx.strokeStyle = '#00BFFF'; // Blue highlight color
            ctx.lineWidth = 3;
            ctx.beginPath();
            const startX = prevNode.x + NODE_W / 2;
            const startY = prevNode.y;
            const endX = newNode.x - NODE_W / 2;
            const endY = newNode.y;
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();
        }

        // 2. Visualize N -> Next swing: Redraw arrow from New to Next (Temporary)
        if (newNode && nextNode) {
             ctx.strokeStyle = '#00CED1'; // Teal highlight color
             ctx.lineWidth = 3;
            ctx.beginPath();
            const startX = newNode.x + NODE_W / 2;
            const startY = newNode.y;
            const endX = nextNode.x - NODE_W / 2;
            const endY = nextNode.y;
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();

        }
        
        // Successful animation phase (after enough steps)
        if (step > 15) {
             currentOperation = null; // Operation complete
        }
    } else {
         drawList();
    }
}


function runOperation() {
    if (!list || list.length === 0) return;

    // Determine operation type and position
    const opType = Math.random() < 0.5 ? 'insert' : 'delete';
    let pos;
    
    if (opType === 'delete') {
        pos = Math.floor(Math.random() * list.length);
        currentOperation = { type: 'delete', pos: pos };
    } else { // insert
        // Insert at random position, ensuring it's within bounds [0, length]
        pos = Math.floor(Math.random() * (list.length + 1));
        currentOperation = { type: 'insert', pos: pos };
    }

    // Step 1: Calculate the state BEFORE modification to capture necessary references for animation visualization
    let prevNode, nextNode, deletedNode, newNode;

    if (opType === 'delete') {
        deletedNode = list.delete(pos);
        if (!deletedNode) return; // Safety check
        
        // Find the node before deletion point
        prevNode = list.head;
        for(let i=0; i < pos - 1 && prevNode; i++) {
            prevNode = prevNode.next;
        }

        // Find the node after deletion point (which is now linked to prev)
        nextNode = prevNode ? prevNode.next : list.head;
        
        currentOperation.prev_node = prevNode;
        currentOperation.deleted_node = deletedNode;
        currentOperation.next_node = nextNode;

    } else { // insert
        const data = `N${Math.random().toString(36).substring(2, 5)}`;
        newNode = list.insert(pos, data);

        // Find references for animation visualization
        prevNode = list.head;
        for(let i=0; i < pos && prevNode; i++) {
            prevNode = prevNode.next;
        }
        nextNode = prevNode ? prevNode.next : null;

        currentOperation.prev_node = prevNode;
        currentOperation.inserted_node = newNode;
        currentOperation.next_node = nextNode;
    }
    
    // Step 2: Recalculate positions and update node references for the *new* state
    calculatePositions();

    // Special handling needed for visualization continuity (e.g., ensuring deleted/inserted nodes are visible during animation)
    if (opType === 'delete') {
        deletedNode.highlight = true; // Keep it drawn but faded
    } else {
         newNode.highlight = true; 
    }

    step = 0; // Reset step counter for the animation phase
}


function animate(timestamp) {
    if (!animationCycleRunning && !currentOperation) {
        // If we are idle and list is small/empty, reset or wait
        if (list.length < MIN_NODES || list.length === 0 ) {
             setupList();
        }
    }

    updateVisualization();
    requestAnimationFrame(animate);
}


function init() {
    setupList();
    animationCycleRunning = true;
    setInterval(() => {
        if (list.length >= MAX_NODES || list.length <= 0) {
            setupList(); // Reset if full or empty
        }
        runOperation();
    }, Math.random() * 1500 + 500); // Run an operation every 0.5s to 2s

    requestAnimationFrame(animate);
}
</script></body></html>
```

deepseek-r1:14bBLANKFORMAT

Show code

```html
<!DOCTYPE html>
<html><body style="background:#111;color:#fff; display:flex; flex-direction:column; align-items:center;gap:20px;margin:0;padding:0;">
<canvas id=c width=800 height=400></canvas>
<div id=l>Length: 0</div>
<script>
const c=document.getElementById('c'), ctx=c.getContext('2d'), list=[], lenElement=document.getElementById('l');
let width=800, height=400, nodeRadius=35, arrowWidth=15, nodeList=[], currentX=50;
function Node(v) { this.value=v; this.next=null; this.x=this.y=0; }
function init() {
  list.length=0;
  nodeList=[];
  currentX=50;
}
function createNode() { return new Node(Math.floor(Math.random()*10)+1); }
function drawList() {
  function drawArrow(x,y,x2,y2) {
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x2,y2);
    ctx.strokeStyle='#fff';
    ctx.lineWidth=arrowWidth;
    ctx.stroke();
  }
  function drawNode(x,y, highlighted=false) {
    ctx.beginPath();
    ctx.arc(x,y,nodeRadius,0,Math.PI*2);
    ctx.fillStyle=highlighted?'#ff0000':'#333';
    ctx.fill();
    ctx.strokeStyle='#fff';
    ctx.lineWidth=4;
    ctx.stroke();
    ctx.font='15px Arial';
    ctx.fillStyle='#fff';
    ctx.textAlign='center';
    ctx.fillText(nodeList.length>0? nodeList.findIndex(n=>n.x==x).value : '', x, y+nodeRadius/2);
  }
  c.width=width;c.height=height;
  ctx.clearRect(0,0,width,height);
  if(!list.length&&!nodeList.length) return;
  let maxX=0, minX=currentX, nodes=nodeList.slice().sort((a,b)=>a.x - b.x).filter(n=>n.next||!list.includes(n.value));
  for(let i=0;i<nodes.length-1;i++) {
    drawArrow(nodes[i].x+nodeRadius/2, nodes[i].y, nodes[i+1].x-nodeRadius/2, nodes[i+1].y);
  }
  nodes.forEach(n => {
    if(list.includes(n.value)) drawNode(n.x,n.y, n===nodes[0]);
  });
}
function animateInsert(oldX, oldY, newX, newY) {
  let step=0; 
  const increment=2;
  function update() {
    if(step>100) {step=0;return;}
    ctx.clearRect(0,0,width,height);
    drawNode(newX,newY,true);drawNode(oldX,oldY,true);
    drawArrow(oldX+nodeRadius/2, oldY, newX-nodeRadius/2, newY);
    step+=increment;
  }
  const animation= requestAnimationFrame(function animate() {
    update();
    if(step<=100) requestAnimationFrame(animate);
  });
}
function insertNode() {
  let pos=Math.floor(Math.random()*list.length);
  let newNode=createNode();
  list.splice(pos,0,newNode.value);
  initNodes();
  drawList();
}
function deleteNode() {
  if(list.length==0)return;
  let pos=Math.floor(Math.random()*list.length);
  list.splice(pos,1);
  initNodes();
  drawList();
}
function initNodes() {
  nodeList=[];currentX=50;
  for(let i=0;i<list.length;i++) {
    nodeList.push({x:currentX,y:height/2});
    currentX+=nodeRadius*2+40;
  }
}
function updateList() {
  if(Math.random()<0.5)insertNode();else deleteNode();
  lenElement.textContent='Length: '+list.length;
  drawList();
}
init();
setInterval(updateList,2500);
setInterval(drawList,100);
</script>
</body></html>
```

qwq:32bDNF

No usable answer reached the harness (ERR). Counted as a did-not-finish.

command-r:35bDNF

No usable answer reached the harness (ERR). Counted as a did-not-finish.

deepseek-r1:32bOKFORMAT

Show code

```html
<!DOCTYPE html>
<html><body style="background:#1a1a1a;color:white;margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;">
<canvas id=c width=640 height=320></canvas>
<div id=l>Length: 0</div>
<script>
let canvas=c.getContext("2d"),nodes=[],head=null,animating=false,lengthEl=document.getElementById('l'),width=canvas.canvas.width,height=canvas.canvas.height,gap=50,minX=100,minY=160,inserting=true;

class Node{
constructor(value=parseInt(Math.random()*10),x=minX,y=minY){
this.value=value;
this.next=null;
this.x=x;
this.y=y;
this.width=40;
this.height=30;
}
draw(){
canvas.fillStyle='blue';
if(nodes.includes(this)) canvas.fillStyle='blue';
else if(head===null||head!==this) canvas.fillStyle='#1a1a1a';
else canvas.fillStyle='red';
canvas.fillRect(this.x,this.y,this.width,this.height);
canvas.fillStyle='white';
canvas.font='20px Arial';
canvas.fillText(this.value,this.x+15,this.y+23);
}
}

function connect(a,b){
if(!a||!b) return;
let ax=a.x+a.width,ay=a.y+a.height/2;
let bx=b.x+b.width/4,by=b.y+b.height/2;
canvas.beginPath();
canvas.moveTo(ax,ay);
canvas.lineTo(bx,by);
canvas.strokeStyle='white';
canvas.stroke();
}

function drawAll(){
canvas.clearRect(0,0,width,height);
nodes.forEach(node=>node.draw());
nodes.forEach((n,i)=>connect(n,n.next));
lengthEl.textContent=`Length: ${nodes.length}`;
}

function insertAfter(prevNode){
if(nodes.length>20) reset();
let newNode=new Node();
newNode.x=prevNode.x+gap;
newNode.y=minY;
nodes.push(newNode);
inserting=true;
animateInsert(prevNode,newNode,0);
}

function deleteRandom(){
let node=nodes[Math.floor(Math.random()*nodes.length)];
if(node===head){
head=head.next;
nodes.shift();
animateDelete(node,0);
}
else{
let prev=findPrevious(node);
prev.next=node.next;
nodes.splice(nodes.indexOf(node),1);
animateDelete(node,0);
}
}

function findPrevious(node){
return nodes.find(n=>n.next===node);
}

function reset(){
nodes=[];
head=null;
for(let i=0;i<Math.floor(Math.random()*5)+3;i++){
let node=new Node();
node.x=minX+i*gap;
node.y=minY;
nodes.push(node);
}
if(nodes.length>0){
head=nodes[0];
for(let i=0;i<nodes.length-1;i++) nodes[i].next=nodes[i+1];
}
drawAll();
}

function animateInsert(prev,newNode,time=0){
if(time>1000) return;
prev.next=newNode;
newNode.next=prev.next.next||null;
let targetX=prev.x+gap;
let currentX=prev.x+(targetX-prev.x)*(time/1000);
canvas.clearRect(0,0,width,height);
nodes.forEach(node=>node.draw());
connect(prev,prev.next.next);
connect(prev,newNode);
newNode.x=currentX;
requestAnimationFrame(()=>animateInsert(prev,newNode,time+16));
}

function animateDelete(node,time=0){
if(time>1000) return;
node.alpha=(1-time/1000);
canvas.clearRect(0,0,width,height);
nodes.forEach(n=>n.draw());
connect(findPrevious(node),node.next);
requestAnimationFrame(()=>animateDelete(node,time+16));
}

function mainLoop(){
drawAll();
if(nodes.length<20&&Math.random()<0.05) insertAfter(nodes[Math.floor(Math.random()*nodes.length)]);
else if(nodes.length>0&&Math.random()<0.03) deleteRandom();
}

reset();
setInterval(mainLoop,100);
</script>
```

Outside the Brain cluster — same task, same character budget, collected through their own tooling (response times not comparable)

Claude Opus 5frontier referenceOK

Show code

<meta charset="utf-8"><title>Singly Linked List Animation</title>
<style>html,body{margin:0;height:100%;background:#080c1a;display:grid;place-items:center;font-family:system-ui,sans-serif}canvas{max-width:97vw;border-radius:14px;box-shadow:0 12px 50px #000a}</style>
<canvas id=c width=920 height=440></canvas>
<script>
const c=document.getElementById('c'),g=c.getContext('2d'),W=920,H=440,BW=86,BH=46,GX=52,GY=96,M=40,TOP=155;
let ns=[],ph='idle',t=0,op=null,msg='',pt=0;
const R=n=>Math.floor(Math.random()*n);
function mk(v,x,y){return{v:v,x:x,y:y,tx:x,ty:y,ax:x,ay:y,s:0,h:0,hT:0,k:0,f:1,nw:0}}
function pr(){return Math.max(1,Math.floor((W-2*M+GX)/(BW+GX)))}
function lay(sn){const p=pr();ns.forEach((n,i)=>{n.tx=M+(i%p)*(BW+GX)+BW/2;n.ty=TOP+((i/p)|0)*GY;if(sn){n.x=n.tx;n.y=n.ty;n.s=1;n.ax=n.tx+BW/2+30;n.ay=n.ty}})}
function reset(){ns=[];const k=3+R(3);for(let i=0;i<k;i++)ns.push(mk(10+R(89),W/2,TOP));lay(1);msg='fresh random list';ph='idle';t=0}
function succ(i){for(let j=i+1;j<ns.length;j++)if(!ns[j].k)return ns[j];return null}
function step(dt){
t+=dt;
if(ph=='idle'&&t>.8){const L=ns.length;
 if(L==0||L>9){reset()}else{
  ns.forEach(n=>n.hT=0);
  if(L<4?1:(L>7?0:R(2))){const p=R(L+1);if(p>0)ns[p-1].hT=1;if(p<L)ns[p].hT=1;op={i:p,ins:1};msg='insert at index '+p}
  else{const p=R(L);if(p>0)ns[p-1].hT=1;ns[p].hT=1;if(p+1<L)ns[p+1].hT=1;op={i:p,ins:0};msg='delete index '+p}
  ph='hl';t=0}}
else if(ph=='hl'&&t>.85){
 if(op.ins){const a=ns[op.i>0?op.i-1:0];const n=mk(10+R(89),a.x,a.y);n.nw=1;n.hT=1;ns.splice(op.i,0,n);msg='rewiring pointer to new node'}
 else{ns[op.i].k=1;msg='unlinking node, pointer swings past'}
 lay(0);ph='act';t=0}
else if(ph=='act'&&t>1.25){ns=ns.filter(n=>!n.k);ns.forEach(n=>{n.hT=0;n.nw=0});lay(0);ph='idle';t=0;msg='list length '+ns.length}
ns.forEach(n=>{n.x+=(n.tx-n.x)*.14;n.y+=(n.ty-n.y)*.14;n.s+=(1-n.s)*.16;n.h+=(n.hT-n.h)*.15;n.f+=((n.k?0:1)-n.f)*.075});
ns.forEach((n,i)=>{const s=succ(i),tx=s?s.x-BW/2-12:n.x+BW/2+44,ty=s?s.y:n.y;n.ax+=(tx-n.ax)*.1;n.ay+=(ty-n.ay)*.1})}
function rr(x,y,w,h,r){g.beginPath();g.moveTo(x+r,y);g.arcTo(x+w,y,x+w,y+h,r);g.arcTo(x+w,y+h,x,y+h,r);g.arcTo(x,y+h,x,y,r);g.arcTo(x,y,x+w,y,r);g.closePath()}
function arr(x0,y0,x1,y1,col,a){
g.save();g.globalAlpha=Math.max(0,a);g.strokeStyle=col;g.fillStyle=col;g.lineWidth=2.4;
const mx=(x0+x1)/2,my=(y0+y1)/2,dx=x1-x0,cy=my+(dx<0?60:-13);
g.beginPath();g.moveTo(x0,y0);g.quadraticCurveTo(mx,cy,x1,y1);g.stroke();
const an=Math.atan2(y1-cy,x1-mx);g.translate(x1,y1);g.rotate(an);
g.beginPath();g.moveTo(0,0);g.lineTo(-12,5);g.lineTo(-12,-5);g.closePath();g.fill();g.restore()}
function draw(){
g.fillStyle='#080c1a';g.fillRect(0,0,W,H);
g.textAlign='left';g.fillStyle='#e8eeff';g.font='600 23px system-ui';g.fillText('Singly Linked List',36,48);
g.fillStyle='#8296cc';g.font='15px system-ui';g.fillText(msg,36,76);
g.textAlign='right';g.font='600 18px system-ui';g.fillStyle='#7dd3fc';
g.fillText('length: '+ns.filter(n=>!n.k).length,W-36,48);g.textAlign='left';
ns.forEach((n,i)=>{const s=succ(i);arr(n.x+BW/2+6,n.y,n.ax,n.ay,s?'#6b8bf5':'#4a5578',n.f*n.s);
 if(!s){g.globalAlpha=Math.max(0,n.f);g.fillStyle='#5a6690';g.font='15px system-ui';g.fillText('null',n.ax+9,n.y+5);g.globalAlpha=1}});
ns.forEach((n,i)=>{
 g.save();g.globalAlpha=Math.max(0,n.f);g.translate(n.x,n.y);g.scale(n.s,n.s);
 g.fillStyle=n.k?'#3b1520':(n.nw?'#0f3324':'#141d3d');rr(-BW/2,-BH/2,BW,BH,10);g.fill();
 g.lineWidth=2;g.strokeStyle=n.k?'#f87171':(n.nw?'#4ade80':'#3d55a8');g.stroke();
 if(n.h>.02){g.globalAlpha=Math.max(0,n.f*n.h);g.strokeStyle='#fbbf24';g.lineWidth=3;rr(-BW/2-6,-BH/2-6,BW+12,BH+12,14);g.stroke();g.globalAlpha=Math.max(0,n.f)}
 g.strokeStyle='#33427a';g.lineWidth=1.4;g.beginPath();g.moveTo(BW/2-25,-BH/2);g.lineTo(BW/2-25,BH/2);g.stroke();
 g.fillStyle='#6b8bf5';g.beginPath();g.arc(BW/2-12.5,0,4,0,7);g.fill();
 g.fillStyle='#eef3ff';g.font='600 19px system-ui';g.textAlign='center';g.fillText(n.v,-12,7);g.restore();
 g.globalAlpha=Math.max(0,n.f);g.fillStyle='#55639a';g.font='11px system-ui';g.textAlign='center';g.fillText(i,n.x,n.y+BH/2+18);g.globalAlpha=1;g.textAlign='left'});
const h=ns.find(n=>!n.k);
if(h){const y=h.y-BH/2;g.save();g.globalAlpha=Math.max(0,h.f);g.fillStyle='#f472b6';g.strokeStyle='#f472b6';g.lineWidth=2;
 g.textAlign='center';g.font='600 13px system-ui';g.fillText('HEAD',h.x,y-30);
 g.beginPath();g.moveTo(h.x,y-26);g.lineTo(h.x,y-14);g.stroke();
 g.beginPath();g.moveTo(h.x,y-5);g.lineTo(h.x-6,y-15);g.lineTo(h.x+6,y-15);g.closePath();g.fill();
 g.globalAlpha=Math.max(0,h.f*.75);rr(h.x-BW/2-11,y-11,BW+22,BH+22,17);g.stroke();g.restore()}}
function loop(ts){const dt=Math.min(.05,(ts-pt)/1000||.016);pt=ts;step(dt);draw();requestAnimationFrame(loop)}
reset();requestAnimationFrame(loop);
</script>

GPT-5.5 (Codex)frontier referenceOKMINIFIED

Show code

<!doctype html><html><head><meta charset="utf-8"><title>List</title><style>html,body{margin:0;height:100%;background:#f6f2e8;color:#17202a;font:15px system-ui}canvas{display:block;width:100%;height:100%}</style></head><body><canvas id="c"></canvas><script>
const C=document.getElementById('c'),x=C.getContext('2d');let W,H,S=0,L=[],op=null,last=0,id=1,wait=900;onresize=()=>{W=C.width=innerWidth*devicePixelRatio;H=C.height=innerHeight*devicePixelRatio;x.setTransform(devicePixelRatio,0,0,devicePixelRatio,0,0);W=innerWidth;H=innerHeight};onresize();
function fresh(){let n=3+Math.random()*3|0;L=[];for(let i=0;i<n;i++)L.push({v:id++,a:1});layout();op=null;wait=700}
function layout(){let m=34,w=72,h=34,g=58,cols=Math.max(1,((W-2*m)/(w+g))|0);L.forEach((n,i)=>{let r=i/cols|0,c=i%cols;n.tx=m+c*(w+g);n.ty=82+r*74;n.x=n.x??n.tx;n.y=n.y??n.ty;n.a=n.a??1})}
function pt(i){let n=L[i];return n&&{x:n.x+72,y:n.y+17}}
function tar(i){let n=L[i];return n&&{x:n.x,y:n.y+17}}
function arrow(a,b,t=1,col='#243b53'){if(!a||!b)return;let ex=a.x+(b.x-a.x)*t,ey=a.y+(b.y-a.y)*t;x.strokeStyle=col;x.fillStyle=col;x.lineWidth=2;x.beginPath();x.moveTo(a.x,a.y);let cx=(a.x+ex)/2,cy=Math.min(a.y,ey)-24;x.quadraticCurveTo(cx,cy,ex,ey);x.stroke();let ang=Math.atan2(ey-cy,ex-cx);x.beginPath();x.moveTo(ex,ey);x.lineTo(ex-9*Math.cos(ang-.45),ey-9*Math.sin(ang-.45));x.lineTo(ex-9*Math.cos(ang+.45),ey-9*Math.sin(ang+.45));x.closePath();x.fill()}
function startOp(){if(L.length>9||L.length<1)return fresh();let ins=Math.random()<.55||L.length<2,p=ins?(Math.random()*(L.length+1)|0):(Math.random()*L.length|0),nw={v:id++,a:0};if(ins){let before=L[p-1],after=L[p];L.splice(p,0,nw);layout();nw.x=nw.tx;nw.y=nw.ty-36;op={k:'i',p,t:0,b:before,s:after,n:nw}}else{let d=L[p],before=L[p-1],after=L[p+1];op={k:'d',p,t:0,b:before,s:after,d,ox:d.x,oy:d.y}}
wait=0}
function step(dt){if(!op){wait-=dt;if(wait<0)startOp();return}op.t+=dt/2100;let q=Math.min(op.t,1),e=q<.5?2*q*q:1-((-2*q+2)**2)/2;layout();L.forEach(n=>{n.x+=((n.tx??n.x)-n.x)*.08;n.y+=((n.ty??n.y)-n.y)*.08});if(op.k=='i'){op.n.a=Math.min(1,q*1.8);op.n.y=op.n.ty-36*(1-e);if(q>=1){op=null;wait=900}}else{op.d.a=1-q;if(q>=1){L.splice(op.p,1);op=null;layout();wait=900}}}
function draw(){x.clearRect(0,0,W,H);x.fillStyle='#17202a';x.font='600 18px system-ui';x.fillText('length: '+L.length,24,34);x.font='12px system-ui';x.fillText('HEAD',34,66);x.fillStyle='#d64545';x.beginPath();x.arc(47,83,7,0,7);x.fill();if(L[0])arrow({x:54,y:83},tar(0),1,'#d64545');let skip=-1;if(op&&op.b)skip=L.indexOf(op.b);for(let i=0;i<L.length-1;i++)if(i!=skip)arrow(pt(i),tar(i+1),1,'#52616b');if(op){let q=Math.min(op.t,1),e=q<.5?2*q*q:1-((-2*q+2)**2)/2;if(op.b){let a={x:op.b.x+72,y:op.b.y+17};arrow(a,tar(op.k=='i'?op.p:op.p+1),e,'#008f7a')}if(op.k=='i')arrow(pt(op.p),tar(op.p+1),Math.max(0,(q-.45)/.55),'#008f7a');if(op.k=='d')arrow(pt(op.p),tar(op.p+1),0,'#008f7a')}L.forEach((n,i)=>box(n,i));if(op&&op.k=='d')box(op.d,op.p,true)}
function box(n,i,hot){x.globalAlpha=n.a;x.fillStyle=hot||op&&(i==op.p||i==op.p-1||i==op.p+1)?'#ffe08a':'#fff';x.strokeStyle=i==0?'#d64545':'#17202a';x.lineWidth=i==0?4:2;x.fillRect(n.x,n.y,72,34);x.strokeRect(n.x,n.y,72,34);x.fillStyle='#17202a';x.font='600 14px system-ui';x.fillText('N'+n.v,n.x+18,n.y+22);x.globalAlpha=1}
function tick(t){let dt=t-last;last=t;step(dt);draw();requestAnimationFrame(tick)}fresh();requestAnimationFrame(tick);
</script></body></html>

Claude Sonnet 5frontier referenceOKMINIFIED

Show code

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Linked List</title>
<style>html,body{margin:0;height:100%;background:#0b0e17;overflow:hidden}canvas{display:block}</style>
</head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
function rs(){cv.width=innerWidth;cv.height=innerHeight;if(head)layout()}
let idc=0,head=null,nodes=[],phase='idle',timer=0.6,pend={},hm={x:0,y:0},last=performance.now();
rs();onresize=rs;
function mk(v){return{val:v,x:0,y:0,tx:0,ty:0,ax:0,ay:0,next:null,fade:1,hl:0,rdy:0,dead:0}}
function chain(){let a=[],n=head;while(n&&a.length<60){a.push(n);n=n.next}return a}
function layout(){const a=chain();const bw=90,gap=50,cols=Math.max(1,Math.floor((cv.width-100)/(bw+gap)));a.forEach((n,i)=>{const r=Math.floor(i/cols),c=i%cols;n.tx=80+c*(bw+gap);n.ty=140+r*110})}
function fresh(){idc=0;head=null;nodes=[];const n=3+Math.floor(Math.random()*2);let prev=null;for(let i=0;i<n;i++){const nd=mk(idc++);nd.x=nd.tx=80+i*140;nd.y=nd.ty=140;nd.ax=nd.x;nd.ay=nd.y;if(!prev)head=nd;else prev.next=nd;nodes.push(nd);prev=nd}layout();nodes.forEach(nd=>{nd.x=nd.tx;nd.y=nd.ty;nd.ax=nd.tx-90;nd.ay=nd.ty});hm.x=head.x;hm.y=head.y-46;phase='idle';timer=0.8}
function pickOp(){const a=chain(),len=a.length;if(len===0||len>=8){fresh();return}const op=Math.random()<0.55?'ins':'del';if(op==='ins'){const pos=Math.floor(Math.random()*(len+1));const prevN=pos>0?a[pos-1]:null;const nxt=a[pos]||null;pend={op,prevN,nxt};if(prevN)prevN.hl=1;if(nxt)nxt.hl=1}else{const pos=Math.floor(Math.random()*len);const victim=a[pos];const prevN=pos>0?a[pos-1]:null;pend={op,prevN,victim,nxt:victim.next};victim.hl=1;if(prevN)prevN.hl=1;if(pend.nxt)pend.nxt.hl=1}phase='highlight';timer=0.55}
function doOp(){if(pend.op==='ins'){const nn=mk(idc++);if(pend.prevN){nn.x=nn.ax=pend.prevN.x;nn.y=nn.ay=pend.prevN.y}else{nn.x=nn.ax=hm.x;nn.y=nn.ay=hm.y+46}nn.tx=nn.x;nn.ty=nn.y;nn.next=pend.nxt;nn.rdy=performance.now()+380;if(pend.prevN)pend.prevN.next=nn;else head=nn;nodes.push(nn)}else{pend.victim.dead=1;if(pend.prevN)pend.prevN.next=pend.nxt;else head=pend.nxt}layout();phase='animate';timer=0.95}
function finish(){phase='idle';timer=0.5+Math.random()*0.8}
function update(dt){const k=1-Math.pow(0.002,dt);nodes.forEach(n=>{n.x+=(n.tx-n.x)*k;n.y+=(n.ty-n.y)*k;if(n.next&&performance.now()>=n.rdy){n.ax+=(n.next.x-n.ax)*k;n.ay+=(n.next.y-n.ay)*k}if(n.dead){n.fade-=dt*1.6;if(n.fade<0)n.fade=0}n.hl=Math.max(0,n.hl-dt*1.5)});if(head){hm.x+=(head.x-hm.x)*k;hm.y+=(head.y-46-hm.y)*k}nodes=nodes.filter(n=>!(n.dead&&n.fade<=0))}
function rr(x0,y0,w,h,r){g.beginPath();g.moveTo(x0+r,y0);g.arcTo(x0+w,y0,x0+w,y0+h,r);g.arcTo(x0+w,y0+h,x0,y0+h,r);g.arcTo(x0,y0+h,x0,y0,r);g.arcTo(x0,y0,x0+w,y0,r);g.closePath()}
function arrow(x1,y1,x2,y2,al){g.globalAlpha=al;g.strokeStyle='#dfe8ff';g.fillStyle='#dfe8ff';g.lineWidth=2;g.beginPath();g.moveTo(x1,y1);g.lineTo(x2,y2);g.stroke();const a=Math.atan2(y2-y1,x2-x1);g.beginPath();g.moveTo(x2,y2);g.lineTo(x2-10*Math.cos(a-0.4),y2-10*Math.sin(a-0.4));g.lineTo(x2-10*Math.cos(a+0.4),y2-10*Math.sin(a+0.4));g.closePath();g.fill();g.globalAlpha=1}
function render(){g.fillStyle='#0b0e17';g.fillRect(0,0,cv.width,cv.height);g.fillStyle='#8fd3ff';g.font='20px sans-serif';g.textAlign='left';g.fillText('Singly Linked List  —  length: '+chain().length,24,40);nodes.forEach(n=>{if(n.next&&performance.now()>=n.rdy){arrow(n.x+40,n.y,n.ax-40,n.ay,n.dead?n.fade:1)}});nodes.forEach(n=>{g.globalAlpha=n.dead?n.fade:1;g.fillStyle=n.hl>0.02?'#ffd166':(n===head?'#5ee0a0':'#3a6fd8');g.strokeStyle='#dfe8ff';g.lineWidth=2;rr(n.x-40,n.y-24,80,48,10);g.fill();g.stroke();g.fillStyle='#0b0e17';g.font='bold 18px sans-serif';g.textAlign='center';g.textBaseline='middle';g.fillText(n.val,n.x,n.y);g.globalAlpha=1});if(head){g.fillStyle='#5ee0a0';g.font='bold 14px sans-serif';g.textAlign='center';g.fillText('HEAD',hm.x,hm.y-8);arrow(hm.x,hm.y+2,head.x,head.y-26,1)}}
function frame(ts){const dt=Math.min(0.05,(ts-last)/1000)||0.016;last=ts;update(dt);timer-=dt;if(phase==='idle'&&timer<=0)pickOp();else if(phase==='highlight'&&timer<=0)doOp();else if(phase==='animate'&&timer<=0)finish();render();requestAnimationFrame(frame)}
fresh();requestAnimationFrame(frame);
</script></body></html>

Claude Fable 5frontier referenceOK

Show code

<!doctype html><html><head><meta charset="utf-8"><title>Linked List</title><style>html,body{margin:0;height:100%;background:#0f1424;overflow:hidden}canvas{display:block}</style></head><body><canvas id="c"></canvas><script>
const cv=document.getElementById('c'),g=cv.getContext('2d');
const BW=58,BH=34,GX=104,GY=92,X0=36,Y0=110,HL=.7,SW=1.1,MV=.7;
let W,H,nd=[],ph='wait',tm=.8,op=null,e1=0,e2=0;
const R=n=>Math.random()*n|0,ease=t=>t*t*(3-2*t),lp=(a,b,t)=>a+(b-a)*t;
function mk(){return{v:R(90)+10,x:0,y:0,tx:0,ty:0,a:1}}
function lay(s){const per=Math.max(2,(W-X0*2)/GX|0);nd.forEach((n,i)=>{n.tx=X0+(i%per)*GX;n.ty=Y0+((i/per)|0)*GY;if(s){n.x=n.tx;n.y=n.ty}})}
function rs(){W=cv.width=innerWidth;H=cv.height=innerHeight;lay(0)}
addEventListener('resize',rs);
function fresh(){nd=[];const c=3+R(3);for(let i=0;i<c;i++)nd.push(mk());lay(1);ph='wait';tm=1;op=null}
rs();fresh();
function start(){
const L=nd.length;
if(L>=9||L==0){fresh();return}
const ins=Math.random()<(L<3?.85:L>7?.15:.55);
if(ins){
const i=R(L+1),n=mk(),p=nd[i-1],s=nd[i],r=s||p;
n.a=0;n.x=n.tx=s?s.tx:Math.min(p.tx+GX,W-BW-20);n.y=n.ty=r.ty-56;
op={type:'i',i,p,s,n,t:0};
}else{
const i=R(L);
op={type:'d',i,p:nd[i-1],n:nd[i],s:nd[i+1],t:0};
}
ph='hl';
}
function step(dt){
nd.forEach(n=>{const k=Math.min(1,dt*7);n.x+=(n.tx-n.x)*k;n.y+=(n.ty-n.y)*k});
e1=0;e2=0;
if(ph=='wait'){tm-=dt;if(tm<=0)start()}
else if(ph=='hl'){op.t+=dt;if(op.type=='i')op.n.a=Math.min(1,op.t/HL);if(op.t>=HL){ph='sw';op.t=0}}
else if(ph=='sw'){op.t+=dt;const tt=Math.min(1,op.t/SW);
if(op.type=='i'){e1=ease(Math.min(1,tt*1.7));e2=ease(Math.max(0,(tt-.45)/.55))}
else{e1=ease(tt);op.n.a=1-e1}
if(op.t>=SW){if(op.type=='i')nd.splice(op.i,0,op.n);else nd.splice(op.i,1);lay(0);ph='mv';op.t=0}}
else if(ph=='mv'){op.t+=dt;if(op.t>=MV){ph='wait';tm=.8+Math.random();op=null}}
}
function arr(x1,y1,x2,y2,a,c){
const dx=x2-x1,dy=y2-y1,L=Math.hypot(dx,dy)||1,ux=dx/L,uy=dy/L;
g.globalAlpha=Math.max(0,a);g.strokeStyle=c;g.fillStyle=c;g.lineWidth=2;
g.beginPath();g.moveTo(x1,y1);g.lineTo(x2,y2);g.stroke();
g.beginPath();g.moveTo(x2,y2);g.lineTo(x2-ux*10-uy*5,y2-uy*10+ux*5);g.lineTo(x2-ux*10+uy*5,y2-uy*10-ux*5);g.closePath();g.fill();
g.globalAlpha=1;
}
function box(n,h){
g.globalAlpha=Math.max(0,n.a);
g.fillStyle='#1d2742';g.fillRect(n.x,n.y,BW,BH);
g.strokeStyle=h?'#ffd166':'#6e8efb';g.lineWidth=h?3:2;g.strokeRect(n.x,n.y,BW,BH);
g.fillStyle='#e8ecff';g.font='13px monospace';g.textAlign='center';g.textBaseline='middle';
g.fillText(n.v,n.x+BW/2,n.y+BH/2+1);g.globalAlpha=1;
}
function headM(x,y,a){
g.globalAlpha=Math.max(0,a);g.fillStyle='#3ddc84';
g.beginPath();g.moveTo(x+BW/2,y-5);g.lineTo(x+BW/2-7,y-17);g.lineTo(x+BW/2+7,y-17);g.closePath();g.fill();
g.font='bold 12px monospace';g.textAlign='center';g.textBaseline='alphabetic';
g.fillText('HEAD',x+BW/2,y-22);g.globalAlpha=1;
}
const EP=n=>[n.x,n.y+BH/2],SP=n=>[n.x+BW,n.y+BH/2];
function draw(){
g.fillStyle='#0f1424';g.fillRect(0,0,W,H);
g.fillStyle='#9fb0d8';g.font='16px monospace';g.textAlign='left';g.textBaseline='alphabetic';
g.fillText('singly linked list — length: '+nd.length,20,34);
if(op)g.fillText((op.type=='i'?'inserting at ':'deleting at ')+op.i,20,58);
const anim=op&&(ph=='hl'||ph=='sw');
for(let i=0;i<nd.length-1;i++){
const c=nd[i],x=nd[i+1];
if(anim&&c==op.p)continue;
const[a1,b1]=SP(c),[a2,b2]=EP(x);
arr(a1,b1,a2,b2,Math.min(c.a,x.a),'#8ea0d0');
}
if(anim){
const P=op.p,S=op.s,N=op.n;
if(P){
const[a1,b1]=SP(P);let x0,y0,x1,y1;
if(op.type=='i'){[x0,y0]=S?EP(S):[a1,b1];[x1,y1]=EP(N)}
else{[x0,y0]=EP(N);[x1,y1]=S?EP(S):[a1,b1]}
const tx=lp(x0,x1,e1),ty=lp(y0,y1,e1);
if(Math.hypot(tx-a1,ty-b1)>5)arr(a1,b1,tx,ty,1,'#ffd166');
}
if(op.type=='i'&&S&&e2>0){
const[a1,b1]=SP(N),[x1,y1]=EP(S);
arr(a1,b1,lp(a1,x1,e2),lp(b1,y1,e2),Math.min(1,op.n.a),'#ffd166');
}
}
nd.forEach(n=>box(n,anim&&(n==op.p||n==op.s||n==op.n)));
if(anim&&op.type=='i')box(op.n,1);
let hx=null,hy=0,ha=1;
if(anim&&!op.p){
if(op.type=='i'){hx=lp(op.s.x,op.n.x,e1);hy=lp(op.s.y,op.n.y,e1)}
else if(op.s){hx=lp(op.n.x,op.s.x,e1);hy=lp(op.n.y,op.s.y,e1)}
else{hx=op.n.x;hy=op.n.y;ha=op.n.a}
}else if(nd[0]){hx=nd[0].x;hy=nd[0].y}
if(hx!=null)headM(hx,hy,ha);
}
let lt=0;
function frame(ts){
const dt=Math.min(.05,(ts-lt)/1000||0);lt=ts;
step(dt);draw();requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script></body></html>

Claude Haiku 4.5frontier referenceOKMINIFIED

Show code

<!DOCTYPE html><html><head><title>Linked List</title><style>body{margin:0;background:#000;display:flex;justify-content:center;align-items:center;height:100vh}canvas{background:#111;border:1px solid #333}#i{color:#0f0;position:fixed;top:10px;left:10px;font-size:12px;font-family:monospace}</style></head><body><div id="i"></div><canvas id="c"></canvas><script>const c=document.getElementById('c'),x=c.getContext('2d'),i=document.getElementById('i');c.width=800;c.height=500;const nW=40,nH=30,gap=55,maxL=18;let nodes=[],opT=0;function init(){nodes=[];for(let j=0;j<5;j++)nodes.push({id:j,x:50+j*gap,y:150,tx:0,ty:0,del:0});opT=0}function lay(){let px=50,py=100;const pr=11;for(let j=0;j<nodes.length;j++){if(j>0&&j%pr===0){py+=80;px=50}nodes[j].tx=px;nodes[j].ty=py;px+=gap}}function drwArr(f,t){const sx=f.x+nW/2,sy=f.y+nH/2,ex=t.x+nW/2,ey=t.y+nH/2;x.strokeStyle='#0f0';x.lineWidth=2;x.beginPath();x.moveTo(sx,sy);x.quadraticCurveTo((sx+ex)/2,sy+40,ex,ey);x.stroke()}function drwNode(nd,isH){nd.x+=(nd.tx-nd.x)*0.12;nd.y+=(nd.ty-nd.y)*0.12;let a=1;if(nd.del){nd.del++;a=Math.max(0,1-nd.del/25)}x.globalAlpha=a;x.fillStyle=isH?'#f00':'#0f0';x.fillRect(nd.x,nd.y,nW,nH);x.strokeStyle='#fff';x.strokeRect(nd.x,nd.y,nW,nH);if(isH){x.fillStyle='#f0f';x.beginPath();x.arc(nd.x-8,nd.y+nH/2,4,0,7);x.fill()}x.fillStyle='#000';x.font='11px monospace';x.textAlign='center';x.textBaseline='middle';x.fillText(nd.id,nd.x+nW/2,nd.y+nH/2);x.globalAlpha=1}function upd(dt){opT+=dt;if(opT>1800){opT=0;if(nodes.length>=maxL){nodes[Math.floor(Math.random()*nodes.length)].del=1}else if(nodes.length<3||Math.random()>0.5){let p=Math.floor(Math.random()*(nodes.length+1)),id=Math.max(...nodes.map(m=>m.id),-1)+1;nodes.splice(p,0,{id:id,x:0,y:0,tx:0,ty:0,del:0});lay()}}nodes=nodes.filter(nd=>!nd.del||nd.del<25)}function drw(){x.fillStyle='#111';x.fillRect(0,0,c.width,c.height);lay();for(let j=0;j<nodes.length-1;j++)if(!nodes[j].del&&!nodes[j+1].del)drwArr(nodes[j],nodes[j+1]);for(let j=0;j<nodes.length;j++)drwNode(nodes[j],j===0);i.textContent='Length: '+nodes.length}let lt=Date.now();function anim(){const now=Date.now();upd(now-lt);lt=now;drw();requestAnimationFrame(anim)}init();anim();</script></body></html>

Results at a glance— every model in this round with score, response time and status.

Who wrote what

Model	Blind score	Latency	Status
qwen3:8b	—	50.1 s	OK
qwen3-coder:30b	—	49.2 s	OK
gemma4:26b	—	—	harness
llama3.1:8b	—	100.7 s	OK
mistral-small:24b	—	136.3 s	OK
qwen3.5:9b	—	109.0 s	OK
qwen3:14b	—	59.6 s	OK
deepseek-r1:14b	—	29.8 s	OK
qwq:32b	—	—	DNF
command-r:35b	—	—	DNF
deepseek-r1:32b	—	78.4 s	OK