將改進混亂時鐘的網頁版

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 17日 17:16

gemini pro：

代码： 全选

Here is the modified section of the code. You only need to replace the `// 5. If ckmode is "number"` section with the following block. 

All code and comments are written in English as requested.

```javascript
            // 5. If ckmode is "number"
            else if (ckmode === "number") {
                const ckvalue = obj.getAttribute("ckvalue");
                
                if (ckvalue) {
                    const values = ckvalue.split(",").map(v => parseInt(v.trim()));
                    const presentNumbers = new Set(values);
                    
                    // Coordinates for missing numbers (scale 0.7,0.7)
                    // Left side for odd numbers
                    const leftCoords = [
                        "translate(-120,-172) scale(0.7,0.7)",
                        "translate(-160,-160) scale(0.7,0.7)",
                        "translate(-172,-120) scale(0.7,0.7)",
                        "translate(-172,120) scale(0.7,0.7)",
                        "translate(-160,160) scale(0.7,0.7)",
                        "translate(-120,172) scale(0.7,0.7)"
                    ];
                    
                    // Right side for even numbers
                    const rightCoords = [
                        "translate(120,-172) scale(0.7,0.7)",
                        "translate(160,-160) scale(0.7,0.7)",
                        "translate(172,-120) scale(0.7,0.7)",
                        "translate(172,120) scale(0.7,0.7)",
                        "translate(160,160) scale(0.7,0.7)",
                        "translate(120,172) scale(0.7,0.7)"
                    ];

                    let leftIndex = 0;
                    let rightIndex = 0;

                    // Step 5a: Find missing numbers (1-12) and place them on the sides
                    for (let num = 1; num <= 12; num++) {
                        if (!presentNumbers.has(num)) {
                            const tileIndex = num - 1;
                            if (tileElements[tileIndex]) {
                                if (num % 2 !== 0) {
                                    // Odd number goes to the left
                                    tileElements[tileIndex].setAttribute("transform", leftCoords[leftIndex]);
                                    leftIndex++;
                                } else {
                                    // Even number goes to the right
                                    tileElements[tileIndex].setAttribute("transform", rightCoords[rightIndex]);
                                    rightIndex++;
                                }
                            }
                        }
                    }

                    // Step 5b: Place the valid numbers provided in the input
                    values.forEach((val, positionIndex) => {
                        // Only process valid numbers (ignore 0)
                        if (val > 0 && val <= 12) {
                            const tileIndex = val - 1; 
                            if (tileElements[tileIndex] && translateArray[positionIndex]) {
                                tileElements[tileIndex].setAttribute("transform", translateArray[positionIndex]);
                            }
                        }
                    });
                }
            }
```

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 17日 22:16

增加功能：每隔12秒就自動保存。如果第一個的類名不是「.ejautolocal」，那就新增並插入至第一位；如果是，則覆蓋保存。

附件

ejtilelocalstorage20260417.js

(6.34 KiB) 已下载 4 次

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 17日 22:20

gemini fast：

代码： 全选

To implement the auto-save feature every 12 seconds, you need to add a periodic timer and logic to handle the `.ejautolocal` class.

Here are the specific modifications for your script:

### 1. Add the Auto-Save Logic and Interval
Add this block at the end of your script or after the existing event listeners. It defines the `autoSave` function and sets up the 12-second interval.

```javascript
// Function to handle auto-save every 12 seconds
function autoSave() {
    let etmainclone = etmain.cloneNode(true);
    let etmaincwait = etmainclone.querySelector(".etwait");
    if (etmaincwait) etmaincwait.remove();
    
    let data = etmainclone.outerHTML;
    const base64Data = 'data:image/svg+xml;base64,' + btoa(data);
    
    const firstImg = dataarea.firstElementChild;

    if (firstImg && firstImg.classList.contains('ejautolocal')) {
        // Update existing auto-save slot
        firstImg.src = base64Data;
    } else {
        // Create new auto-save slot and insert at the first position
        const img = document.createElement('img');
        img.src = base64Data;
        img.classList.add('ejtilesvgdata', 'ejautolocal');
        dataarea.insertBefore(img, dataarea.firstChild);
    }
    
    saveState();
    updateLocalStorage();
}

// Start interval for auto-saving every 12 seconds
setInterval(autoSave, 12000);
```

---

### 2. Update `updateLocalStorage`
Ensure that the `ejautolocal` class is preserved when reloading from `localStorage`. Modify the `updateLocalStorage` function to track classes:

```javascript
function updateLocalStorage() {
    const images = document.querySelectorAll('.ejtilesvgdata');
    let minimizels = localStorage.getItem("minimizels");
    localStorage.clear();
    images.forEach((img, index) => {
        // Store both src and class information
        const data = {
            src: img.src,
            isAuto: img.classList.contains('ejautolocal')
        };
        localStorage.setItem(`svg_${index}`, JSON.stringify(data));
    });
    localStorage.setItem("minimizels", minimizels);
}
```

---

### 3. Update `loadFromLocalStorage`
Modify the loading logic to parse the stored JSON and re-apply the `ejautolocal` class if necessary:

```javascript
function loadFromLocalStorage() {
    const svgKeys = [];
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        if (key.startsWith('svg_')) {
            const rawData = localStorage.getItem(key);
            try {
                const item = JSON.parse(rawData);
                svgKeys.push({ key, src: item.src, isAuto: item.isAuto });
            } catch (e) {
                // Fallback for old simple string data
                svgKeys.push({ key, src: rawData, isAuto: false });
            }
        }
    }
    svgKeys.sort((a, b) => {
        const numA = parseInt(a.key.replace('svg_', ''), 10);
        const numB = parseInt(b.key.replace('svg_', ''), 10);
        return numA - numB;
    });
    dataarea.innerHTML = '';
    svgKeys.forEach(item => {
        const img = document.createElement('img');
        img.src = item.src;
        img.classList.add('ejtilesvgdata');
        if (item.isAuto) img.classList.add('ejautolocal');
        dataarea.appendChild(img);
    });
}
```

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 17日 22:25

竟然能上傳js文件了？

增加每12秒自動保存到localstorage。

附件

ejtilelocalstorage20260417.js

(8.33 KiB) 已下载 6 次

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 18日 07:18

時針分針秒針：

附件

minute-hand.7z

(3.83 KiB) 已下载 4 次

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 18日 08:51

修改自動保存邏輯：


自動保存不會在頁面加載時自動開啟，也不再只能保存到第一個。


當點擊#update時，它將處於select狀態，再點擊下面dataarea的其中一個img時，此img邊框色變#a72，它將每隔7秒自動保存到那個img所指向的數據。當再次點擊update時，選中狀態消失，停止自動保存。


在保存時，img的左上角會短暫出現一個綠色的加號，可直接使用add內的svg圖案。


當開啟自動保存和關閉自動保存時，才會把當前數據放進undo stack中，在自動保存期間不會自動保存進undo stack。


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

代码： 全选

Here are the specific modifications needed to implement the new auto-save logic. 

### 1. Add new global variables for the auto-save interval
Place these near your existing global variables (like `let deleteMode = false;`, `let historyIndex = -1;`):

```javascript
// New global variables for target-based auto-saving
let autoSaveInterval = null;
let autoSaveTarget = null;
// Ensure dataarea is relative so the absolute-positioned plus sign aligns correctly
dataarea.style.position = 'relative';
```

### 2. Update the `dataarea` click listener
Replace your current `dataarea.addEventListener` block with this updated version to handle selecting the target image and triggering the 7-second auto-save interval:

```javascript
dataarea.addEventListener('click', function(event) {
    const target = event.target;
    if (target.classList.contains('ejtilesvgdata')) {
        if (deleteMode) {
            deleteSvg(target);
            deleteMode = false;
        } else if (updateMode) {
            // Remove border from previously targeted image if one exists
            if (autoSaveTarget) {
                autoSaveTarget.style.border = ''; 
            } else {
                // Push to undo stack only when turning on auto-save for the first time
                saveState(); 
            }
            
            // Set new auto-save target and style it
            autoSaveTarget = target;
            autoSaveTarget.style.border = '2px solid #a72';
            
            // Clear any existing interval to restart the 7-second timer
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
            }
            
            // Start auto-saving to this specific target every 7 seconds
            autoSaveInterval = setInterval(autoSaveTick, 7000);
            
        } else {
            etmain.outerHTML = atob(target.src.split(',')[1]);
            etinit();
            recordHistory();
        }
        setButtonBorder();
    }
});
```

### 3. Update the `updateButton` click listener
Replace your current `updateButton.addEventListener` block. This controls stopping the auto-save, resetting borders, and pushing the final state to the undo stack.

```javascript
updateButton.addEventListener('click', function() {
    if (updateMode == true) {
        updateMode = false;
        
        // Stop auto-save and push to undo stack
        if (autoSaveInterval) {
            clearInterval(autoSaveInterval);
            autoSaveInterval = null;
        }
        if (autoSaveTarget) {
            autoSaveTarget.style.border = ''; // Remove the #a72 border
            autoSaveTarget = null;
            saveState(); // Push to undo stack when turning off auto-save
        }
    } else {
        updateMode = true;
        deleteMode = false;
    }
    setButtonBorder();
});
```

### 4. Replace the old `autoSave` logic
Delete your existing `function autoSave()` and `setInterval(autoSave, 12000);` at the very bottom of the file. Replace them with these two new functions to handle the timed saving and visual indicator:

```javascript
// Function to show a temporary green plus sign on the top-left of the target image
function showSaveIndicator(img) {
    const addSvg = document.querySelector('#add svg');
    const plusIndicator = addSvg.cloneNode(true);
    
    // Position the SVG over the target image
    plusIndicator.style.position = 'absolute';
    plusIndicator.style.top = img.offsetTop + 'px';
    plusIndicator.style.left = img.offsetLeft + 'px';
    plusIndicator.style.width = '24px';
    plusIndicator.style.height = '24px';
    plusIndicator.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
    plusIndicator.style.borderRadius = '2px';
    plusIndicator.style.zIndex = '10';
    
    // Change the SVG path stroke to green
    const paths = plusIndicator.querySelectorAll('path');
    paths.forEach(p => p.setAttribute('stroke', '#0f0'));
    
    dataarea.appendChild(plusIndicator);
    
    // Remove the indicator after 500 milliseconds
    setTimeout(() => {
        plusIndicator.remove();
    }, 500);
}

// Function to handle auto-saving to the selected target every 7 seconds
function autoSaveTick() {
    if (!autoSaveTarget) return;
    
    let etmainclone = etmain.cloneNode(true);
    let etmaincwait = etmainclone.querySelector(".etwait");
    if (etmaincwait) etmaincwait.remove();
    
    let data = etmainclone.outerHTML;
    const base64Data = 'data:image/svg+xml;base64,' + btoa(data);
    
    autoSaveTarget.src = base64Data;
    
    // Update local storage WITHOUT pushing to the undo stack
    updateLocalStorage();
    
    // Show visual confirmation on the image
    showSaveIndicator(autoSaveTarget);
}
```

[ejsoon]

Re: 將改進混亂時鐘的網頁版

• 引用

帖子 由 ejsoon » 2026年 4月 18日 09:06

代码： 全选

<svg preserveAspectRatio="xMidYMid meet" id="etmain" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" rotatestart="0" stepvalue="180" snapto="0" displaywait="1">   <g id="tile0" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-9" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">1</text>

</g><g id="tile1" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">2</text>

</g><g id="tile2" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">3</text>

</g><g id="tile3" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-16" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">4</text>

</g><g id="tile4" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="17" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">5</text>

</g><g id="tile5" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-15" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">6</text>

</g><g id="tile6" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="18" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">7</text>

</g><g id="tile7" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-15" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">8</text>

</g>


<g id="tile8" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-14" y="16" stroke="none" fill="##5D4037" font-size="48" font-family="ZT Nature">9</text>

</g><g id="tile9" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-20" y="14" stroke="none" fill="##5D4037" font-size="40" font-family="ZT Nature">10</text>

</g><g id="tile10" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-16" y="14" stroke="none" fill="##5D4037" font-size="40" font-family="ZT Nature">11</text>

</g><g id="tile11" frontfill="#700" backfill="#2691c0"><path display="none" d="M 21,21 L -22,22 L -23,-23 Z"></path>

<circle r="24" cx="0" cy="0" fill="white" class="bcenter0"></circle>

<text x="-21" y="14" stroke="none" fill="##5D4037" font-size="40" font-family="ZT Nature">12</text>

</g></defs> <g class="etdrop" stroke="#777" stroke-width="2" stroke-linejoin="round" transform="translate(240,240) scale(1)"><g class="etboard">
<path d="M -240,-240 L -240,240 L 240,240 L 240,-240 Z" stroke="none" fill="lightblue" class="cclokbg"></path>
<circle r="180" cx="0" cy="0" fill="#e7e7e7" stroke="purple" stroke-width="7" class="bcenter0"></circle>
<circle r="172" cx="0" cy="0" fill="#decfaa" stroke="purple" stroke-width="2" class="bcenter0"></circle>

<circle r="6" cx="-72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="-72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="124.708" cy="-72" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="144" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="72" cy="-124.708" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle><circle r="6" cx="0" cy="-144" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

 <style>
@font-face {
    font-family: 'ZT Nature';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
</style>

  <path transform="scale(1.5) translate(-1.63,-65.4)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#e43" d="M 1.68,-9.55 1.71,-10 c 0,0 0.01,0.05 0.03,0.14 C 1.76,-9.94 1.78,-10 1.78,-10 l 0.03,0.44 c 0.47,2.23 2.78,12.20 6.69,13.96 0,0 -2.05,0.43 -5.16,4.38 1.85,-1.32 3.68,-1.71 4.30,-1.80 0.39,-0.05 0.39,0.04 0.61,0.37 0,0 -0.07,0.33 -0.07,0.34 -0.15,0.22 -0.19,0.18 -0.44,0.26 -0.86,0.28 -3.27,1.31 -4.74,3.87 v 0.55 c 1.02,-0.61 2.01,-0.86 2.62,-0.94 0.01,0 0.14,-0.01 0.14,-0.01 0.12,0.02 0.25,0.01 0.35,0.08 0.00,0.00 0.19,0.31 0.19,0.31 -0.02,0.12 -0.01,0.25 -0.07,0.35 -0.01,0.03 -0.07,0.11 -0.39,0.23 -0.88,0.33 -2.12,1.13 -2.85,2.41 l -0.06,21.21 c 0.79,0.43 1.32,1.28 1.32,2.25 0,1.01 -0.58,1.89 -1.44,2.30 0.01,0.08 0.03,0.17 0.03,0.27 -0.07,4.24 3.26,8.87 3.39,9.05 l 0.00,0.00 c 0.28,0.38 0.28,0.90 0,1.29 0,0 -0.89,1.23 -1.76,3.02 -0.72,1.47 -1.44,3.33 -1.59,5.19 2.77,0.56 4.86,3.02 4.86,5.96 0,3.35 -2.72,6.08 -6.08,6.08 -3.35,0 -6.08,-2.72 -6.08,-6.08 0,-2.97 2.13,-5.45 4.95,-5.98 -0.32,-3.98 -3.24,-8.02 -3.36,-8.19 l -0.00,-0.00 c -0.28,-0.38 -0.28,-0.90 0,-1.29 l 0.00,-0.00 c 0.12,-0.17 3.47,-4.81 3.39,-9.05 0,-0.09 0.00,-0.18 0.03,-0.27 -0.85,-0.41 -1.44,-1.29 -1.44,-2.30 0,-0.96 0.53,-1.81 1.32,-2.25 l 0.06,-21.21 c -0.09,-0.17 -0.22,-0.36 -0.36,-0.55 -1.10,-1.44 -2.52,-1.87 -2.57,-1.90 -0.10,-0.06 -0.23,-0.10 -0.30,-0.19 -0.00,-0.00 -0.08,-0.35 -0.07,-0.36 0.06,-0.10 0.09,-0.23 0.19,-0.30 0.19,-0.13 0.21,-0.09 0.44,-0.07 0.73,0.08 1.74,0.39 2.68,0.95 v -0.55 c -0.46,-0.81 -1.62,-2.51 -4.04,-3.60 -0.19,-0.08 -0.50,-0.21 -0.76,-0.29 -0.22,-0.07 -0.25,-0.05 -0.38,-0.24 -0.00,-0.00 -0.07,-0.34 -0.07,-0.34 0.06,-0.09 0.10,-0.22 0.19,-0.29 0.19,-0.13 0.20,-0.10 0.43,-0.07 0.95,0.14 2.42,0.59 3.77,1.44 0.16,0.10 0.33,0.21 0.51,0.34 -3.11,-3.94 -5.17,-4.38 -5.17,-4.38 3.91,-1.75 6.22,-11.73 6.69,-13.96 z m 2.32,60.15 c -0.56,-0.87 -1.56,-2.57 -2.33,-4.57 -0.76,2.00 -1.77,3.70 -2.33,4.58 0.56,0.87 1.55,2.56 2.32,4.56 0.25,-0.65 0.52,-1.28 0.80,-1.85 0.57,-1.16 1.15,-2.12 1.53,-2.71 z m -2.38,11.78 c -1.67,0 -3.04,1.36 -3.04,3.04 0,1.67 1.36,3.04 3.04,3.04 1.67,0 3.04,-1.36 3.04,-3.04 0,-1.67 -1.36,-3.04 -3.04,-3.04 z" fill-rule="evenodd" id="path1029"></path>

  <path transform="rotate(90) scale(1.2) translate(-6.17,-54.816)" stroke-linejoin="round" stroke="#000000" stroke-width="0" fill="#2ad" d="m 2.23,48.31 c -0.60,-1.23 -2.04,-3.40 -5.12,-3.94 -0.71,-0.12 -1.22,-0.10 -1.22,-0.10 -0.19,-0.05 -0.41,-0.07 -0.58,-0.19 -0.00,-0.00 -0.30,-0.47 -0.29,-0.48 0.17,-0.62 0.10,-0.78 0.75,-0.89 1.86,-0.31 6.15,-0.16 9.12,4.30 l 0.01,-1.07 c 0,0 -0.41,-4.26 -5.38,-6.53 0,0 3.81,-2.24 5.28,-6.70 -1.03,-0.50 -1.75,-1.57 -1.75,-2.81 0,-3.17 1.74,-12.86 2.13,-15.19 0.04,-0.32 0.07,-0.52 0.07,-0.55 0.00,-0.19 -0.01,-0.37 -0.03,-0.51 -0.03,-0.23 -0.09,-0.41 -0.12,-0.50 -0.00,-0.01 -0.00,-0.02 -0.01,-0.03 -0.01,-0.05 -0.81,-2.69 -2.25,-4.98 -0.84,-1.34 -1.88,-2.61 -3.20,-2.87 -0.37,-0.07 -0.80,0.02 -1.19,-0.03 -0.50,-0.07 -0.91,-0.47 -0.98,-0.98 -0.01,-0.11 -0.01,-0.23 0,-0.34 0.07,-0.50 0.47,-0.91 0.98,-0.98 0.39,-0.05 0.82,0.03 1.19,-0.03 1.32,-0.26 2.35,-1.53 3.20,-2.87 1.44,-2.28 2.24,-4.92 2.25,-4.98 0.64,-3.00 1.12,-4.94 1.12,-4.94 0,0 0.48,1.94 1.12,4.94 0.01,0.05 0.81,2.69 2.25,4.98 0.84,1.34 1.88,2.61 3.20,2.87 0.37,0.07 0.80,-0.02 1.19,0.03 0.50,0.07 0.91,0.47 0.98,0.98 0.01,0.11 0.01,0.23 0,0.34 -0.07,0.50 -0.47,0.91 -0.98,0.98 -0.39,0.05 -0.82,-0.03 -1.19,0.03 -1.32,0.26 -2.35,1.53 -3.20,2.87 -1.44,2.28 -2.24,4.92 -2.25,4.98 -0.00,0.01 -0.00,0.02 -0.01,0.03 -0.02,0.08 -0.08,0.26 -0.12,0.50 -0.02,0.14 -0.03,0.31 -0.03,0.51 0,0.03 0.02,0.23 0.07,0.55 0.39,2.33 2.13,12.02 2.13,15.19 0,1.23 -0.71,2.30 -1.75,2.81 1.46,4.45 5.28,6.70 5.28,6.70 -4.96,2.27 -5.38,6.53 -5.38,6.53 l 0.01,1.07 c 2.28,-3.44 5.22,-4.10 6.42,-4.30 1.48,-0.23 2.75,-0.00 2.77,0.00 0.17,0.09 0.39,0.16 0.51,0.32 0.00,0.00 0.15,0.56 0.15,0.56 -0.09,0.15 -0.14,0.35 -0.29,0.47 -0.37,0.28 -0.41,0.17 -0.88,0.19 -1.64,0.06 -4.47,0.81 -6.05,4.05 2.19,1.33 3.65,3.74 3.65,6.49 0,3.39 -2.22,6.26 -5.29,7.24 -1.46,0.53 -3.00,0.49 -4.59,0 -3.07,-0.97 -5.29,-3.85 -5.29,-7.24 0,-2.75 1.46,-5.16 3.66,-6.49 z m 3.93,2.69 c -2.09,0 -3.80,1.70 -3.80,3.80 0,2.09 1.70,3.80 3.80,3.80 2.09,0 3.80,-1.70 3.80,-3.80 0,-2.09 -1.70,-3.80 -3.80,-3.80 z m 0,-52.46 c -0.37,0.83 -0.84,1.76 -1.39,2.63 -0.69,1.09 -1.51,2.09 -2.45,2.82 0.93,0.72 1.76,1.73 2.45,2.82 0.55,0.87 1.02,1.80 1.39,2.63 0.37,-0.83 0.84,-1.76 1.39,-2.63 0.69,-1.09 1.51,-2.09 2.45,-2.82 C 9.08,3.28 8.26,2.28 7.57,1.19 c -0.55,-0.87 -1.02,-1.80 -1.39,-2.63 z" fill-rule="evenodd" id="path900"></path>

<circle r="5" cx="0" cy="0" fill="purple" stroke="none" stroke-width="0" class="bcenter"></circle>

</g>
<use href="#tile6" fill="#700" stroke="#777" transform="translate(-72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile8" fill="#700" stroke="#777" transform="translate(-144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile9" fill="#700" stroke="#777" transform="translate(-124.708,-72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile10" fill="#700" stroke="#777" transform="translate(-72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile11" fill="#700" stroke="#777" transform="translate(0,-144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile0" fill="#700" stroke="#777" transform="translate(72,-124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile1" fill="#700" transform="translate(124.708,-72) scale(1,1) rotate(0)" class="tiledropped" stroke="#777"></use><use href="#tile2" fill="#700" stroke="#777" transform="translate(144,0) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile3" fill="#700" stroke="#777" transform="translate(124.708,72) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile4" fill="#700" stroke="#777" transform="translate(72,124.708) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile5" fill="#700" stroke="#777" transform="translate(0,144) scale(1,1) rotate(0)" class="tiledropped"></use><use href="#tile7" fill="#700" stroke="#777" transform="translate(-124.708,72) scale(1,1) rotate(0)" class="tilesnapped tiledropped"></use>
</g>
</svg>