SVG BP1 animation

bp1.context.json

{
    "W": 640,
    "H": 480,
    "binW": 200,
    "binH": 120,
    "items": [
        {"size": 0.5, "cumSize": 0.0, "packBin": 0, "packPos": 0.0},
        {"size": 0.4, "cumSize": 0.5, "packBin": 1, "packPos": 0.0},
        {"size": 0.3, "cumSize": 0.9, "packBin": 0, "packPos": 0.5},
        {"size": 0.3, "cumSize": 1.2, "packBin": 1, "packPos": 0.4},
        {"size": 0.2, "cumSize": 1.5, "packBin": 0, "packPos": 0.8},
        {"size": 0.2, "cumSize": 1.7, "packBin": 1, "packPos": 0.7},
        {"size": 0.1, "cumSize": 1.9, "packBin": 1, "packPos": 0.9}
    ]
}

bp1.svg.jinja2

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="{{W}}" height="{{H}}" viewBox="0 0 {{W}} {{H}}">
{%- set binXMar = (W - 2 * binW) / 3 %}
{%- set binYMar = (H - 2 * binH) / 3 %}
{%- set itemXMar = (W - 2 * binW) / (1 + items.__len__()) %}
<!-- binXMar = {{binXMar}}, binYMar = {{binYMar}}, itemXMar = {{itemXMar}} -->
<style>
svg {
    --start: 0s;
    --play-state: running;
    border: 1px solid black;
}
rect {
    stroke: black;
}
.bin {
    fill: none;
    stroke-width: 2px;
}
.item > rect {
    stroke-width: 1px;
}
text {
    font-size: 14px;
    font-style: sans-serif;
}

#wrapper, .item {
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-play-state: var(--play-state);
    animation-delay: calc(0s - var(--start));
}
#wrapper {animation-name: zoom-and-slide;}
@keyframes zoom-and-slide {
    0%, 40%, 85%, 100% {transform: none;}
    45%, 60% {transform: translate(0, -{{H}}px) scale(2);}
    65%, 80% {transform: translate(-{{W}}px, -{{H}}px) scale(2);}
}
{%- for item in items %}
#item-{{loop.index0}} {animation-name: pack-{{loop.index0}};}
@keyframes pack-{{loop.index0}} {
    0%, 15%, 100% {transform: translate({{item.cumSize * binW + loop.index * itemXMar}}px, {{binYMar}}px);}
    25%, 95% {transform: translate({{binXMar + item.packBin * (binXMar + binW) + item.packPos * binW }}px, {{2 * binYMar + binH}}px);}
}
{%- endfor %}
</style>
<g id="wrapper">
<rect class="bin" width="{{binW}}" height="{{binH}}"
    x="{{binXMar}}" y="{{2 * binYMar + binH}}"/>
<rect class="bin" width="{{binW}}" height="{{binH}}"
    x="{{2 * binXMar + binW}}" y="{{2 * binYMar + binH}}"/>
{%- for item in items %}
<g class="item" id="item-{{loop.index0}}">
    <rect width="{{item.size * binW}}" height="{{binH}}" x="0" y="0"
        fill="hsl({{loop.index0 * 20}}, 75%, 70%)"/>
    <text x="{{item.size * binW / 2}}" y="{{binH / 2}}"
        text-anchor="middle" dominant-baseline="central">{{item.size}}</text>
</g>
{%- endfor %}
</g>
</svg>