svg编织效果

下载代码

html

css

分享到微信朋友圈

html

<g transform="translate(210)">
  <g id="run2b" mask="url(#mrun2b)" transform="matrix(1,0,0,-1,-150,70)">
   <use xlink:href="#b1" class="thread red" data-color="2" />
   <rect x="35" y="10" width="30" height="32" transform="matrix(1,0,0,-1,30,69)" class="shadow-upper" />
   <use xlink:href="#hrun1" transform="matrix(1,0,0,-1,-10,70)" class="light" />
  </g>
  <g id="end1b" mask="url(#mend1b)" transform="translate(-20)">
   <use xlink:href="#b2" transform="matrix(-1 0 0 -1 0 70)" class="thread green" data-color="0" />
   <rect x="0" y="10" width="400" height="20" class="thread green" data-color="0" />
   <rect x="-35" y="10" width="545" height="20" class="shadow-line" />
   <rect x="35" y="10" width="10" height="32" transform="translate(-80)" class="shadow-upper" />
   <use xlink:href="#hstart1" transform="matrix(-1 0 0 1 10 0)" class="light" />
  </g>
  <g id="end2b" mask="url(#mend2b)">
   <use xlink:href="#b3" transform="matrix(-1,0,0,1,-10,0)" class="thread gold" data-color="1" />
   <rect x="-45" y="10" width="535" height="20" transform="translate(0 15)" class="shadow-line" />
   <path d="M 42,10 H 16 L 42,31 Z" transform="translate(-87,15)" class="shadow-upper" />
   <path d="M 35,-4 H 39 L 65,17 V 30 H 35 Z" transform="translate(-110,29)" class="shadow-lower" />
   <use xlink:href="#hstart2" class="light" />
  </g>
  <g id="end3b" mask="url(#mend3b)">
   <use xlink:href="#b2" transform="matrix(-1,0,0,1,-10,0)" class="thread red" data-color="2" />
   <rect x="-45" y="10" width="545" height="20" transform="translate(0 30)" class="shadow-line" />
   <rect x="35" y="-5" width="10" height="36" transform="translate(-90,30)" class="shadow-lower" />
   <use xlink:href="#hstart3" transform="matrix(-1 0 0 1 -10 0)" class="light" />
  </g>
 </g>
 </g>
 
 <g id="ring" transform="translate(170)">
  <title>Move the ring to braid</title>
  <rect x="0" y="5" ry="7.5" width="15" height="60" />
  <path d="M 14,14 C 14,10 12,6 7.6,6 3.2,6 1,10 1,14 2,14 3,10 7.5,10 12,10 13,14 14,14 Z" class="light" />
 </g>
 
 </svg>

css

JavaScript

const body = document.querySelector('svg');
const grow = document.querySelector('#grow');
const end = document.querySelector('#end');
const ring = document.querySelector('#ring');

const colors = ['green', 'gold', 'red'];

let followRing = 170;
let followMouse = 0;

const mod = (n, d) => ((n % d) + d) % d

function braid (newCount) {
    const count = grow.children.length;
    if (newCount === count) return;

if (newCount < count) {
        for(let i = newCount; i < count; i++) {
            const g = grow.children[i];
            if (grow.children[i]) grow.removeChild(g);
        }
    } else {
        for(let i = count; i < newCount; i++) {
            const g = document.createElementNS("http://www.w3.org/2000/svg", 'g');
            grow.append(g);
            if (mod(i, 2)) {
                g.outerHTML = `<g id="run11" mask="url(#mrun1)" transform="matrix(1 0 0 -1 ${10 + Math.floor(i / 2) * 20} 70)">
   <use xlink:href="#b1" class="thread" />
   <rect x="35" y="10" width="30" height="32" transform="matrix(1,0,0,-1,30,69)" class="shadow-upper" />
   <use xlink:href="#hrun1" transform="matrix(1,0,0,-1,-10,70)" class="light" />
  </g>`
            } else {
                g.outerHTML = `<g id="run12" mask="url(#mrun1)" transform="translate(${Math.floor(i / 2) * 20})">
   <use xlink:href="#b1" class="thread" />
   <rect x="35" y="-5" width="30" height="35" transform="translate(30 29)" class="shadow-lower" />
   <use xlink:href="#hrun2" class="light" />
  </g>`
            }
        }
    }

end.setAttribute('transform', `translate(${newCount * 10 - 60})`);
    for (let [i, g] of [...end.children].entries()) {
        g.classList.toggle('active', (newCount + i + 1) % 2);

for (let thread of g.querySelectorAll('.thread')) {
            const base = parseFloat(thread.dataset.color);

colors.forEach(c => thread.classList.remove(c));
            thread.classList.add(colors[mod(base + Math.floor(newCount / 2), 3)]);
        } 
    }
}

const follow = (event) => {
    const mx = body.getScreenCTM().inverse();
    let x = new DOMPoint(event.clientX, event.clientY).matrixTransform(mx).x;
    
    x = Math.max(x, 105);
    x = Math.min(x, 585);
    
    ring.setAttribute('transform', `translate(${followRing + x - followMouse})`);
    
    braid(Math.floor((x - 105) / 10));
}

ring.addEventListener('mousedown', (event) => {
    const mx = body.getScreenCTM().inverse();
    followMouse = new DOMPoint(event.clientX, event.clientY).matrixTransform(mx).x;

body.addEventListener('mousemove', follow);
});

body.addEventListener('mouseup', () => {
    body.removeEventListener('mousemove', follow);

followRing = 110 + grow.children.length * 10;
    ring.setAttribute('transform', `translate(${followRing})`);
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg