Skip to content

Instantly share code, notes, and snippets.

@lassebenni

lassebenni/variables_reference_animation.html

Created January 13, 2026 18:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lassebenni/79261c606e04f7b838a9a9f07d6ffc11 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lassebenni/79261c606e04f7b838a9a9f07d6ffc11 to your computer and use it in GitHub Desktop.
Download ZIP
Animation: Variables as References in Python
Raw
variables_reference_animation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables as References</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0d1117;
font-family: 'Segoe UI', system-ui, sans-serif;
}
svg {
max-width: 100%;
height: auto;
}
.label {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 14px;
fill: #c9d1d9;
}
.variable-name {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 16px;
font-weight: bold;
fill: #79c0ff;
}
.value-text {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 14px;
fill: #0d1117;
}
.memory-label {
font-size: 11px;
fill: #8b949e;
font-family: 'Segoe UI', system-ui, sans-serif;
}
.title {
font-size: 18px;
fill: #c9d1d9;
font-weight: 600;
}
/* Animation for first variable */
.var1-box { animation: fadeSlideIn 0.8s ease-out forwards; opacity: 0; }
.var1-arrow { animation: drawArrow 0.5s ease-out 0.8s forwards; stroke-dasharray: 100; stroke-dashoffset: 100; }
.var1-value { animation: popIn 0.4s ease-out 1.3s forwards; opacity: 0; transform-origin: center; }
/* Animation for second variable */
.var2-box { animation: fadeSlideIn 0.8s ease-out 2s forwards; opacity: 0; }
.var2-arrow { animation: drawArrow 0.5s ease-out 2.8s forwards; stroke-dasharray: 100; stroke-dashoffset: 100; }
.var2-value { animation: popIn 0.4s ease-out 3.3s forwards; opacity: 0; transform-origin: center; }
/* Animation for reassignment */
.var3-arrow { animation: drawArrow 0.5s ease-out 4.5s forwards; stroke-dasharray: 100; stroke-dashoffset: 100; }
.var3-value { animation: popIn 0.4s ease-out 5s forwards; opacity: 0; transform-origin: center; }
.reassign-note { animation: fadeIn 0.5s ease-out 5.5s forwards; opacity: 0; }
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes drawArrow {
to { stroke-dashoffset: 0; }
}
@keyframes popIn {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
to { opacity: 1; }
}
</style>
</head>
<body>
<svg viewBox="0 0 600 350" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="600" height="350" fill="#0d1117"/>
<!-- Title -->
<text x="300" y="35" text-anchor="middle" class="title">Variables Point to Values in Memory</text>
<!-- Memory region label -->
<text x="450" y="70" text-anchor="middle" class="memory-label">MEMORY</text>
<rect x="350" y="80" width="200" height="240" rx="8" fill="none" stroke="#30363d" stroke-width="1" stroke-dasharray="4"/>
<!-- Variables region label -->
<text x="120" y="70" text-anchor="middle" class="memory-label">VARIABLES</text>
<!-- Variable 1: name = "Alice" -->
<g class="var1-box">
<rect x="50" y="100" width="120" height="40" rx="6" fill="#21262d" stroke="#30363d" stroke-width="2"/>
<text x="110" y="125" text-anchor="middle" class="variable-name">name</text>
</g>
<!-- Arrow 1 -->
<line x1="170" y1="120" x2="370" y2="120" class="var1-arrow" stroke="#79c0ff" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Value 1: "Alice" -->
<g class="var1-value">
<rect x="370" y="100" width="100" height="40" rx="6" fill="#a5d6ff"/>
<text x="420" y="125" text-anchor="middle" class="value-text">"Alice"</text>
</g>
<!-- Variable 2: age = 28 -->
<g class="var2-box">
<rect x="50" y="170" width="120" height="40" rx="6" fill="#21262d" stroke="#30363d" stroke-width="2"/>
<text x="110" y="195" text-anchor="middle" class="variable-name">age</text>
</g>
<!-- Arrow 2 -->
<line x1="170" y1="190" x2="370" y2="190" class="var2-arrow" stroke="#79c0ff" stroke-width="2" marker-end="url(#arrowhead)"/>
<!-- Value 2: 28 -->
<g class="var2-value">
<rect x="370" y="170" width="100" height="40" rx="6" fill="#7ee787"/>
<text x="420" y="195" text-anchor="middle" class="value-text">28</text>
</g>
<!-- Reassignment: name = "Bob" -->
<!-- New arrow (curved, going to new value) -->
<path d="M 170 120 Q 270 50 370 260" class="var3-arrow" fill="none" stroke="#f0883e" stroke-width="2" stroke-dasharray="100" marker-end="url(#arrowhead-orange)"/>
<!-- Value 3: "Bob" -->
<g class="var3-value">
<rect x="370" y="240" width="100" height="40" rx="6" fill="#ffa657"/>
<text x="420" y="265" text-anchor="middle" class="value-text">"Bob"</text>
</g>
<!-- Reassignment note -->
<g class="reassign-note">
<text x="110" y="260" text-anchor="middle" class="label" fill="#f0883e">name = "Bob"</text>
<text x="110" y="280" text-anchor="middle" class="memory-label">Variable now points</text>
<text x="110" y="295" text-anchor="middle" class="memory-label">to a new value</text>
</g>
<!-- Arrowhead definitions -->
<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="#79c0ff"/>
</marker>
<marker id="arrowhead-orange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#f0883e"/>
</marker>
</defs>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment