有趣的SVG路径

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var lines = 40,
    colors = ['#F51720','#FA26A0','#F8D210','#2FF3E0'];

for(var i=0; i<lines; i++){  
    var p = document.createElementNS("http://www.w3.org/2000/svg", "path"),        
        c = i;
    if (i>=colors.length) c = i%colors.length; //makes it loop through colors array
    document.getElementById("container").appendChild(p);
    TweenMax.set(p, {attr:{id:"line"+(i+1), class:'s', stroke:colors[c], 'stroke-width':rand(0.5,4.5), fill:'none', d:getPts(i)}});
}

window.addEventListener('mousemove', function(e){
  var l = Math.ceil(e.clientY/window.innerHeight*lines);
  TweenMax.to('#line'+l, 1, {attr:{d:getPts(l-1, e.clientX), 'stroke-width':rand(0.5,4.5)}, ease:Back.easeOut.config(2)} )
});

window.onresize = window.onclick = function(e){
  for(var i=0; i<lines; i++) TweenMax.to('#line'+(i+1), 0.4, {attr:{d:getPts(i)}, ease:Back.easeOut.config(4)} );
};

function getPts(i, x){
  x = x || window.innerWidth - window.innerWidth/lines*i;
  var w = window.innerWidth,
      y = window.innerHeight/lines*i;
  
  return 'M 0,'+y
          + 's '+w/10+',30 '+w/4+','+rand(10,20)
          + 's '+w/5+',-60 '+w/3+','+rand(-10,0)
          + 's '+(x/w*118)+',-51 '+(x/w*253)+',-16'
          + 's '+w+',32 '+w+',0';
}

function rand(min, max) {
  min = min || 0;
  max = max || 1;
  return min + (max-min)*Math.random();
}

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