將製作ejcees（中國象棋打譜程式）

ejsoon · 帖子由 **ejsoon** » 2026年 3月 12日 12:42

gemini 3.1 pro：

https://ejsoon.vip/wp-content/uploads/2 ... iEdit.html

ejsoon · 帖子由 **ejsoon** » 2026年 3月 12日 17:21

gemini 3.1 pro很棒很好用！

https://ejsoon.vip/wp-content/uploads/2 ... it996.html

ejsoon · 帖子由 **ejsoon** » 2026年 3月 12日 19:40

編輯狀態時把右邊按鈕加寬，修復保存特定局面，修復菜單位置：

https://ejsoon.vip/wp-content/uploads/2 ... b9962.html

ejsoon · 帖子由 **ejsoon** » 2026年 3月 12日 22:49

修復edit狀態時，rotate和flip顯示的小問題：

https://ejsoon.vip/wp-content/uploads/2 ... o9963.html

ejsoon · 帖子由 **ejsoon** » 2026年 3月 14日 10:02

改進：

一，修改記譜邏輯，當AaBb處於同一條縱線時，不再用「+A、-B」來描述，而是用「4A、7B」來描述，用可活動範圍來確定所移動的是哪個棋子。

例如當有兩個a分別處於3,0和3,2時，「a4+5」指的就是3,0的a，因為a的活動範圍是y軸為[0,2]。

二，當處於編輯狀態時，把「tile0點擊選中和取消」改為「點擊時在tile0和tile1之間切換」。

三，實現播放功能和改變步時功能

當點擊btn-autoplay時，進入「自動播放」狀態，其它所有的功能都失效，包括ejceestool、ejceesstep按鈕都不可點擊，也不能點擊svg走棋。

在自動播放狀態中，棋子將從currentStepIndex當前所在的棋譜開始走棋。每步棋的間隔時間是btn-speed所顯示的時間。

注意間隔時間是這一步棋的開始到下一步開始走棋的間隔時間。

當走到最後一步時，退出「自動播放」狀態。中途按下btn-autoplay，也會停止播放。

btn-speed的默認值改為1.8s，當在非播放狀態按下它時，ejceestextbtn將變成：一個只能輸入三個英文字符寬度的輸入框，「1、2、3」選項，confirm和cancel。

所能輸入的範圍是0.2到9，超過這個範圍就會恢復默認的1.8。最多保留一位小數。輸入時不用加單位s。

如果點擊選項，則不必再按confirm，程式將把值設為1s，2s或3s。

四，實現「選取範圍」功能

當點擊btn-range時，進入「選取範圍」狀態。再點一次則退出該狀態。

這時點擊第一次ejceesrecord內的ejceesrcdstart或ejceesrcdstep，它的border-left和border-top將變為淺綠色，表示設為範圍的起始。

點擊第二次，被點擊的元素的border-right和border-bottom將變為淺紅色，表示設為範圍的終止。

兩次點擊可以在同一點。如果第二次點擊的元素在第一次的前面，則第二次的變為起始，第一次變為終止。點第三次時，前兩次將作廢，第三次等同於第一次點擊。

當進入「選取範圍」狀態時，以下功能可用：

新建tool-new，將把選取範圍內的棋譜變為新的棋局，起始的局面將放至ejceesrcdstart。

保存tool-save，把選取範圍內的棋譜json文本下載。

導出文本tool-exp-txt會只導出該範圍內的文本。

導出svgtool-exp-svg會只導出該範圍內的svg動畫。

刪除棋譜btn-del-move將刪除起始往後的棋譜。

自動播放btn-autoplay將從起始點開始播放，到範圍終點為止。

以上功能在使用時，將退出「選取範圍」狀態。但自動播放時會保留起始和終點的border顏色，播放結束時再次回到「選取範圍」狀態並保留border顏色。

五，實現「導出svg」功能

當按下svgtool-exp-svg時，將導出下載svg文件。它的內容按以下要求調整：

如果沒有選擇範圍，則把整個棋譜的svg動畫導出。如果選擇範圍只有起始點，則把起始往後的棋譜的svg動畫導出。如果起點和終點不在同一點，則把該範圍的棋譜svg動畫導出。如果起點和終點在同一點，則把該局面的svg直接導出（非svg動畫）。

當要導出svg動畫時：

1.獲取初始局面的svg的克隆。
2.把class改為"ejceespbanimate"。
3.把#whiteToTransparent和#ejceesstartdot刪除。
4.把.etboard內的所有use[href=tile2-15]複製出來，把id加上f（如id="r0f"），加上opacity="0"，之後放到.etdrop內的最後。
5.從第一步要移動的棋子開始，在.etboard內對應的use棋子（如id="r0"）內部加上動畫：<animateTransform id="step1" begin="1.8s;step0.end+1.8s" attributeName="transform" attributeType="XML" type="translate" from="x0,y0" to="x1,y1" dur="0.12s" fill="freeze"/>，它的1.8指btn-speed的時間，from和to就是棋子移動的坐標。比如「from="72,24" to="120,120"」。
6.同時在.etdrop內對應的use棋子（如id="r0f"）內部加上移動坐標相同的動畫：<animateTransform begin="step1.begin" end="step1.end" attributeName="transform" attributeType="XML" type="translate" from="x0,y0" to="x1,y1" fill="freeze"/>，再加上<set begin="step1.begin" end="step1.end" attributeName="opacity" to="1"/>
7.如果有棋子被吃掉，則把.etboard內對應的use棋子（如id="n0"）內部加上<set begin="step1.end" end="step0.begin+1s" attributeName="opacity" to="1"/>
8.從第二步開始，.etboard內對應的use棋子加的動畫的begin將改為上一步的begin+btn-speed的時間，如「<animateTransform id="step2" begin="step1.begin+1.8s"」。
8.當最後一步走完後（如step9），在.etboard內部的最後加上<animate id="step0" begin="step9.end+4s" attributeName="opacity" values="1;0;0;1" dur="3s" fill="freeze" />，然後把所有.etboard和.etdrop內移動過的use棋子都加上<animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="x0,y0" fill="freeze"/>移回初始位置。
9.彈出預覽窗口，下方將給出下載鏈接download(大小byte)，下載文件名是ejcees_animate_yyyymmdd_hhiiss.svg。右上角有關閉按鈕。

只需給出要修改的地方，所有的代碼和注釋都要是英文。

ejsoon · 帖子由 **ejsoon** » 2026年 3月 14日 10:20

我感覺我還是有一點太貪得無厭了。gemini吃不下了，刪了最後一點，所幸它吃了。

gemini：

https://ejsoon.vip/wp-content/uploads/2 ... yback.html

ejsoon · 帖子由 **ejsoon** » 2026年 3月 14日 15:38

增加自動播放功能，選取範圍功能，修復士象的走子描述：

https://ejsoon.vip/wp-content/uploads/2 ... ay997.html

ejsoon · 帖子由 **ejsoon** » 2026年 3月 14日 16:12

自動播放應調用動畫。

ejsoon · 帖子由 **ejsoon** » 2026年 3月 14日 21:06

代码：全选

标题: 上海金外滩 胡荣华 胜 江苏汤沟两相和 王斌
分类: 全国象棋甲级联赛
赛事: 2006年启新高尔夫杯全国象棋甲级联赛
轮次: 第03轮
布局: E43 对兵互进右马局 红飞相
红方: 上海金外滩 胡荣华
黑方: 江苏汤沟两相和 王斌
结果: 红方胜
日期: 2006.05.10
组别: 上海-江苏
台次: 第03台
作者: ybw
棋局类型: 全局
棋局性质: 慢棋
红方团体: 上海金外滩
红方姓名: 胡荣华
黑方团体: 江苏汤沟两相和
黑方姓名: 王斌
棋谱主人: m
棋谱价值: 1
浏览次数: 6005
来源网站: http://www.01xq.com/
 
 
【主变: 红胜】
    1.  兵七进一    卒７进１   
    2.  马八进七    马８进７   
    3.  相三进五    象３进５   
    4.  马二进四    车９进１   
    5.  车一平三    马７进６   
    6.  车九进一    车９平４   
    7.  兵三进一    卒７进１   
    8.  车三进四    车４进３   
    9.  车三平四    炮８平６   
    10. 炮二进三    马６退７   
    11. 炮二退四    士４进５   
    12. 车九平六    车４进４   
    13. 炮二平六    马２进３   
    14. 马四进二    炮２平１   
    15. 马二进三    车１平２   
    16. 炮八进二    象５进７   
    17. 炮六平八    车２平４   
    18. 后炮平三    车４进４   
    19. 车四平六    车４平６   
    20. 车六进二    象７进５   
    21. 仕四进五    卒３进１   
    22. 兵五进一    卒３进１   
    23. 兵五进一    车６进２   
    24. 炮八退三    炮６进１   
    25. 车六进二    炮６退２   
    26. 车六退二    炮６进２   
    27. 车六进二    卒３进１   
    28. 马七进五    炮６平７   
    29. 马五进七    车６平４   
    30. 车六平八    马３退４   
    31. 车八退一    车４退４   
    32. 车八平六    士５进４   
    33. 马三退四    炮７进５   
    34. 炮八平三    象５进３   
    35. 兵五平六    象７退５   
    36. 马四进五    士６进５   
    37. 马五退七    炮１平３   
    38. 兵六进一    炮３进３   
    39. 相五进七    马４进３   
    40. 兵六平七    马３退４   
    41. 兵九进一    马７进８   
    42. 相七退五    马８进９   
    43. 仕五进六    马９退８   
    44. 兵七平八    马８进６   
    45. 炮三平六    象５退３   
    46. 炮六平九    马４进５   
    47. 炮九进五    马５进７   
    48. 兵九进一    象３退５   
    49. 兵九平八    马７进５   
    50. 仕六进五    卒９进１   
    51. 炮九退二    将５平６   
    52. 炮九进五    将６进１   
    53. 帅五平四    士５进６   
    54. 炮九退五    将６退１   
    55. 马七进五    马５退７
 
棋谱由 http://www.dpxq.com/ 生成

http://m.dpxq.com/hldcg/search/view_m_15499.html

http://dpxq.com/hldcg/share/chess_大师对局/ ... 有胜局/6.html

「后炮平七」沒轉成。

ejsoon · 帖子由 **ejsoon** » 2026年 3月 15日 00:41

改進：

當存在選取範圍的起始位置時，點擊自動播放就一定從這個位置開始。播放時要調用動畫。

只需給出要修改的地方，所有的代碼和注釋都要是英文。

代码：全选

**Modified: `movePieceWithAnimation` function**  
(Added optional `onComplete` callback parameter for playback mode. All board logic and animation remain unchanged; only the post-animation handling is conditional so playback never pushes duplicate history or toggles turn inside the function.)

```js
// Modified to support optional onComplete callback for animated auto-play.
// This allows each move during playback to use the exact same 360ms animation
// without creating new history entries or desynchronizing the step counter.
function movePieceWithAnimation(pieceId, targetLogicalX, targetLogicalY, eatenId, onComplete = null) {
    if (isAnimating) return;
    isAnimating = true;

    const pieceEl = document.getElementById(pieceId);
    etdrop.appendChild(pieceEl);

    const startLogical = piecePos.get(pieceId);
    const startVis = getVisualCoords(startLogical.x, startLogical.y);
    const endVis = getVisualCoords(targetLogicalX, targetLogicalY);

    const startXpx = startVis.x * 48 + 24;
    const startYpx = startVis.y * 48 + 24;
    const endXpx = endVis.x * 48 + 24;
    const endYpx = endVis.y * 48 + 24;

    let startTime = null;
    const duration = 360;

    function animate(time) {
        if (!startTime) startTime = time;
        let progress = (time - startTime) / duration;
        if (progress > 1) progress = 1;

        const currX = startXpx + (endXpx - startXpx) * progress;
        const currY = startYpx + (endYpx - startYpx) * progress;
        pieceEl.setAttribute('transform', `translate(${currX}, ${currY})`);

        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            etboard.appendChild(pieceEl);

            if (eatenId) {
                const eatenEl = document.getElementById(eatenId);
                const href = eatenEl.getAttribute('href') || eatenEl.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
                if (/^#(tile([2-9]|1[0-5]))$/.test(href)) {
                    eatenEl.setAttribute('rm', '1');
                    eatenEl.setAttribute('display', 'none');
                    piecePos.delete(eatenId);
                }
            }

            // Update logical data only
            const moveText = getMoveNotation(pieceId, startLogical.x, startLogical.y, targetLogicalX, targetLogicalY, eatenId);
            const moveData = {
                startX: startLogical.x,
                startY: startLogical.y,
                endX: targetLogicalX,
                endY: targetLogicalY
            };

            tileMap.delete(`${startLogical.x},${startLogical.y}`);
            tileMap.set(`${targetLogicalX},${targetLogicalY}`, pieceId);
            piecePos.set(pieceId, {
                x: targetLogicalX,
                y: targetLogicalY
            });

            // Final visual position
            pieceEl.setAttribute('transform', `translate(${endXpx}, ${endYpx})`);

            setPickup(pieceId, false);
            isAnimating = false;

            if (onComplete) {
                onComplete();
            } else {
                currentTurn = currentTurn === 'w' ? 'b' : 'w';
                pushHistory(moveText, moveData);
                applyLastMoveVisuals(moveData);
            }
        }
    }

    requestAnimationFrame(animate);
}
```

**Modified: `startAutoPlay` function**  
(Now forces start from `rangeStart` when it exists, as required. Removed `setInterval`; now launches the new animated chain.)

```js
// Modified: When a range start position exists, auto-play MUST begin exactly there.
// Playback now uses full animation via playNextAnimated (no more instant jumpToStep).
function startAutoPlay() {
    isAutoPlaying = true;
    renderNoteUI();
    disableUIForPlay(true);

    if (isRangeMode && rangeStart !== null) {
        jumpToStep(rangeStart);  // Must start from the selected range start position
    }

    playNextAnimated();
}
```

**New function (add anywhere in the script, e.g. after `stopAutoPlay`)**

```js
// New helper: Chains animated moves for auto-play.
// Uses the exact move data stored in history (lastMove) and calls movePieceWithAnimation.
// After the 360ms animation finishes, it advances the step counter and schedules the next move
// after the full playSpeed delay. This satisfies "playback must call animation".
function playNextAnimated() {
    if (!isAutoPlaying) return;

    const targetEnd = (isRangeMode && rangeEnd !== null) ? rangeEnd : stepSlider.max;
    if (currentStepIndex >= targetEnd) {
        stopAutoPlay();
        return;
    }

    const nextStepIndex = currentStepIndex + 1;
    const nextNode = getNodeAtStep(nextStepIndex);
    if (!nextNode || !nextNode.lastMove) {
        stopAutoPlay();
        return;
    }

    const moveData = nextNode.lastMove;
    const startKey = `${moveData.startX},${moveData.startY}`;
    const pieceId = tileMap.get(startKey);
    if (!pieceId) {
        // Fallback to instant jump if animation is impossible
        jumpToStep(nextStepIndex);
        setTimeout(playNextAnimated, playSpeed * 1000);
        return;
    }

    const endKey = `${moveData.endX},${moveData.endY}`;
    const eatenId = tileMap.get(endKey) || null;

    // Trigger animation; callback runs only after the piece has finished moving
    movePieceWithAnimation(pieceId, moveData.endX, moveData.endY, eatenId, () => {
        // Animation complete: sync turn and visuals, advance step
        currentTurn = currentTurn === 'w' ? 'b' : 'w';
        applyLastMoveVisuals(moveData);
        currentStepIndex = nextStepIndex;
        stepSlider.value = currentStepIndex;
        highlightActiveStep(currentStepIndex);
        renderNoteUI();

        // Chain the next animated move after the full playSpeed interval
        setTimeout(playNextAnimated, playSpeed * 1000);
    });
}
```

**Modified: `stopAutoPlay` function**  
(Minor: kept original interval-clearing code for safety; the new timeout chain respects the `isAutoPlaying` flag.)

```js
// Minor update for compatibility with the new timeout-based playback chain.
function stopAutoPlay() {
    isAutoPlaying = false;
    if (playIntervalId) {
        clearInterval(playIntervalId);
        playIntervalId = null;
    }
    disableUIForPlay(false);
    renderNoteUI();
    if (isRangeMode) {
        applyRangeBorders();
    }
}
```

**No other changes required.**  
The live-click handler still calls `movePieceWithAnimation` with only 4 arguments (onComplete remains `null`). All existing undo/redo, branch logic, and FEN handling are untouched. Playback now always respects the range start position and uses the 360ms piece animation for every move.

ejsoon · 帖子由 **ejsoon** » 2026年 3月 15日 01:04

grok幹得漂亮！

ejsoon · 帖子由 **ejsoon** » 2026年 3月 15日 08:13

實現「導出svg」功能

當按下svgtool-exp-svg時，將導出下載svg文件。

有「導出單個svg圖片」和「導出svg動畫」兩種情況。

如果已經進入「選取範圍」狀態（isRangMode===true），但是沒有選取起點和終點，則直接下載當前局面。如果有選擇範圍，且起點和終點在同一點，則把該點的svg局面直接導出。這是「導出單個svg圖片」的情況。

如果沒有選擇範圍，則把整個棋譜的svg動畫導出。如果選擇範圍只有起始點，則把起始往後的棋譜的svg動畫導出。如果有起點和終點且不在同一點，則把該範圍的棋譜svg動畫導出。這是「導出svg動畫」的情況。

如果是「導出svg動畫」，svg的內容按以下步驟調整：

1.獲取初始局面的svg的克隆，把class改為"ejceespbanimate"。

2.把#whiteToTransparent和#ejceesstartdot刪除。

3.把.etboard內的所有use[href=tile2-15]複製出來，把id加上f（如id="r0f"），加上opacity="0"，之後放到.etdrop內的最後。

4.從第一步要移動的棋子開始，在.etboard內對應的use棋子（如id="r0"）內部加上動畫：<animateTransform id="step1" begin="1.8s;step0.end+1.8s" attributeName="transform" attributeType="XML" type="translate" from="x0,y0" to="x1,y1" dur="0.12s" fill="freeze"/>，它的1.8指btn-speed的時間，from和to就是棋子移動的坐標。比如「from="72,24" to="120,120"」。

5.同時在.etdrop內對應的use棋子（如id="r0f"）內部加上移動坐標相同的動畫：<animateTransform begin="step1.begin" end="step1.end" attributeName="transform" attributeType="XML" type="translate" from="x0,y0" to="x1,y1" fill="freeze"/>，再加上<set begin="step1.begin" end="step1.end" attributeName="opacity" to="1"/>。

6.如果有棋子被吃掉，則把.etboard內對應的use棋子（如id="n0"）內部加上<set begin="step1.end" end="step0.begin+1s" attributeName="opacity" to="0"/>。

7.從第二步開始，.etboard內對應的use棋子加的動畫的begin將改為上一步的begin+「btn-speed的時間」，如「<animateTransform id="step2" begin="step1.begin+1.8s"」。

8.當最後一步走完後（如step9），在.etboard內部的最後加上「<animate id="step0" begin="step9.end+4s" attributeName="opacity" values="1;0;0;1" dur="3s" fill="freeze" />」，然後把所有.etboard和.etdrop內移動過的use棋子都加上「<animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="x0,y0" fill="freeze"/>」移回初始位置。

9.彈出預覽窗口，下方將給出下載鏈接download(大小byte)，下載文件名是ejcees_animate_yyyymmdd_hhiiss.svg。右上角有關閉按鈕。

只需給出要修改的地方，所有的代碼和注釋都要是英文。

ejsoon · 帖子由 **ejsoon** » 2026年 3月 15日 08:18

gemini3.1pro：

Here is the implementation for the "Export SVG" feature matching your precise requirements.

You will need to replace the existing document.getElementById('tool-exp-svg').addEventListener('click', ...); block and insert the new UI helper function showSvgExportModal().

Replace the tool-exp-svg click listener with the following code:

代码：全选

// SVG Export Feature Implementation
            document.getElementById('tool-exp-svg').addEventListener('click', () => {
                if (isExportTextMode || isEditingComment || isEditMode) return;

                let exportStart = 0;
                let exportEnd = getPathDepth(historyFEN, currentBranch) - 1;
                let isAnimation = true;

                // 1. Determine export bounds based on the "Range Selection" (isRangeMode) logic
                if (isRangeMode) {
                    if (rangeStart === null && rangeEnd === null) {
                        isAnimation = false;
                        exportStart = currentStepIndex;
                        exportEnd = currentStepIndex;
                    } else if (rangeStart !== null && rangeEnd !== null && rangeStart === rangeEnd) {
                        isAnimation = false;
                        exportStart = rangeStart;
                        exportEnd = rangeEnd;
                    } else if (rangeStart !== null && rangeEnd === null) {
                        exportStart = rangeStart;
                    } else if (rangeStart !== null && rangeEnd !== null && rangeStart !== rangeEnd) {
                        exportStart = Math.min(rangeStart, rangeEnd);
                        exportEnd = Math.max(rangeStart, rangeEnd);
                    }
                    
                    // Cleanup range mode UI
                    isRangeMode = false;
                    clearRangeBorders();
                    renderNoteUI();
                }

                // Backup current state and jump to start frame to construct DOM accurately
                const savedStep = currentStepIndex;
                jumpToStep(exportStart);

                // Clone initial state SVG
                const cloneSvg = document.querySelector('.ejceespb').cloneNode(true);
                
                // 2. Remove specific elements
                const w2t = cloneSvg.querySelector('#whiteToTransparent');
                if (w2t) w2t.remove();
                const startDot = cloneSvg.querySelector('#ejceesstartdot');
                if (startDot) startDot.remove();

                // Clean up strokes/highlights
                cloneSvg.querySelectorAll('use').forEach(p => {
                    p.removeAttribute('currentmove');
                    p.setAttribute('stroke', 'none');
                    p.removeAttribute('stroke-width');
                });

                if (!isAnimation) {
                    // Export Static SVG Snapshot
                    const svgString = new XMLSerializer().serializeToString(cloneSvg);
                    showSvgExportModal(svgString, false);
                    jumpToStep(savedStep); // Restore
                    return;
                }

                // ---------------------
                // Export SVG Animation
                // ---------------------
                cloneSvg.setAttribute('class', 'ejceespbanimate'); // Step 1
                const etboardClone = cloneSvg.querySelector('.etboard');
                const etdropClone = cloneSvg.querySelector('.etdrop');

                const movedPieceIds = new Set();
                const initialCoords = {};

                // Step 3: Copy all pieces to .etdrop with 'f' suffix and opacity 0
                const boardPieces = etboardClone.querySelectorAll('use');
                boardPieces.forEach(p => {
                    const href = p.getAttribute('href') || p.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
                    if (/^#(tile([2-9]|1[0-5]))$/.test(href)) {
                        const id = p.getAttribute('id');
                        const pf = p.cloneNode(true);
                        pf.setAttribute('id', id + 'f');
                        pf.setAttribute('opacity', '0');
                        etdropClone.appendChild(pf);

                        // Extract initial visual coordinates for final reset
                        const transform = p.getAttribute('transform');
                        const match = transform.match(/translate\(([^,]+),\s*([^)]+)\)/);
                        if (match) {
                            initialCoords[id] = `${match[1]},${match[2]}`;
                        }
                    }
                });

                // Traverse history tree to collect exact move coordinates within range
                let pathNodes = [];
                let curr = historyFEN;
                let ptr = 0;
                let tempStep = 0;
                while (curr) {
                    if (tempStep > exportStart && tempStep <= exportEnd) {
                        pathNodes.push(curr);
                    }
                    if (tempStep === exportEnd) break;
                    const children = curr.v || [];
                    if (children.length === 0) break;
                    const choice = children.length > 1 ? (currentBranch[ptr++] || 0) : 0;
                    curr = children[choice];
                    tempStep++;
                }

                let simMap = new Map(tileMap); // Synchronized to exportStart
                const delayStr = playSpeed + 's';

                pathNodes.forEach((node, i) => {
                    let stepNum = i + 1;
                    let moveData = node.lastMove;
                    if (!moveData) return;

                    let pieceId = simMap.get(`${moveData.startX},${moveData.startY}`);
                    let capturedId = simMap.get(`${moveData.endX},${moveData.endY}`);

                    if (!pieceId) return;

                    let visStart = getVisualCoords(moveData.startX, moveData.startY);
                    let visEnd = getVisualCoords(moveData.endX, moveData.endY);
                    let fromStr = `${visStart.x * 48 + 24},${visStart.y * 48 + 24}`;
                    let toStr = `${visEnd.x * 48 + 24},${visEnd.y * 48 + 24}`;

                    movedPieceIds.add(pieceId);

                    // Update local simMap to track piece IDs across future moves
                    simMap.delete(`${moveData.startX},${moveData.startY}`);
                    if (capturedId) simMap.delete(`${moveData.endX},${moveData.endY}`);
                    simMap.set(`${moveData.endX},${moveData.endY}`, pieceId);

                    let beginStr = (stepNum === 1) 
                        ? `${delayStr};step0.end+${delayStr}` 
                        : `step${stepNum - 1}.begin+${delayStr}`; // Step 7

                    // Step 4: Add animation to the primary piece in .etboard
                    const boardPiece = etboardClone.querySelector(`#${pieceId}`);
                    if (boardPiece) {
                        const animT = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
                        animT.setAttribute('id', `step${stepNum}`);
                        animT.setAttribute('begin', beginStr);
                        animT.setAttribute('attributeName', 'transform');
                        animT.setAttribute('attributeType', 'XML');
                        animT.setAttribute('type', 'translate');
                        animT.setAttribute('from', fromStr);
                        animT.setAttribute('to', toStr);
                        animT.setAttribute('dur', '0.12s');
                        animT.setAttribute('fill', 'freeze');
                        boardPiece.appendChild(animT);
                    }

                    // Step 5: Add animation and opacity setter to clone piece in .etdrop
                    const dropPiece = etdropClone.querySelector(`#${pieceId}f`);
                    if (dropPiece) {
                        const animT = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
                        animT.setAttribute('begin', `step${stepNum}.begin`);
                        animT.setAttribute('end', `step${stepNum}.end`);
                        animT.setAttribute('attributeName', 'transform');
                        animT.setAttribute('attributeType', 'XML');
                        animT.setAttribute('type', 'translate');
                        animT.setAttribute('from', fromStr);
                        animT.setAttribute('to', toStr);
                        animT.setAttribute('fill', 'freeze');
                        dropPiece.appendChild(animT);

                        const animO = document.createElementNS('http://www.w3.org/2000/svg', 'set');
                        animO.setAttribute('begin', `step${stepNum}.begin`);
                        animO.setAttribute('end', `step${stepNum}.end`);
                        animO.setAttribute('attributeName', 'opacity');
                        animO.setAttribute('to', '1');
                        dropPiece.appendChild(animO);
                    }

                    // Step 6: Handle captured piece visibility
                    if (capturedId) {
                        const capPiece = etboardClone.querySelector(`#${capturedId}`);
                        if (capPiece) {
                            const animCap = document.createElementNS('http://www.w3.org/2000/svg', 'set');
                            animCap.setAttribute('begin', `step${stepNum}.end`);
                            animCap.setAttribute('end', `step0.begin+1s`);
                            animCap.setAttribute('attributeName', 'opacity');
                            animCap.setAttribute('to', '0');
                            capPiece.appendChild(animCap);
                        }
                    }
                });

                // Step 8: Loop/Reset Animation Logic
                if (pathNodes.length > 0) {
                    const finalStepNum = pathNodes.length;
                    
                    // Main reset trigger 4 seconds after the final step
                    const step0 = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
                    step0.setAttribute('id', 'step0');
                    step0.setAttribute('begin', `step${finalStepNum}.end+4s`);
                    step0.setAttribute('attributeName', 'opacity');
                    step0.setAttribute('values', '1;0;0;1');
                    step0.setAttribute('dur', '3s');
                    step0.setAttribute('fill', 'freeze');
                    etboardClone.appendChild(step0);

                    // Move all participated pieces back to initial states natively
                    movedPieceIds.forEach(pid => {
                        const initialPos = initialCoords[pid];
                        if (!initialPos) return;

                        const bp = etboardClone.querySelector(`#${pid}`);
                        if (bp) {
                            const r = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
                            r.setAttribute('begin', `step0.begin+1s`);
                            r.setAttribute('dur', '1s');
                            r.setAttribute('attributeName', 'transform');
                            r.setAttribute('attributeType', 'XML');
                            r.setAttribute('type', 'translate');
                            r.setAttribute('to', initialPos);
                            r.setAttribute('fill', 'freeze');
                            bp.appendChild(r);
                        }

                        const dp = etdropClone.querySelector(`#${pid}f`);
                        if (dp) {
                            const r = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
                            r.setAttribute('begin', `step0.begin+1s`);
                            r.setAttribute('dur', '1s');
                            r.setAttribute('attributeName', 'transform');
                            r.setAttribute('attributeType', 'XML');
                            r.setAttribute('type', 'translate');
                            r.setAttribute('to', initialPos);
                            r.setAttribute('fill', 'freeze');
                            dp.appendChild(r);
                        }
                    });
                }

                // Finalize Output
                const svgString = new XMLSerializer().serializeToString(cloneSvg);
                showSvgExportModal(svgString, true);

                jumpToStep(savedStep); // Restore UI state
            });

            // Step 9: Render Preview / Download UI Modal
            function showSvgExportModal(svgContent, isAnimation) {
                const blob = new Blob([svgContent], { type: 'image/svg+xml' });
                const url = URL.createObjectURL(blob);
                const size = blob.size;
                
                // Formatted Timestamp for Filename
                const now = new Date();
                const timestamp = now.getFullYear().toString().padStart(4, '0') +
                    (now.getMonth() + 1).toString().padStart(2, '0') +
                    now.getDate().toString().padStart(2, '0') +
                    now.getHours().toString().padStart(2, '0') +
                    now.getMinutes().toString().padStart(2, '0') +
                    now.getSeconds().toString().padStart(2, '0');
                const filename = `ejcees_${isAnimation ? 'animate' : 'static'}_${timestamp}.svg`;

                // Modal Overlay
                const modal = document.createElement('div');
                modal.style.position = 'fixed';
                modal.style.top = '0';
                modal.style.left = '0';
                modal.style.width = '100vw';
                modal.style.height = '100vh';
                modal.style.backgroundColor = 'rgba(0,0,0,0.85)';
                modal.style.zIndex = '9999';
                modal.style.display = 'flex';
                modal.style.justifyContent = 'center';
                modal.style.alignItems = 'center';

                // Modal Box Container
                const box = document.createElement('div');
                box.style.position = 'relative';
                box.style.backgroundColor = '#333';
                box.style.padding = '35px 20px 20px';
                box.style.borderRadius = '8px';
                box.style.display = 'flex';
                box.style.flexDirection = 'column';
                box.style.alignItems = 'center';
                box.style.gap = '15px';
                box.style.maxHeight = '90vh';
                box.style.boxShadow = '0px 0px 25px rgba(0,0,0,0.5)';

                // Preview Container
                const preview = document.createElement('div');
                preview.style.width = 'auto';
                preview.style.height = '60vh';
                preview.style.maxWidth = '90vw';
                preview.style.backgroundColor = '#f4f4f9';
                preview.innerHTML = svgContent;

                // Make SVG responsive inside the popup 
                const previewSvg = preview.querySelector('svg');
                if (previewSvg) {
                    previewSvg.style.width = '100%';
                    previewSvg.style.height = '100%';
                }

                // Download Link
                const link = document.createElement('a');
                link.href = url;
                link.download = filename;
                link.textContent = `Download (${size} bytes)`;
                link.style.color = '#66b2ff';
                link.style.textDecoration = 'none';
                link.style.fontSize = '16px';
                link.style.fontWeight = 'bold';
                link.style.padding = '5px 15px';
                link.style.border = '1px solid #66b2ff';
                link.style.borderRadius = '4px';

                // Top Right Close Button
                const closeBtn = document.createElement('button');
                closeBtn.innerHTML = '<svg viewBox="0 0 24 24" width="22" height="22"><path fill="#fff" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
                closeBtn.style.position = 'absolute';
                closeBtn.style.top = '10px';
                closeBtn.style.right = '10px';
                closeBtn.style.background = 'transparent';
                closeBtn.style.border = 'none';
                closeBtn.style.cursor = 'pointer';
                closeBtn.onclick = () => {
                    document.body.removeChild(modal);
                    URL.revokeObjectURL(url);
                };

                // Append Elements
                box.appendChild(closeBtn);
                box.appendChild(preview);
                box.appendChild(link);
                modal.appendChild(box);
                document.body.appendChild(modal);
            }

ejsoon · 帖子由 **ejsoon** » 2026年 3月 15日 08:26

可還行？

代码：全选

<svg class="ejceespbanimate" viewBox="0 0 432 480" preserveAspectRatio="xMidYMid meet" id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="432" rfm="repeat">
                <defs mode="0" rotatestep="1" rotatestart="0" stepvalue="90" snapto="0" displaywait="1">
                    <g id="tile0" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z"/>
                        <path fill="none" d="M 12,5 h -7 v 7 M -12,5 h 7 v 7 M 12,-5 h -7 v -7 M -12,-5 h 7 v -7"/>
                    </g>
                    <g id="tile1" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z"/>
                        <path fill="none" d="M 12,5 h -7 v 7 M 12,-5 h -7 v -7"/>
                    </g>
                    <g id="tile2" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 4.41,6.71 Q 4.33,8.35 4.49,9.11 4.52,9.27 4.59,9.38 4.74,9.53 4.82,9.32 4.97,8.96 4.96,6.66 5.7,6.6 8.21,6.59 8.44,6.6 8.5,6.5 8.56,6.36 8.38,6.2 7.64,5.64 7.21,5.86 6.32,6.01 4.96,6.21 q -0,-0.34 -0,-0.73 0.41,-0.05 0.97,-0.08 0,0.02 0.01,0.06 0.03,0.16 0.17,0.15 0.14,-0 0.23,-0.15 Q 6.51,5.29 6.78,4.46 6.97,3.92 7.35,3.63 7.56,3.46 7.4,3.29 7.22,3.11 6.69,2.82 6.53,2.7 5.88,2.86 5.4,2.89 4.94,2.99 4.95,2.59 4.97,2.29 5.51,2.18 6.08,2.08 6.56,1.97 6.63,1.91 6.72,1.85 6.67,1.76 6.61,1.65 6.33,1.57 6.04,1.51 5.76,1.61 5.37,1.73 4.98,1.84 q 0,-0 0,-0.01 Q 5,1.49 5.18,1.2 5.24,1.03 5.04,0.88 4.79,0.69 4.36,0.58 4.16,0.53 4.03,0.68 3.94,0.76 4.07,0.88 4.36,1.13 4.39,1.49 q 0,0.2 0,0.48 -0.56,0.09 -1.18,0.14 -0.34,0.03 -0.1,0.21 0.36,0.22 1.04,0.09 0.11,-0.02 0.24,-0.02 0,0.3 0,0.68 Q 4.12,3.12 3.88,3.18 3.23,3.3 2.79,3.36 2.56,3.25 2.35,3.22 q -0.06,-0 -0.12,0.03 -0.06,0.06 0.03,0.16 0.3,0.36 0.53,1.58 0.06,0.61 0.45,0.84 0,0 0.02,0 0.13,0.02 0.15,-0.17 0.06,0 0.13,-0 0.31,-0.08 0.83,-0.13 0,0.39 -0,0.75 Q 2.84,6.47 0.99,6.68 0.74,6.69 0.93,6.9 1.32,7.26 1.73,7.14 3.32,6.72 4.13,6.72 4.25,6.7 4.41,6.71 Z M 4.94,4.42 Q 5.29,4.35 5.62,4.32 5.83,4.3 5.76,4.18 5.67,4.04 5.43,3.98 5.25,3.94 4.94,4.02 q 0,-0.34 0,-0.66 1.19,-0.19 1.41,-0.08 0.09,0.06 0.02,0.39 -0.27,1.19 -0.4,1.46 -0.27,-0.2 -1.03,-0 0,-0.37 0,-0.69 z M 4.41,4.15 q -0.39,0.09 -0.74,0.16 -0.14,0.03 0.02,0.17 0.09,0.06 0.28,0.04 0.2,-0.03 0.42,-0.05 0,0.36 0,0.73 Q 3.88,5.31 3.42,5.37 3.38,5.14 3.3,4.91 3.12,3.93 3.08,3.72 3.56,3.57 4.41,3.44 q 0,0.31 0,0.7 z"/>
                    </g>
                    <g id="tile3" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 4.41,6.71 Q 4.33,8.35 4.49,9.11 4.52,9.27 4.59,9.38 4.74,9.53 4.82,9.32 4.97,8.96 4.96,6.66 5.7,6.6 8.21,6.59 8.44,6.6 8.5,6.5 8.56,6.36 8.38,6.2 7.64,5.64 7.21,5.86 6.32,6.01 4.96,6.21 q -0,-0.34 -0,-0.73 0.41,-0.05 0.97,-0.08 0,0.02 0.01,0.06 0.03,0.16 0.17,0.15 0.14,-0 0.23,-0.15 Q 6.51,5.29 6.78,4.46 6.97,3.92 7.35,3.63 7.56,3.46 7.4,3.29 7.22,3.11 6.69,2.82 6.53,2.7 5.88,2.86 5.4,2.89 4.94,2.99 4.95,2.59 4.97,2.29 5.51,2.18 6.08,2.08 6.56,1.97 6.63,1.91 6.72,1.85 6.67,1.76 6.61,1.65 6.33,1.57 6.04,1.51 5.76,1.61 5.37,1.73 4.98,1.84 q 0,-0 0,-0.01 Q 5,1.49 5.18,1.2 5.24,1.03 5.04,0.88 4.79,0.69 4.36,0.58 4.16,0.53 4.03,0.68 3.94,0.76 4.07,0.88 4.36,1.13 4.39,1.49 q 0,0.2 0,0.48 -0.56,0.09 -1.18,0.14 -0.34,0.03 -0.1,0.21 0.36,0.22 1.04,0.09 0.11,-0.02 0.24,-0.02 0,0.3 0,0.68 Q 4.12,3.12 3.88,3.18 3.23,3.3 2.79,3.36 2.56,3.25 2.35,3.22 q -0.06,-0 -0.12,0.03 -0.06,0.06 0.03,0.16 0.3,0.36 0.53,1.58 0.06,0.61 0.45,0.84 0,0 0.02,0 0.13,0.02 0.15,-0.17 0.06,0 0.13,-0 0.31,-0.08 0.83,-0.13 0,0.39 -0,0.75 Q 2.84,6.47 0.99,6.68 0.74,6.69 0.93,6.9 1.32,7.26 1.73,7.14 3.32,6.72 4.13,6.72 4.25,6.7 4.41,6.71 Z M 4.94,4.42 Q 5.29,4.35 5.62,4.32 5.83,4.3 5.76,4.18 5.67,4.04 5.43,3.98 5.25,3.94 4.94,4.02 q 0,-0.34 0,-0.66 1.19,-0.19 1.41,-0.08 0.09,0.06 0.02,0.39 -0.27,1.19 -0.4,1.46 -0.27,-0.2 -1.03,-0 0,-0.37 0,-0.69 z M 4.41,4.15 q -0.39,0.09 -0.74,0.16 -0.14,0.03 0.02,0.17 0.09,0.06 0.28,0.04 0.2,-0.03 0.42,-0.05 0,0.36 0,0.73 Q 3.88,5.31 3.42,5.37 3.38,5.14 3.3,4.91 3.12,3.93 3.08,3.72 3.56,3.57 4.41,3.44 q 0,0.31 0,0.7 z"/>
                    </g>
                    <g id="tile4" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 5.07,3.57 Q 5.07,3.15 5.1,2.79 6.06,2.54 6.08,2.53 6.14,2.46 6.12,2.4 6.05,2.31 5.84,2.27 5.56,2.21 5.11,2.42 q 0,-0.16 0.02,-0.41 0.06,-0.19 -0.19,-0.4 l -0,-0 Q 6.69,1.25 6.74,1.22 6.8,1.15 6.78,1.08 6.72,0.97 6.48,0.9 6.28,0.85 5.25,1.12 4.16,1.35 3.24,1.41 q -0.02,0 -0.04,0.01 Q 3.16,1.39 3.09,1.36 2.75,1.12 2.56,1.1 2.42,1.11 2.4,1.21 2.37,1.32 2.46,1.4 2.61,1.65 2.65,1.85 2.79,3.34 2.5,4.97 q -0.06,0.23 -0.05,0.27 0,0.09 0.14,0.2 0.14,0.12 0.21,0.13 1.64,-0.61 4.14,-0.72 0.13,0 0.29,0.09 0.12,0.09 0.1,0.26 0,0.16 -0.24,1.61 Q 6.92,7.71 6.71,8.03 6.62,8.23 6.38,8.21 6.12,8.13 5.86,8.06 5.68,8 5.64,8.04 5.6,8.09 5.76,8.21 6.33,8.95 6.37,9.17 6.4,9.26 6.51,9.28 6.67,9.32 7.01,8.99 7.33,8.68 7.44,8.27 8.03,5.27 8.25,5.12 8.34,5.06 8.33,4.98 8.34,4.9 8.01,4.65 7.57,4.37 7.28,4.46 q -0.22,0.02 -0.46,0.05 -0.75,0 -1.77,0.2 Q 5.05,4.31 5.06,3.93 5.4,3.84 5.77,3.77 6.08,3.68 6.12,3.64 6.18,3.58 6.15,3.51 6.09,3.43 5.87,3.38 5.65,3.35 5.07,3.57 Z M 4.61,3.69 Q 4.22,3.76 3.8,3.82 3.54,3.86 3.73,3.99 3.98,4.11 4.58,4.03 q 0,0 0.02,0 0,0.34 0,0.75 Q 3.94,4.86 3.48,4.98 3.14,5.02 3.12,4.77 3.08,4.51 3.14,3.11 3.23,1.96 3.31,1.85 q 0.03,-0.06 0.06,-0.13 0.14,0.03 1.02,-0.04 0.02,-0 0.07,-0 0.09,0.16 0.13,0.9 -0.31,0.06 -0.69,0.11 -0.26,0.05 -0.07,0.17 0.3,0.16 0.73,0.05 0,-0 0.03,0 0,0.31 0,0.79 z M 1.55,5.95 Q 1.46,6.49 1.25,7.01 1.14,7.36 1.38,7.65 1.49,7.8 1.66,7.64 1.84,7.43 1.9,7.11 1.97,6.73 1.91,6.44 1.9,6.12 1.77,5.9 1.71,5.83 1.65,5.83 1.57,5.87 1.55,5.95 Z m 1.11,0.42 q 0.09,0.55 0.25,0.75 0.08,0.08 0.19,0.02 Q 3.21,7.11 3.26,6.98 3.33,6.62 2.94,6.21 2.93,6.18 2.91,6.18 2.81,6.08 2.74,6.06 q -0.03,-0 -0.07,0.07 -0.03,0.08 -2e-7,0.24 z M 3.77,6.17 Q 3.94,6.62 4.16,6.85 4.27,6.92 4.38,6.84 4.46,6.75 4.48,6.62 4.49,6.42 4.4,6.27 4.26,6.07 3.97,5.91 3.86,5.82 3.77,5.83 q -0.05,-0 -0.06,0.09 -0,0.09 0.06,0.24 z m 1.32,-0.3 q 0.26,0.58 0.53,0.81 0.12,0.06 0.23,-0.02 0.09,-0.09 0.11,-0.25 0,-0.39 -0.66,-0.82 l -0,-0 q -0.12,-0.08 -0.22,-0.07 -0.05,0 -0.06,0.11 -0,0.09 0.08,0.26 z"/>
                    </g>
                    <g id="tile5" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 5.07,3.57 Q 5.07,3.15 5.1,2.79 6.06,2.54 6.08,2.53 6.14,2.46 6.12,2.4 6.05,2.31 5.84,2.27 5.56,2.21 5.11,2.42 q 0,-0.16 0.02,-0.41 0.06,-0.19 -0.19,-0.4 l -0,-0 Q 6.69,1.25 6.74,1.22 6.8,1.15 6.78,1.08 6.72,0.97 6.48,0.9 6.28,0.85 5.25,1.12 4.16,1.35 3.24,1.41 q -0.02,0 -0.04,0.01 Q 3.16,1.39 3.09,1.36 2.75,1.12 2.56,1.1 2.42,1.11 2.4,1.21 2.37,1.32 2.46,1.4 2.61,1.65 2.65,1.85 2.79,3.34 2.5,4.97 q -0.06,0.23 -0.05,0.27 0,0.09 0.14,0.2 0.14,0.12 0.21,0.13 1.64,-0.61 4.14,-0.72 0.13,0 0.29,0.09 0.12,0.09 0.1,0.26 0,0.16 -0.24,1.61 Q 6.92,7.71 6.71,8.03 6.62,8.23 6.38,8.21 6.12,8.13 5.86,8.06 5.68,8 5.64,8.04 5.6,8.09 5.76,8.21 6.33,8.95 6.37,9.17 6.4,9.26 6.51,9.28 6.67,9.32 7.01,8.99 7.33,8.68 7.44,8.27 8.03,5.27 8.25,5.12 8.34,5.06 8.33,4.98 8.34,4.9 8.01,4.65 7.57,4.37 7.28,4.46 q -0.22,0.02 -0.46,0.05 -0.75,0 -1.77,0.2 Q 5.05,4.31 5.06,3.93 5.4,3.84 5.77,3.77 6.08,3.68 6.12,3.64 6.18,3.58 6.15,3.51 6.09,3.43 5.87,3.38 5.65,3.35 5.07,3.57 Z M 4.61,3.69 Q 4.22,3.76 3.8,3.82 3.54,3.86 3.73,3.99 3.98,4.11 4.58,4.03 q 0,0 0.02,0 0,0.34 0,0.75 Q 3.94,4.86 3.48,4.98 3.14,5.02 3.12,4.77 3.08,4.51 3.14,3.11 3.23,1.96 3.31,1.85 q 0.03,-0.06 0.06,-0.13 0.14,0.03 1.02,-0.04 0.02,-0 0.07,-0 0.09,0.16 0.13,0.9 -0.31,0.06 -0.69,0.11 -0.26,0.05 -0.07,0.17 0.3,0.16 0.73,0.05 0,-0 0.03,0 0,0.31 0,0.79 z M 1.55,5.95 Q 1.46,6.49 1.25,7.01 1.14,7.36 1.38,7.65 1.49,7.8 1.66,7.64 1.84,7.43 1.9,7.11 1.97,6.73 1.91,6.44 1.9,6.12 1.77,5.9 1.71,5.83 1.65,5.83 1.57,5.87 1.55,5.95 Z m 1.11,0.42 q 0.09,0.55 0.25,0.75 0.08,0.08 0.19,0.02 Q 3.21,7.11 3.26,6.98 3.33,6.62 2.94,6.21 2.93,6.18 2.91,6.18 2.81,6.08 2.74,6.06 q -0.03,-0 -0.07,0.07 -0.03,0.08 -2e-7,0.24 z M 3.77,6.17 Q 3.94,6.62 4.16,6.85 4.27,6.92 4.38,6.84 4.46,6.75 4.48,6.62 4.49,6.42 4.4,6.27 4.26,6.07 3.97,5.91 3.86,5.82 3.77,5.83 q -0.05,-0 -0.06,0.09 -0,0.09 0.06,0.24 z m 1.32,-0.3 q 0.26,0.58 0.53,0.81 0.12,0.06 0.23,-0.02 0.09,-0.09 0.11,-0.25 0,-0.39 -0.66,-0.82 l -0,-0 q -0.12,-0.08 -0.22,-0.07 -0.05,0 -0.06,0.11 -0,0.09 0.08,0.26 z"/>
                    </g>
                    <g id="tile6" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 2.22,6.87 q 0.08,0 0.18,-0.01 0.36,-0.11 1.14,-0.23 0.09,-0 0.1,-0.1 0,-0.06 -0.23,-0.18 Q 3.6,5.66 3.8,5.47 4,5.24 3.79,5.12 3.62,5.03 3.39,4.87 3.22,4.76 2.84,5 2.48,5.14 2.04,5.26 2.29,4.73 2.62,3.91 2.74,3.57 2.75,3.55 2.66,3.38 2.48,3.35 3.96,2.93 4.01,2.88 4.1,2.8 4.04,2.72 3.98,2.61 3.69,2.57 3.4,2.53 3.12,2.66 2.75,2.81 2.34,2.94 1.88,3.06 1.35,3.14 1.01,3.23 1.27,3.37 1.52,3.51 1.98,3.48 2.12,3.95 1.64,5.15 q -0.02,-0 -0.06,-0.01 -0.11,-0.02 -0.13,0.01 -0.05,0.03 0,0.18 0,0.03 0.04,0.12 -0.61,1 -1.22,1.81 -0.06,0.05 0.03,0.06 0.5,-0.16 1.32,-1.33 0,-0.02 0.02,-0.04 0.09,0.39 0.17,0.92 0,0.28 0.17,0.47 0.13,0.19 0.18,0.05 0.06,-0.17 0.01,-0.53 z M 2.91,6.32 Q 2.51,6.47 2.17,6.57 2.05,5.81 2.02,5.53 q 0.05,-0 0.13,-0.03 0.37,-0.09 0.7,-0.17 0.22,-0.05 0.26,0.02 0.06,0.05 -0,0.35 -0.06,0.27 -0.14,0.6 -0.03,0 -0.06,0.01 z M 4.81,3.38 Q 4.87,3.42 4.97,3.47 5.18,3.59 5.34,3.53 7.1,3.03 7.21,3.18 7.31,3.3 7.28,3.65 7.24,4.6 7.03,5.03 6.88,5.32 6.63,5.29 q -0.11,0 -0.21,-0 Q 6.18,5.22 6.35,5.43 6.61,5.77 6.73,6.01 6.91,6.18 7.07,6.03 7.6,5.64 7.78,4.27 7.82,3.38 8.01,3.14 8.13,3.02 8.06,2.93 7.98,2.84 7.5,2.64 7.33,2.58 7.15,2.7 6.97,2.81 6.27,2.98 5.56,3.16 4.95,3.22 5.3,2.79 5.7,2.16 5.87,1.84 6.01,1.69 6.11,1.58 6.05,1.46 6.01,1.34 5.74,1.13 5.47,0.97 5.3,0.98 5.12,1 5.21,1.21 5.32,1.41 5.24,1.59 5.04,2.2 4.71,2.78 4.4,3.34 3.95,3.95 3.86,4.04 3.84,4.12 3.81,4.21 3.94,4.19 4.17,4.14 4.81,3.38 Z M 4.65,4.58 Q 4.55,4.5 4.41,4.44 4.28,4.41 4.22,4.45 4.15,4.49 4.2,4.65 4.31,4.99 4.28,5.32 4.14,7.24 4.31,7.78 4.35,8.06 4.62,8.3 5.46,8.99 7.45,8.73 7.62,8.7 7.83,8.65 8.31,8.51 8.79,8.18 8.98,8.04 8.85,7.78 8.73,7.59 8.55,6.97 8.54,6.82 8.48,6.76 8.42,6.72 8.38,6.9 8.1,7.58 7.94,7.78 7.77,7.99 7.28,8.12 6.14,8.4 5.2,8.03 4.82,7.85 4.73,7.62 4.51,7.14 4.62,6.03 4.74,6.08 4.9,6.05 5.26,5.97 6.03,5.9 q 0.09,-0 0.09,-0.09 0,-0.06 -0.19,-0.18 0.17,-0.64 0.37,-0.83 0.17,-0.2 0,-0.32 Q 6.15,4.36 5.92,4.21 5.77,4.13 5.61,4.22 5.42,4.34 5.16,4.44 4.93,4.5 4.65,4.58 Z m 0.13,0.3 q 0,-0.03 0,-0.08 0.02,-0.02 0.66,-0.16 0.19,-0.03 0.24,0.02 0.05,0.05 -0.01,0.32 -0.06,0.26 -0.15,0.56 -0.02,0 -0.05,0.01 Q 5,5.72 4.65,5.79 4.68,5.37 4.78,4.89 Z"/>
                    </g>
                    <g id="tile7" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 4.74,3.46 Q 5.06,3.69 5.32,3.61 6.88,3.12 6.99,3.32 7.07,3.47 7.05,3.86 6.99,5.04 6.74,5.58 6.62,5.84 6.4,5.83 6.23,5.79 6.08,5.74 5.86,5.64 6,5.89 q 0.33,0.39 0.48,0.68 0.22,0.2 0.39,0 Q 7.17,6.32 7.34,5.91 7.55,5.42 7.59,3.97 7.6,3.46 7.76,3.2 7.87,3.08 7.81,2.98 7.72,2.88 7.21,2.69 7.01,2.62 6.84,2.75 6.67,2.85 6.04,3.02 5.42,3.2 4.89,3.26 4.9,3.24 4.93,3.21 5.24,2.78 5.6,2.13 5.74,1.82 5.87,1.67 5.95,1.56 5.89,1.44 5.84,1.32 5.55,1.13 5.29,0.98 5.1,1.01 4.93,1.05 5.03,1.25 5.22,1.55 4.67,2.76 4.41,3.3 4.04,3.91 3.95,4.03 3.94,4.08 3.91,4.19 4.05,4.16 4.3,4.04 4.74,3.46 Z M 4.23,4.69 Q 4.14,4.6 4,4.57 q -0.11,-0.03 -0.17,0 -0.05,0.02 -0,0.17 0.11,0.33 0.08,0.64 -0.11,1.9 0.05,2.42 0.03,0.28 0.32,0.53 1.06,0.76 3.22,0.32 Q 7.57,8.65 7.66,8.64 8.17,8.49 8.67,8.15 8.85,8.03 8.75,7.77 8.64,7.46 8.54,6.52 q 0,-0.14 -0.06,-0.2 Q 8.42,6.28 8.37,6.44 8.05,7.43 7.85,7.73 7.65,7.96 7.12,8.11 5.89,8.43 4.85,8.08 4.45,7.91 4.35,7.66 4.1,7.16 4.22,6.15 q 0.12,0.05 0.26,0 0.37,-0.09 1.2,-0.18 0.09,-0 0.1,-0.09 0,-0.06 -0.21,-0.18 0.17,-0.56 0.36,-0.73 0.2,-0.22 0,-0.35 Q 5.78,4.51 5.55,4.35 5.38,4.26 4.99,4.47 4.63,4.61 4.23,4.69 Z m 0.13,0.29 q 0,-0.02 0,-0.04 0.09,-0.02 0.68,-0.15 0.17,-0.03 0.23,0.03 0.02,0.02 -0.15,0.84 Q 4.65,5.8 4.24,5.9 4.27,5.47 4.37,4.98 Z M 1.2,3.42 Q 1.14,3.99 0.98,4.52 0.87,4.83 1.12,5.1 1.23,5.24 1.38,5.07 1.74,4.59 1.56,3.85 1.52,3.56 1.4,3.37 1.34,3.3 1.29,3.31 1.22,3.35 1.2,3.42 Z m 1.32,2.53 q 0.03,0.06 0.14,0.16 0.26,0.27 0.54,0.61 0.08,0.09 0.19,0.11 0.06,0 0.12,-0.08 0.05,-0.09 0.01,-0.31 Q 3.52,6.25 3.26,6.07 2.64,5.73 2.54,5.76 2.63,5.16 2.67,3.88 3.02,3.68 3.23,3.55 3.65,3.22 3.88,3.14 4.05,3.08 3.97,2.94 3.87,2.82 3.69,2.7 3.51,2.58 3.42,2.6 q -0.09,0 -0.06,0.11 0,0.23 -0.37,0.64 Q 2.83,3.51 2.69,3.68 2.7,2.58 2.93,2.03 2.99,1.91 2.89,1.8 2.68,1.64 2.34,1.54 2.12,1.49 2.04,1.55 1.96,1.62 2.03,1.72 2.57,2.56 2.11,5.8 1.8,7.01 1.48,7.52 1.21,7.89 0.81,8.28 q -0.09,0.08 -0.08,0.12 0,0.03 0.11,0.01 Q 0.95,8.45 1.22,8.3 2.23,7.76 2.52,5.96 Z"/>
                    </g>
                    <g id="tile8" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 4.28,7.72 Q 3.27,7.84 2.14,7.99 1.9,8.02 2.07,8.2 2.39,8.52 2.93,8.4 4.19,8.08 6.78,8.08 q 0.14,0 0.29,0 0.22,0 0.26,-0.09 Q 7.41,7.88 7.23,7.72 6.64,7.27 6,7.42 5.49,7.51 4.8,7.64 4.83,6.24 4.85,4.97 6.83,4.71 8.48,4.9 8.73,4.93 8.8,4.84 8.86,4.69 8.74,4.58 8.42,4.29 7.97,4.09 7.82,4.03 7.55,4.12 q -0.34,0.09 -2.68,0.39 0,-1.93 0.18,-2.53 Q 5.17,1.76 5.02,1.62 4.63,1.31 4.31,1.22 4.14,1.18 3.99,1.32 q -0.06,0.08 0,0.2 0.3,0.5 0.29,1.06 0,0.95 0,1.99 -1.06,0.12 -1.85,0.24 -0.93,0.14 -1.63,0.14 -0.14,0 -0.15,0.12 0,0.12 0.19,0.26 0.41,0.27 0.9,0.16 0.89,-0.33 2.54,-0.5 0,1.29 0,2.67 z"/>
                    </g>
                    <g id="tile9" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 1.97,4.26 q 0.3,0.65 0.09,2.37 -0.06,0.5 -0.2,1.01 -0.13,0.45 0.2,0.9 0,0.02 0.04,0.05 Q 2.28,8.75 2.4,8.49 2.54,8.1 2.54,7.65 2.56,5.23 2.65,4.69 2.71,4.43 2.62,4.32 2.45,4.12 2.32,3.99 2.28,3.93 2.22,3.91 2.62,3.32 3.19,2.2 3.38,1.84 3.37,1.81 3.34,1.72 3.2,1.6 3.03,1.48 2.83,1.44 2.61,1.38 2.5,1.42 2.41,1.46 2.44,1.58 2.67,2.42 1.51,4.12 1.48,4.15 1.47,4.18 1.12,4.67 0.25,5.62 0.16,5.68 0.28,5.69 0.66,5.64 1.63,4.67 1.78,4.47 1.97,4.26 Z m 3.35,2.83 q -0.79,0.09 -1.69,0.22 -0.19,0 -0.04,0.17 0.12,0.12 0.29,0.17 0.2,0.05 0.34,0 1.22,-0.3 3.59,-0.3 0.17,0 0.23,-0.07 Q 8.11,7.19 7.95,7.06 7.44,6.67 6.9,6.83 6.44,6.91 5.8,7.02 5.84,5.92 5.87,4.9 6.39,4.82 8.17,4.62 8.28,4.65 8.39,4.5 8.4,4.38 8.15,4.25 7.75,4.02 7.12,4.2 5.94,4.44 5.88,4.47 q 0,-1.42 0.25,-2.52 Q 6.17,1.83 5.94,1.65 5.54,1.45 5.25,1.4 5.07,1.37 4.97,1.47 q -0.09,0.09 0,0.26 0.33,0.45 0.33,0.79 0.05,0.98 0.06,2.04 Q 4.87,4.63 4.38,4.69 3.82,4.72 3.21,4.79 2.89,4.83 3.13,5.02 3.49,5.3 3.74,5.27 3.86,5.21 5.38,4.98 5.37,6 5.33,7.1 Z"/>
                    </g>
                    <g id="tile10" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="M 5.32,6.58 Q 5.93,7.23 6.58,7.81 6.81,8.02 7.2,8.01 7.9,7.98 8.61,7.78 8.79,7.75 8.8,7.7 8.81,7.64 8.67,7.58 6.82,7.16 5.88,6.58 5.77,6.51 5.67,6.44 5.3,6.18 5.12,6.06 5.06,5.92 4.98,5.86 5.9,5.36 6.34,5.19 6.52,5.16 6.5,5.05 6.46,4.88 6.29,4.68 6.13,4.47 5.9,4.43 5.75,4.42 5.74,4.6 5.75,4.83 4.85,5.71 4.35,5.14 3.62,4.94 3.82,4.73 3.99,4.68 q 0.06,-0 0.07,-0.1 0,-0.13 -0.13,-0.28 0.69,-0.09 1.7,-0.16 l 0,0 q 0.02,0.14 0.14,0.15 Q 5.94,4.28 6.27,3.89 6.46,3.43 6.82,3.17 7.02,3.05 6.88,2.88 6.73,2.71 6.28,2.42 6.14,2.31 5.94,2.36 5.6,2.43 5.17,2.49 4.91,2.52 4.67,2.57 5.64,1.73 5.87,1.63 6.03,1.53 5.93,1.4 5.81,1.28 5.47,1.07 5.33,1 5.19,1.09 q -0.08,0.03 -0.74,0.23 -0.16,0.03 -0.33,0.06 0,-0.09 -0.13,-0.31 Q 3.83,0.89 3.71,0.85 3.57,0.82 3.58,0.98 3.61,1.22 2.98,1.81 2.67,2.07 2.29,2.34 2.2,2.38 2.17,2.43 2.14,2.49 2.23,2.51 2.65,2.57 3.74,1.72 3.85,1.63 3.96,1.57 4.15,1.65 4.81,1.54 4.95,1.49 5,1.53 5.03,1.56 4.97,1.64 4.81,1.91 4.36,2.6 3.85,2.67 3.39,2.76 2.5,2.93 1.92,2.93 q -0.12,-0 -0.13,0.03 -0.05,0.06 0.04,0.19 0.26,0.37 0.48,1.02 0.05,0.19 0.19,0.31 0.17,0.17 0.21,0.02 0,-0.03 0,-0.08 0,0 0.73,-0.09 -0,0 -0.01,0.04 -0.59,0.78 -2.04,1.4 -0.06,0 -0,0.06 0.47,0.09 1.43,-0.4 0.02,-0.02 0.59,-0.38 0.02,0.05 0.16,0.13 Q 3.27,5.94 1.56,6.96 1.39,7.05 1.6,7.04 2.22,7.07 3.5,6.03 3.74,5.78 4.09,5.53 q 0,-0 0,-0 Q 4.25,5.64 4.38,5.77 3.57,7.05 1.56,8.31 1.42,8.41 1.51,8.44 1.6,8.5 1.72,8.45 2.97,8.14 4.28,6.7 4.7,6.25 4.69,6.22 q 0,-0 0,-0.02 0.33,0.58 0.07,1.72 -0.08,0.34 -0.19,0.39 -0.12,0.06 -0.68,-0 -0.47,-0.08 -0.48,0 -0,0.08 0.13,0.19 0.65,0.45 0.94,0.78 Q 4.63,9.46 4.77,9.4 4.94,9.34 5.12,9.05 5.3,8.68 5.38,8.08 5.47,7.26 5.37,6.78 5.34,6.69 5.32,6.58 Z M 5.53,3.77 Q 5.39,3.68 5.12,3.75 4.75,3.83 4.39,3.91 4.44,3.08 4.44,3.07 4.36,2.98 4.27,2.91 5.73,2.65 5.99,2.79 q 0.03,0.03 0,0.22 Q 5.78,3.68 5.7,3.8 5.69,3.83 5.66,3.87 5.6,3.83 5.53,3.77 Z M 2.7,4.17 Q 2.58,3.8 2.48,3.26 2.99,3.1 3.9,2.97 q 0,0.02 0.11,1.01 -0.72,0.11 -1.31,0.18 z"/>
                    </g>
                    <g id="tile11" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 3.17,5.18 q 0.06,0.06 0.2,0.17 0.23,0.19 0.5,0.43 0.11,0.09 0.24,0.09 0.08,-0 0.12,-0.12 Q 4.27,5.64 4.2,5.41 4.12,5.16 3.33,4.98 3.23,4.95 3.18,4.97 3.19,4.52 3.21,4.03 3.44,3.96 3.73,3.91 4.18,3.79 4.26,3.73 4.35,3.64 4.3,3.55 4.22,3.43 3.91,3.36 3.54,3.3 3.22,3.45 q 0,-1.03 0.21,-1.77 Q 3.56,1.42 3.33,1.25 3.18,1.14 2.9,0.97 2.67,0.79 2.47,0.95 q -0.05,0.03 0,0.19 0.3,0.47 0.3,0.93 0,0.67 0,1.46 -0,0 -0,0.05 Q 1.36,3.94 0.83,4.01 0.44,4.07 0.72,4.25 1.14,4.47 1.86,4.31 2.19,4.23 2.56,4.18 1.92,5.49 0.39,7.19 0.32,7.28 0.43,7.31 0.64,7.34 1.74,6.26 2.26,5.73 2.74,4.91 2.7,5.62 2.7,6.39 2.65,7.12 2.44,7.81 2.33,8.2 2.57,8.8 2.64,8.97 2.71,9 2.78,9.07 2.85,8.98 3.1,8.82 3.12,8.2 3.11,7.83 3.17,5.18 Z M 5.24,7.6 Q 6.11,7.51 6.75,7.47 7.03,7.81 7.23,8.15 7.33,8.32 7.43,8.31 7.6,8.31 7.74,7.97 7.91,7.6 7.87,7.14 7.78,5.96 7.71,3.79 q -0,-0.3 0.14,-0.52 0.09,-0.12 0,-0.22 -0.17,-0.19 -0.69,-0.41 -0.17,-0.09 -0.32,0 Q 6.57,2.74 5.18,3.09 5.07,2.98 4.86,2.91 q -0.09,-0.03 -0.19,0 -0.06,0.03 -0.01,0.15 0.02,0.11 0.07,0.21 Q 5,3.79 4.83,6.33 4.8,6.68 4.69,7.12 4.57,7.65 4.91,8.07 q 0.09,0.12 0.2,0 0.12,-0.14 0.12,-0.36 0,-0.05 0,-0.11 z M 6.68,7.05 q -0.39,-0.08 -1.43,0.23 0,-0.11 0,-1.17 0,0 1.34,-0.1 Q 6.87,5.97 6.77,5.82 6.66,5.67 6.38,5.62 5.96,5.55 5.26,5.87 5.27,5.25 5.28,4.82 L 6.59,4.64 Q 6.82,4.6 6.73,4.47 6.62,4.33 6.38,4.3 6.04,4.26 5.29,4.56 q 0,-0.94 0.02,-1.05 0,-0.06 0,-0.11 Q 5.58,3.37 6.74,3.13 6.94,3.1 7.03,3.17 7.31,3.42 7.22,6.16 7.23,6.89 7.17,7.12 7.14,7.24 7.05,7.25 6.94,7.11 6.68,7.05 Z"/>
                    </g>
                    <g id="tile12" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 1.56,5.78 q 0.05,0.05 0.03,0.31 -0.13,1 -1.06,2.34 -0.03,0.03 -0.03,0.1 0,0.03 0.05,0.03 Q 1.17,8.32 2.01,6.56 q 0,-0.08 0.2,-0.44 Q 2.26,6.02 2.18,5.91 2.03,5.73 1.89,5.64 2.74,5.34 2.99,5.26 2.95,6.77 2.86,7.27 2.69,8.11 2.82,8.45 q 0.02,0.06 0.06,0.16 0.06,0.16 0.13,0.19 0.05,0.06 0.12,-0.01 0.06,-0.03 0.15,-0.22 0.05,-0.13 0.08,-1.46 0,-2.1 0.03,-2.14 -0,-0 -0.01,-0 0,-0.7 0.02,-1.57 0,-0.87 0.17,-1.46 0.08,-0.13 0.04,-0.26 -0.05,-0.09 -0.56,-0.39 -0.2,-0.14 -0.39,-0 -0.03,0.03 0.01,0.18 0.28,0.42 0.29,0.87 0,0.58 0.01,1.26 -1,0.19 -1.02,0.17 -0.08,-0.08 0.05,-1.12 0.08,-0.19 -0.42,-0.44 -0.16,-0.08 -0.25,-0.04 -0.11,0.05 -0.01,0.19 0.23,0.37 0.21,0.9 0,0.42 -0.12,0.65 -0.08,0.17 0.01,0.37 0.13,0.22 0.28,0.11 Q 2.16,4.18 3.03,3.86 3.02,4.42 3,5.01 0.85,5.49 0.52,5.46 0.41,5.47 0.39,5.55 0.36,5.66 0.43,5.74 0.61,5.89 0.88,6.06 0.96,6.1 1.07,6.04 1.3,5.89 1.56,5.78 Z M 4.31,3.45 q 0.47,0.5 0.67,0.5 0.12,0 0.16,-0.16 0,-0.12 -0.09,-0.28 -0.17,-0.23 -0.72,-0.29 -0.09,-0 -0.08,0.1 -0,0.06 0.05,0.14 z M 5.38,2.89 q 0.09,0.13 0.22,0.26 0.13,0.12 0.26,0.11 0.11,0 0.14,-0.13 0,-0.09 -0.07,-0.25 Q 5.77,2.69 5.4,2.69 q -0.06,-0 -0.07,0.08 -0,0.06 0.05,0.12 z M 5.66,2.26 Q 5.87,2.46 6.67,2.31 6.84,2.23 6.92,2.35 6.94,2.41 6.83,2.54 6.02,3.69 3.88,4.96 3.74,5.04 3.87,5.07 q 0.7,0 2.39,-1.26 0.02,-0.03 0.06,-0.05 Q 6.82,3.33 7.33,2.82 7.53,2.59 7.86,2.4 8,2.31 7.96,2.23 7.95,2.15 7.46,1.88 7.31,1.77 7.13,1.87 6.93,1.96 6.64,2.02 6.21,2.08 5.82,2.12 5.96,2 6.12,1.84 6.27,1.66 6.4,1.58 6.49,1.51 6.47,1.39 6.46,1.3 6.27,1.08 6.09,0.9 5.94,0.87 5.79,0.86 5.83,1.04 5.89,1.32 5.29,2.05 5,2.39 4.62,2.75 q -0.09,0.06 -0.12,0.11 -0.03,0.08 0.07,0.08 0.19,0 1.08,-0.68 z m 0.68,3.17 Q 6.46,7.92 6.23,8.14 6.14,8.2 6,8.17 5.72,8.13 5.45,8.08 5.33,8.07 5.34,8.14 5.34,8.2 5.45,8.28 6.12,8.84 6.33,9.17 6.48,9.32 6.63,9.19 6.92,8.88 6.93,8.1 6.84,7.21 6.84,5.38 7.43,5.32 8.19,5.3 q 0.51,0 0.57,-0.09 Q 8.8,5.11 8.67,5 8.15,4.66 7.61,4.84 7.28,4.9 6.88,5.01 6.89,4.84 6.95,4.72 7.04,4.55 6.87,4.42 6.62,4.21 6.33,4.11 6.15,4.04 6.07,4.13 q -0.05,0.06 0.04,0.21 0.22,0.36 0.22,0.77 -0.12,0 -0.24,0.03 -1.01,0.16 -2.22,0.36 -0.16,0 -0.03,0.15 0.12,0.11 0.26,0.14 0.17,0.03 0.31,0 Q 5.32,5.54 6.35,5.43 Z M 4.49,6.71 q 0.22,0.25 0.44,0.53 0.11,0.13 0.25,0.14 0.09,0 0.16,-0.11 Q 5.42,7.17 5.37,6.87 5.31,6.57 4.51,6.27 4.37,6.21 4.3,6.23 q -0.05,0.02 -0.04,0.14 0,0.11 0.23,0.33 z"/>
                    </g>
                    <g id="tile13" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 1.87,7.41 q 0.09,0.02 0.22,-0 0.51,-0.12 1.64,-0.22 0.09,-0 0.11,-0.09 0,-0.08 -0.24,-0.23 Q 3.84,6.23 4.1,6 4.25,5.83 4.11,5.68 3.44,5.18 2.95,5.47 2.28,5.69 1.9,5.78 q 0,-0.51 0.01,-0.89 0.14,0.03 0.29,0 0.48,-0.13 1.54,-0.27 0.09,-0 0.1,-0.1 0,-0.06 -0.24,-0.2 Q 3.85,3.65 4.11,3.5 4.25,3.35 4.12,3.2 3.5,2.7 3.04,3 2.76,3.11 2.03,3.36 2.42,2.9 2.65,2.59 3.1,1.91 3.32,1.74 3.48,1.59 3.34,1.46 3.16,1.34 2.89,1.28 q -0.25,-0.05 -0.36,0 -0.11,0.05 -0.03,0.15 0.13,0.28 -0.62,1.88 -0,0 -0,0 Q 1.72,3.2 1.51,3.13 q -0.09,-0.03 -0.2,-0 -0.06,0.05 -0,0.16 0.17,0.65 0.19,0.86 0.11,1.89 -0.17,3.03 -0.13,0.51 0.2,0.94 0.09,0.12 0.2,0 0.09,-0.13 0.14,-0.73 z m 1.26,-0.58 q -0.69,0.17 -1.25,0.28 0,-0.78 0,-1.07 0.08,0 1.23,-0.22 0.09,-0 0.14,0.01 0.06,0.06 0.05,0.21 -0.08,0.42 -0.17,0.78 z m 0,-2.53 Q 2.47,4.51 1.93,4.62 q 0,-0.92 0.03,-0.96 0.09,-0 0.22,-0.06 0.5,-0.12 0.97,-0.26 0.12,-0.03 0.17,0 0.06,0.06 0.04,0.22 -0.09,0.39 -0.19,0.71 -0.03,0 -0.05,0 z M 5.87,4 q 0,2.56 -0.04,3.37 -0.02,1.76 0.15,2.04 0.13,0.14 0.22,-0.05 0.17,-0.41 0.16,-3.7 0,-1.01 0.01,-1.77 0.94,-0.19 1.06,-0.07 0.14,0.12 0.13,0.54 -0.02,0.41 -0.04,0.93 0,0.37 -0.13,0.52 -0.05,0.11 -0.27,0.05 Q 6.95,5.85 6.76,5.82 6.61,5.78 6.56,5.84 6.53,5.88 6.67,5.98 7.15,6.35 7.43,6.68 7.58,6.82 7.76,6.74 7.88,6.69 7.98,6.41 8.18,5.98 8.15,5.43 8.07,4.25 8.18,3.85 8.25,3.7 8.19,3.62 7.99,3.48 7.66,3.35 7.48,3.28 7.34,3.34 7.03,3.49 6.4,3.6 6.4,2.73 6.45,2.22 6.46,1.91 6.64,1.63 6.7,1.48 6.51,1.32 6.27,1.14 5.86,1.02 5.66,0.98 5.54,1.11 q -0.09,0.06 0.02,0.19 0.28,0.23 0.3,0.57 0,0.67 -0,1.82 Q 5.44,3.78 4.92,3.83 4.75,3.66 4.46,3.69 4.34,3.73 4.4,3.83 4.73,4.5 4.45,5.53 4.23,5.92 4.54,6.35 l 0.01,0.01 q 0.06,0.12 0.14,0.06 0.26,-0.19 0.26,-0.93 0,-1.08 0.03,-1.35 0.06,0 0.14,-0 0.37,-0.08 0.69,-0.13 z"/>
                    </g>
                    <g id="tile14" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="black"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 4.29,1.12 q 0.47,0.44 0.77,0.53 0.14,0 0.23,-0.12 0.03,-0.13 0,-0.29 Q 5.13,0.85 4.38,0.73 4.21,0.7 4.13,0.74 4.06,0.77 4.1,0.88 4.13,1 4.29,1.12 Z M 2.59,2.31 Q 2.25,2.34 2.48,2.52 2.9,2.78 3.4,2.68 4.86,2.47 6.38,2.24 7.07,2.12 7.18,2.03 7.27,1.96 7.22,1.87 7.17,1.75 6.9,1.66 6.58,1.58 5.78,1.84 4,2.24 2.59,2.31 Z m 0.55,1.9 q 0.03,0.08 0.19,0.22 0.17,0.2 0.36,0.44 0.09,0.11 0.21,0.12 0.08,0 0.13,-0.09 0.05,-0.11 0.01,-0.33 -0.03,-0.23 -0.71,-0.5 -0.05,-0 -0.08,-0.01 0,-0.05 0.47,-0.66 Q 3.84,3.27 3.72,3.15 3.35,2.85 3.14,2.87 3.05,2.88 3.06,3.01 3.14,3.79 2.31,4.64 2.11,4.84 2.01,4.97 1.94,5.09 2.06,5.06 2.2,5.05 2.39,4.91 2.84,4.59 3.15,4.21 Z m 1.3,1.83 q 0,3.13 0.12,3.35 0,0.02 0.03,0.06 0.05,0.06 0.13,0.04 Q 4.91,9.43 4.96,8.83 5.03,8.29 5.02,7.75 5.01,7.35 5.05,6 5.55,5.97 8.43,5.96 8.67,5.97 8.72,5.87 8.79,5.73 8.6,5.57 7.85,5.01 7.43,5.22 6.5,5.37 5.06,5.58 q 0,-0.02 0,-0.04 0,-0.3 0.08,-0.58 Q 5.19,4.77 5.04,4.67 4.92,4.58 4.83,4.54 5.18,4.4 5.71,3.86 q 0.03,0.06 0.19,0.19 0.37,0.28 0.76,0.65 0.09,0.09 0.21,0.08 0.08,0 0.11,-0.1 0.03,-0.09 -0.02,-0.31 -0.08,-0.36 -1.08,-0.66 -0.02,-0 -0.03,0 0.25,-0.39 0.58,-0.8 0.09,-0.11 -0.02,-0.23 -0.36,-0.3 -0.57,-0.27 -0.09,0 -0.08,0.14 0.06,0.62 -0.68,1.56 -0.05,0 -0.34,0.37 -0.08,-0.05 -0.14,-0.05 -0.12,-0.05 -0.28,0.03 -0.09,0.09 -0.01,0.19 0.17,0.3 0.18,0.87 0,0.05 0,0.13 Q 2.74,5.83 0.73,6.04 0.5,6.05 0.67,6.27 1.01,6.61 1.47,6.52 2.97,6.13 4.45,6.04 Z"/>
                    </g>
                    <g id="tile15" frontfill="none" backfill="#2691c0">
                        <path opacity="0" d="M 24,24 L -24,24 L -24,-24 L 24,-24 Z">
                        </path>
                        <circle r="22" cx="0" cy="0" fill="red"/>
                        <path fill="white" stroke="none" transform="translate(-17,-18) scale(3.6)" d="m 3.11,5.79 q -1.09,0.09 -2.28,0.24 -0.2,0 -0.05,0.19 0.14,0.14 0.32,0.2 0.22,0.05 0.38,0 2.31,-0.58 6.26,-0.59 0.23,0 0.46,0 0.2,0 0.26,-0.08 Q 8.52,5.65 8.35,5.51 7.81,5.1 7.43,5.18 6.61,5.33 5.36,5.52 5.67,4.41 5.79,4.19 5.83,4.1 5.68,3.95 5.59,3.89 5.5,3.83 6.87,3.55 6.93,3.51 7.02,3.42 6.97,3.34 6.91,3.22 6.6,3.12 6.35,3.07 5.34,3.35 4.36,3.58 3.42,3.68 3.41,3.04 3.43,2.86 3.44,2.74 3.4,2.64 4.71,2.33 5.34,2.06 5.83,1.9 6.25,1.84 q 0.17,0 0.22,-0.08 Q 6.51,1.65 6.4,1.51 6.19,1.34 5.73,1.13 5.58,1.04 5.43,1.05 5.34,1.09 5.34,1.2 5.3,1.57 3.26,2.45 3,2.25 2.68,2.18 2.52,2.12 2.42,2.19 2.33,2.26 2.41,2.45 2.67,2.87 2.8,3.35 2.89,3.83 3.11,5.79 Z M 4.46,5.64 Q 4.03,5.67 3.58,5.75 3.48,4.73 3.44,4.04 3.84,4.09 4.52,4 4.74,3.96 5,3.91 5.11,4.17 4.97,5.57 4.71,5.6 4.46,5.64 Z M 3.1,6.88 Q 2.4,7.59 1.26,8.36 1.12,8.48 1.28,8.55 q 0.44,0 1.75,-0.8 Q 3.6,7.32 3.81,7.27 4.01,7.21 3.97,7.01 3.9,6.84 3.57,6.53 3.46,6.42 3.34,6.44 3.17,6.47 3.21,6.62 3.24,6.77 3.1,6.88 Z M 5.29,6.78 Q 6,7.46 6.81,8.43 6.98,8.65 7.15,8.71 7.24,8.71 7.33,8.61 7.47,8.47 7.35,7.99 7.21,7.35 5.32,6.44 q -0.09,-0.06 -0.12,0.07 -0,0.14 0.09,0.26 z"/>
                    </g>
                </defs>

                <g class="etdrop" stroke="#777" stroke-width="2" stroke-linejoin="round" transform="translate(0,0) scale(1,1)" id="etanidrop">
                    <g class="etboard">
                        <path d="M 0,0 h 432 v 480 h -432 z" stroke="none" fill="#f9d98d" class="boardsnap0"/>
                        <path d="M 18,18 h 396 v 444 h -396 z" stroke="#777" stroke-width="4" fill="none"/>
                        <path d="M 24,24 h 384 v 432 h -384 v -432 M 24,72 h 384 M 24,120 h 384 M 24,168 h 384 M 24,216 h 384 M 24,264 h 384 M 24,312 h 384 M 24,360 h 384 M 24,408 h 384  M 72,24 v 192 M 72,264 v 192 M 120,24 v 192 M 120,264 v 192 M 168,24 v 192 M 168,264 v 192 M 216,24 v 192 M 216,264 v 192 M 264,24 v 192 M 264,264 v 192 M 312,24 v 192 M 312,264 v 192 M 360,24 v 192 M 360,264 v 192  M 168,24 l 96,96 M 264,24 l -96,96 M 168,456 l 96,-96 M 264,456 l -96,-96" stroke="#777" stroke-width="2" fill="none" class="boardsnap0"/>

                        <g id="ejceesstop" stroke="#777">
                            <use href="#tile0" fill="none" transform="translate(72,120) scale(1,1) rotate(0)" stroke="none"/>
                            <use href="#tile0" fill="none" transform="translate(120,168) scale(1,1) rotate(0)" stroke="none"/>
                            <use href="#tile0" fill="none" transform="translate(216,168) scale(1,1) rotate(0)" stroke="none"/>
                            <use href="#tile0" fill="none" transform="translate(312,168) scale(1,1) rotate(0)" stroke="none"/>
                            <use href="#tile0" fill="none" transform="translate(360,120) scale(1,1) rotate(0)" stroke="none"/>
                            <use href="#tile1" fill="none" transform="translate(24,168) scale(1,1) rotate(0)" stroke="none"/>
                            <use href="#tile1" fill="none" transform="translate(408,168) scale(1,1) rotate(180)" stroke="none"/>
                        </g>
                        <use href="#ejceesstop" transform="rotate(180 216,240)" stroke="none"/>

                        
                        

                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        

                    <use id="r0" href="#tile2" a0:href="#tile2" xmlns:a0="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 24)"><animateTransform id="step38" begin="step37.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="24,24" to="24,72" dur="0.12s" fill="freeze"/><animateTransform id="step44" begin="step43.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="24,72" to="168,72" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="24,24" fill="freeze"/></use><use id="n0" href="#tile4" a1:href="#tile4" xmlns:a1="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 24)"><animateTransform id="step6" begin="step5.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,24" to="120,120" dur="0.12s" fill="freeze"/><animateTransform id="step12" begin="step11.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,120" to="216,72" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,24" fill="freeze"/></use><use id="b0" href="#tile10" a2:href="#tile10" xmlns:a2="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 24)"><animateTransform id="step10" begin="step9.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,24" to="216,120" dur="0.12s" fill="freeze"/><animateTransform id="step30" begin="step29.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="216,120" to="120,216" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="120,24" fill="freeze"/></use><use id="a0" href="#tile8" a3:href="#tile8" xmlns:a3="http://www.w3.org/1999/xlink" stroke="none" transform="translate(168, 24)"/><use id="k0" href="#tile12" a4:href="#tile12" xmlns:a4="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 24)"/><use id="a1" href="#tile8" a5:href="#tile8" xmlns:a5="http://www.w3.org/1999/xlink" stroke="none" transform="translate(264, 24)"/><use id="b1" href="#tile10" a6:href="#tile10" xmlns:a6="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 24)"/><use id="n1" href="#tile4" a7:href="#tile4" xmlns:a7="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 24)"><animateTransform id="step2" begin="step1.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,24" to="312,120" dur="0.12s" fill="freeze"/><animateTransform id="step32" begin="step31.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="312,120" to="216,168" dur="0.12s" fill="freeze"/><set begin="step33.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,24" fill="freeze"/></use><use id="r1" href="#tile2" a8:href="#tile2" xmlns:a8="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 24)"><animateTransform id="step4" begin="step3.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="408,24" to="360,24" dur="0.12s" fill="freeze"/><animateTransform id="step34" begin="step33.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,24" to="360,120" dur="0.12s" fill="freeze"/><animateTransform id="step40" begin="step39.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,120" to="360,168" dur="0.12s" fill="freeze"/><animateTransform id="step42" begin="step41.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,168" to="264,168" dur="0.12s" fill="freeze"/><set begin="step45.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="408,24" fill="freeze"/></use><use id="c0" href="#tile6" a9:href="#tile6" xmlns:a9="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 120)"><animateTransform id="step14" begin="step13.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,120" to="72,168" dur="0.12s" fill="freeze"/><animateTransform id="step20" begin="step19.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,168" to="72,312" dur="0.12s" fill="freeze"/><set begin="step25.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,120" fill="freeze"/></use><use id="c1" href="#tile6" a10:href="#tile6" xmlns:a10="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 120)"><animateTransform id="step24" begin="step23.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,120" to="360,312" dur="0.12s" fill="freeze"/><animateTransform id="step36" begin="step35.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,312" to="360,168" dur="0.12s" fill="freeze"/><set begin="step39.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,120" fill="freeze"/></use><use id="p0" href="#tile14" a11:href="#tile14" xmlns:a11="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 168)"><animateTransform id="step28" begin="step27.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="24,168" to="24,216" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="24,168" fill="freeze"/></use><use id="p1" href="#tile14" a12:href="#tile14" xmlns:a12="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 168)"><animateTransform id="step16" begin="step15.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,168" to="120,216" dur="0.12s" fill="freeze"/><animateTransform id="step18" begin="step17.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,216" to="120,264" dur="0.12s" fill="freeze"/><animateTransform id="step22" begin="step21.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,264" to="120,312" dur="0.12s" fill="freeze"/><animateTransform id="step26" begin="step25.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,312" to="72,312" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="120,168" fill="freeze"/></use><use id="p2" href="#tile14" a13:href="#tile14" xmlns:a13="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 168)"><set begin="step31.end" end="step0.begin+1s" attributeName="opacity" to="0"/></use><use id="p3" href="#tile14" a14:href="#tile14" xmlns:a14="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 168)"><animateTransform id="step8" begin="step7.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="312,168" to="312,216" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="312,168" fill="freeze"/></use><use id="p4" href="#tile14" a15:href="#tile14" xmlns:a15="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 168)"/><use id="P0" href="#tile15" a16:href="#tile15" xmlns:a16="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 312)"/><use id="P1" href="#tile15" a17:href="#tile15" xmlns:a17="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 312)"><animateTransform id="step7" begin="step6.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,312" to="120,264" dur="0.12s" fill="freeze"/><set begin="step18.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="120,312" fill="freeze"/></use><use id="P2" href="#tile15" a18:href="#tile15" xmlns:a18="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 312)"/><use id="P3" href="#tile15" a19:href="#tile15" xmlns:a19="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 312)"><animateTransform id="step21" begin="step20.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="312,312" to="312,264" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="312,312" fill="freeze"/></use><use id="P4" href="#tile15" a20:href="#tile15" xmlns:a20="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 312)"/><use id="C0" href="#tile7" a21:href="#tile7" xmlns:a21="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 360)"><animateTransform id="step19" begin="step18.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,360" to="120,360" dur="0.12s" fill="freeze"/><animateTransform id="step35" begin="step34.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,360" to="216,360" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,360" fill="freeze"/></use><use id="C1" href="#tile7" a22:href="#tile7" xmlns:a22="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 360)"><animateTransform id="step1" begin="1.8s;step0.end+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,360" to="216,360" dur="0.12s" fill="freeze"/><animateTransform id="step31" begin="step30.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="216,360" to="216,168" dur="0.12s" fill="freeze"/><set begin="step32.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,360" fill="freeze"/></use><use id="R0" href="#tile3" a23:href="#tile3" xmlns:a23="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 456)"><animateTransform id="step23" begin="step22.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="24,456" to="72,456" dur="0.12s" fill="freeze"/><animateTransform id="step25" begin="step24.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,456" to="72,312" dur="0.12s" fill="freeze"/><set begin="step26.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="24,456" fill="freeze"/></use><use id="N0" href="#tile5" a24:href="#tile5" xmlns:a24="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 456)"><animateTransform id="step13" begin="step12.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,456" to="120,360" dur="0.12s" fill="freeze"/><animateTransform id="step15" begin="step14.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,360" to="168,264" dur="0.12s" fill="freeze"/><animateTransform id="step17" begin="step16.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="168,264" to="120,168" dur="0.12s" fill="freeze"/><animateTransform id="step37" begin="step36.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="120,168" to="72,72" dur="0.12s" fill="freeze"/><animateTransform id="step43" begin="step42.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="72,72" to="168,120" dur="0.12s" fill="freeze"/><animateTransform id="step45" begin="step44.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="168,120" to="264,168" dur="0.12s" fill="freeze"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,456" fill="freeze"/></use><use id="B0" href="#tile11" a25:href="#tile11" xmlns:a25="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 456)"/><use id="A0" href="#tile9" a26:href="#tile9" xmlns:a26="http://www.w3.org/1999/xlink" stroke="none" transform="translate(168, 456)"/><use id="K0" href="#tile13" a27:href="#tile13" xmlns:a27="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 456)"/><use id="A1" href="#tile9" a28:href="#tile9" xmlns:a28="http://www.w3.org/1999/xlink" stroke="none" transform="translate(264, 456)"/><use id="B1" href="#tile11" a29:href="#tile11" xmlns:a29="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 456)"/><use id="N1" href="#tile5" a30:href="#tile5" xmlns:a30="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 456)"><animateTransform id="step3" begin="step2.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,456" to="312,360" dur="0.12s" fill="freeze"/><animateTransform id="step27" begin="step26.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="312,360" to="264,264" dur="0.12s" fill="freeze"/><animateTransform id="step29" begin="step28.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="264,264" to="168,216" dur="0.12s" fill="freeze"/><animateTransform id="step41" begin="step40.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="168,216" to="264,168" dur="0.12s" fill="freeze"/><set begin="step42.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,456" fill="freeze"/></use><use id="R1" href="#tile3" a31:href="#tile3" xmlns:a31="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 456)"><animateTransform id="step5" begin="step4.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="408,456" to="360,456" dur="0.12s" fill="freeze"/><animateTransform id="step9" begin="step8.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,456" to="360,168" dur="0.12s" fill="freeze"/><animateTransform id="step11" begin="step10.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="360,168" to="312,168" dur="0.12s" fill="freeze"/><animateTransform id="step33" begin="step32.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="312,168" to="216,168" dur="0.12s" fill="freeze"/><animateTransform id="step39" begin="step38.begin+1.8s" attributeName="transform" attributeType="XML" type="translate" from="216,168" to="360,168" dur="0.12s" fill="freeze"/><set begin="step40.end" end="step0.begin+1s" attributeName="opacity" to="0"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="408,456" fill="freeze"/></use><animate id="step0" begin="step45.end+4s" attributeName="opacity" values="1;0;0;1" dur="3s" fill="freeze"/></g>

                <use id="r0f" href="#tile2" a32:href="#tile2" xmlns:a32="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 24)" opacity="0"><animateTransform begin="step38.begin" end="step38.end" attributeName="transform" attributeType="XML" type="translate" from="24,24" to="24,72" fill="freeze"/><set begin="step38.begin" end="step38.end" attributeName="opacity" to="1"/><animateTransform begin="step44.begin" end="step44.end" attributeName="transform" attributeType="XML" type="translate" from="24,72" to="168,72" fill="freeze"/><set begin="step44.begin" end="step44.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="24,24" fill="freeze"/></use><use id="n0f" href="#tile4" a33:href="#tile4" xmlns:a33="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 24)" opacity="0"><animateTransform begin="step6.begin" end="step6.end" attributeName="transform" attributeType="XML" type="translate" from="72,24" to="120,120" fill="freeze"/><set begin="step6.begin" end="step6.end" attributeName="opacity" to="1"/><animateTransform begin="step12.begin" end="step12.end" attributeName="transform" attributeType="XML" type="translate" from="120,120" to="216,72" fill="freeze"/><set begin="step12.begin" end="step12.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,24" fill="freeze"/></use><use id="b0f" href="#tile10" a34:href="#tile10" xmlns:a34="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 24)" opacity="0"><animateTransform begin="step10.begin" end="step10.end" attributeName="transform" attributeType="XML" type="translate" from="120,24" to="216,120" fill="freeze"/><set begin="step10.begin" end="step10.end" attributeName="opacity" to="1"/><animateTransform begin="step30.begin" end="step30.end" attributeName="transform" attributeType="XML" type="translate" from="216,120" to="120,216" fill="freeze"/><set begin="step30.begin" end="step30.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="120,24" fill="freeze"/></use><use id="a0f" href="#tile8" a35:href="#tile8" xmlns:a35="http://www.w3.org/1999/xlink" stroke="none" transform="translate(168, 24)" opacity="0"/><use id="k0f" href="#tile12" a36:href="#tile12" xmlns:a36="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 24)" opacity="0"/><use id="a1f" href="#tile8" a37:href="#tile8" xmlns:a37="http://www.w3.org/1999/xlink" stroke="none" transform="translate(264, 24)" opacity="0"/><use id="b1f" href="#tile10" a38:href="#tile10" xmlns:a38="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 24)" opacity="0"/><use id="n1f" href="#tile4" a39:href="#tile4" xmlns:a39="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 24)" opacity="0"><animateTransform begin="step2.begin" end="step2.end" attributeName="transform" attributeType="XML" type="translate" from="360,24" to="312,120" fill="freeze"/><set begin="step2.begin" end="step2.end" attributeName="opacity" to="1"/><animateTransform begin="step32.begin" end="step32.end" attributeName="transform" attributeType="XML" type="translate" from="312,120" to="216,168" fill="freeze"/><set begin="step32.begin" end="step32.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,24" fill="freeze"/></use><use id="r1f" href="#tile2" a40:href="#tile2" xmlns:a40="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 24)" opacity="0"><animateTransform begin="step4.begin" end="step4.end" attributeName="transform" attributeType="XML" type="translate" from="408,24" to="360,24" fill="freeze"/><set begin="step4.begin" end="step4.end" attributeName="opacity" to="1"/><animateTransform begin="step34.begin" end="step34.end" attributeName="transform" attributeType="XML" type="translate" from="360,24" to="360,120" fill="freeze"/><set begin="step34.begin" end="step34.end" attributeName="opacity" to="1"/><animateTransform begin="step40.begin" end="step40.end" attributeName="transform" attributeType="XML" type="translate" from="360,120" to="360,168" fill="freeze"/><set begin="step40.begin" end="step40.end" attributeName="opacity" to="1"/><animateTransform begin="step42.begin" end="step42.end" attributeName="transform" attributeType="XML" type="translate" from="360,168" to="264,168" fill="freeze"/><set begin="step42.begin" end="step42.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="408,24" fill="freeze"/></use><use id="c0f" href="#tile6" a41:href="#tile6" xmlns:a41="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 120)" opacity="0"><animateTransform begin="step14.begin" end="step14.end" attributeName="transform" attributeType="XML" type="translate" from="72,120" to="72,168" fill="freeze"/><set begin="step14.begin" end="step14.end" attributeName="opacity" to="1"/><animateTransform begin="step20.begin" end="step20.end" attributeName="transform" attributeType="XML" type="translate" from="72,168" to="72,312" fill="freeze"/><set begin="step20.begin" end="step20.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,120" fill="freeze"/></use><use id="c1f" href="#tile6" a42:href="#tile6" xmlns:a42="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 120)" opacity="0"><animateTransform begin="step24.begin" end="step24.end" attributeName="transform" attributeType="XML" type="translate" from="360,120" to="360,312" fill="freeze"/><set begin="step24.begin" end="step24.end" attributeName="opacity" to="1"/><animateTransform begin="step36.begin" end="step36.end" attributeName="transform" attributeType="XML" type="translate" from="360,312" to="360,168" fill="freeze"/><set begin="step36.begin" end="step36.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,120" fill="freeze"/></use><use id="p0f" href="#tile14" a43:href="#tile14" xmlns:a43="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 168)" opacity="0"><animateTransform begin="step28.begin" end="step28.end" attributeName="transform" attributeType="XML" type="translate" from="24,168" to="24,216" fill="freeze"/><set begin="step28.begin" end="step28.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="24,168" fill="freeze"/></use><use id="p1f" href="#tile14" a44:href="#tile14" xmlns:a44="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 168)" opacity="0"><animateTransform begin="step16.begin" end="step16.end" attributeName="transform" attributeType="XML" type="translate" from="120,168" to="120,216" fill="freeze"/><set begin="step16.begin" end="step16.end" attributeName="opacity" to="1"/><animateTransform begin="step18.begin" end="step18.end" attributeName="transform" attributeType="XML" type="translate" from="120,216" to="120,264" fill="freeze"/><set begin="step18.begin" end="step18.end" attributeName="opacity" to="1"/><animateTransform begin="step22.begin" end="step22.end" attributeName="transform" attributeType="XML" type="translate" from="120,264" to="120,312" fill="freeze"/><set begin="step22.begin" end="step22.end" attributeName="opacity" to="1"/><animateTransform begin="step26.begin" end="step26.end" attributeName="transform" attributeType="XML" type="translate" from="120,312" to="72,312" fill="freeze"/><set begin="step26.begin" end="step26.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="120,168" fill="freeze"/></use><use id="p2f" href="#tile14" a45:href="#tile14" xmlns:a45="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 168)" opacity="0"/><use id="p3f" href="#tile14" a46:href="#tile14" xmlns:a46="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 168)" opacity="0"><animateTransform begin="step8.begin" end="step8.end" attributeName="transform" attributeType="XML" type="translate" from="312,168" to="312,216" fill="freeze"/><set begin="step8.begin" end="step8.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="312,168" fill="freeze"/></use><use id="p4f" href="#tile14" a47:href="#tile14" xmlns:a47="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 168)" opacity="0"/><use id="P0f" href="#tile15" a48:href="#tile15" xmlns:a48="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 312)" opacity="0"/><use id="P1f" href="#tile15" a49:href="#tile15" xmlns:a49="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 312)" opacity="0"><animateTransform begin="step7.begin" end="step7.end" attributeName="transform" attributeType="XML" type="translate" from="120,312" to="120,264" fill="freeze"/><set begin="step7.begin" end="step7.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="120,312" fill="freeze"/></use><use id="P2f" href="#tile15" a50:href="#tile15" xmlns:a50="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 312)" opacity="0"/><use id="P3f" href="#tile15" a51:href="#tile15" xmlns:a51="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 312)" opacity="0"><animateTransform begin="step21.begin" end="step21.end" attributeName="transform" attributeType="XML" type="translate" from="312,312" to="312,264" fill="freeze"/><set begin="step21.begin" end="step21.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="312,312" fill="freeze"/></use><use id="P4f" href="#tile15" a52:href="#tile15" xmlns:a52="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 312)" opacity="0"/><use id="C0f" href="#tile7" a53:href="#tile7" xmlns:a53="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 360)" opacity="0"><animateTransform begin="step19.begin" end="step19.end" attributeName="transform" attributeType="XML" type="translate" from="72,360" to="120,360" fill="freeze"/><set begin="step19.begin" end="step19.end" attributeName="opacity" to="1"/><animateTransform begin="step35.begin" end="step35.end" attributeName="transform" attributeType="XML" type="translate" from="120,360" to="216,360" fill="freeze"/><set begin="step35.begin" end="step35.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,360" fill="freeze"/></use><use id="C1f" href="#tile7" a54:href="#tile7" xmlns:a54="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 360)" opacity="0"><animateTransform begin="step1.begin" end="step1.end" attributeName="transform" attributeType="XML" type="translate" from="360,360" to="216,360" fill="freeze"/><set begin="step1.begin" end="step1.end" attributeName="opacity" to="1"/><animateTransform begin="step31.begin" end="step31.end" attributeName="transform" attributeType="XML" type="translate" from="216,360" to="216,168" fill="freeze"/><set begin="step31.begin" end="step31.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,360" fill="freeze"/></use><use id="R0f" href="#tile3" a55:href="#tile3" xmlns:a55="http://www.w3.org/1999/xlink" stroke="none" transform="translate(24, 456)" opacity="0"><animateTransform begin="step23.begin" end="step23.end" attributeName="transform" attributeType="XML" type="translate" from="24,456" to="72,456" fill="freeze"/><set begin="step23.begin" end="step23.end" attributeName="opacity" to="1"/><animateTransform begin="step25.begin" end="step25.end" attributeName="transform" attributeType="XML" type="translate" from="72,456" to="72,312" fill="freeze"/><set begin="step25.begin" end="step25.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="24,456" fill="freeze"/></use><use id="N0f" href="#tile5" a56:href="#tile5" xmlns:a56="http://www.w3.org/1999/xlink" stroke="none" transform="translate(72, 456)" opacity="0"><animateTransform begin="step13.begin" end="step13.end" attributeName="transform" attributeType="XML" type="translate" from="72,456" to="120,360" fill="freeze"/><set begin="step13.begin" end="step13.end" attributeName="opacity" to="1"/><animateTransform begin="step15.begin" end="step15.end" attributeName="transform" attributeType="XML" type="translate" from="120,360" to="168,264" fill="freeze"/><set begin="step15.begin" end="step15.end" attributeName="opacity" to="1"/><animateTransform begin="step17.begin" end="step17.end" attributeName="transform" attributeType="XML" type="translate" from="168,264" to="120,168" fill="freeze"/><set begin="step17.begin" end="step17.end" attributeName="opacity" to="1"/><animateTransform begin="step37.begin" end="step37.end" attributeName="transform" attributeType="XML" type="translate" from="120,168" to="72,72" fill="freeze"/><set begin="step37.begin" end="step37.end" attributeName="opacity" to="1"/><animateTransform begin="step43.begin" end="step43.end" attributeName="transform" attributeType="XML" type="translate" from="72,72" to="168,120" fill="freeze"/><set begin="step43.begin" end="step43.end" attributeName="opacity" to="1"/><animateTransform begin="step45.begin" end="step45.end" attributeName="transform" attributeType="XML" type="translate" from="168,120" to="264,168" fill="freeze"/><set begin="step45.begin" end="step45.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="72,456" fill="freeze"/></use><use id="B0f" href="#tile11" a57:href="#tile11" xmlns:a57="http://www.w3.org/1999/xlink" stroke="none" transform="translate(120, 456)" opacity="0"/><use id="A0f" href="#tile9" a58:href="#tile9" xmlns:a58="http://www.w3.org/1999/xlink" stroke="none" transform="translate(168, 456)" opacity="0"/><use id="K0f" href="#tile13" a59:href="#tile13" xmlns:a59="http://www.w3.org/1999/xlink" stroke="none" transform="translate(216, 456)" opacity="0"/><use id="A1f" href="#tile9" a60:href="#tile9" xmlns:a60="http://www.w3.org/1999/xlink" stroke="none" transform="translate(264, 456)" opacity="0"/><use id="B1f" href="#tile11" a61:href="#tile11" xmlns:a61="http://www.w3.org/1999/xlink" stroke="none" transform="translate(312, 456)" opacity="0"/><use id="N1f" href="#tile5" a62:href="#tile5" xmlns:a62="http://www.w3.org/1999/xlink" stroke="none" transform="translate(360, 456)" opacity="0"><animateTransform begin="step3.begin" end="step3.end" attributeName="transform" attributeType="XML" type="translate" from="360,456" to="312,360" fill="freeze"/><set begin="step3.begin" end="step3.end" attributeName="opacity" to="1"/><animateTransform begin="step27.begin" end="step27.end" attributeName="transform" attributeType="XML" type="translate" from="312,360" to="264,264" fill="freeze"/><set begin="step27.begin" end="step27.end" attributeName="opacity" to="1"/><animateTransform begin="step29.begin" end="step29.end" attributeName="transform" attributeType="XML" type="translate" from="264,264" to="168,216" fill="freeze"/><set begin="step29.begin" end="step29.end" attributeName="opacity" to="1"/><animateTransform begin="step41.begin" end="step41.end" attributeName="transform" attributeType="XML" type="translate" from="168,216" to="264,168" fill="freeze"/><set begin="step41.begin" end="step41.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="360,456" fill="freeze"/></use><use id="R1f" href="#tile3" a63:href="#tile3" xmlns:a63="http://www.w3.org/1999/xlink" stroke="none" transform="translate(408, 456)" opacity="0"><animateTransform begin="step5.begin" end="step5.end" attributeName="transform" attributeType="XML" type="translate" from="408,456" to="360,456" fill="freeze"/><set begin="step5.begin" end="step5.end" attributeName="opacity" to="1"/><animateTransform begin="step9.begin" end="step9.end" attributeName="transform" attributeType="XML" type="translate" from="360,456" to="360,168" fill="freeze"/><set begin="step9.begin" end="step9.end" attributeName="opacity" to="1"/><animateTransform begin="step11.begin" end="step11.end" attributeName="transform" attributeType="XML" type="translate" from="360,168" to="312,168" fill="freeze"/><set begin="step11.begin" end="step11.end" attributeName="opacity" to="1"/><animateTransform begin="step33.begin" end="step33.end" attributeName="transform" attributeType="XML" type="translate" from="312,168" to="216,168" fill="freeze"/><set begin="step33.begin" end="step33.end" attributeName="opacity" to="1"/><animateTransform begin="step39.begin" end="step39.end" attributeName="transform" attributeType="XML" type="translate" from="216,168" to="360,168" fill="freeze"/><set begin="step39.begin" end="step39.end" attributeName="opacity" to="1"/><animateTransform begin="step0.begin+1s" dur="1s" attributeName="transform" attributeType="XML" type="translate" to="408,456" fill="freeze"/></use></g>
            </svg>

ejsoon · 帖子由 **ejsoon** » 2026年 3月 15日 10:18

改進：

把btn-speed改為btn-interval，把playSeepd全局變量改為moveInterval。

之後加上btn-speed在btn-interval的後面，對應就的全局變量moveSpeed。

當動畫移動時，以及導出svg動畫時，原先的0.12s替換為這個變量。

btn-speed的設置跟btn-interval一樣，但候選項為0.3，0.5，0.7。同樣只保留一位小數，最小值為0.1，最大不能超過moveInterval。

只需給出要修改的地方，所有的代碼和注釋都要是英文。

將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

Re: 將製作ejcees（中國象棋打譜程式）

在线用户