svg糖果手杖

下载代码

html

css

js

分享到微信朋友圈

X

html

<svg viewBox="0 0 300 300">
  <defs>
    <filter id="drawn">
      <feTurbulence baseFrequency="0.1325" numOctaves="8" />
      <feDisplacementMap in="SourceGraphic" scale="10" />
    </filter>
  </defs>
  <g id="toDraw">
    <g>
    <circle cx=50 cy="190" r="50" fill="white" />
    <path id="mint" d="M50,190 L50,140 C70,130 110,170 100,190 L50,190 L50,240 C-20,230 10,170 0,190" fill="red" />
    </g>
    
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    
    
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
    <rect class="stripe" x="0" y="0" width="24" height="24" fill="red" stroke="none" />
  </g>
</svg>

css

JavaScript

const stripes = document.querySelectorAll('.stripe');
const duration = 11000;
const offset = 12;
const offsetBase = 88;

const getPath = () => `polygon(${Math.random()*offset*1.95}% ${Math.random()*offset}%, ${Math.random()*offset+offsetBase}% ${Math.random()*offset}%, ${Math.random()*offset+offsetBase}% ${Math.random()*offset+offsetBase}%, ${Math.random()*offset*1.95}% ${Math.random()*offset+offsetBase}%)`;

stripes.forEach((stripe, i) => {
  stripe.setAttribute('width',i%2===1 ? 18 : 24);
  stripe.setAttribute('height',i%2===1 ?28:24);
  stripe.animate({
    offsetDistance: ['0%', '100%'],
    opacity: [0,1,1,1,1,1,1,0]
  }, {
    duration,
    direction: 'reverse',
    delay: -i / stripes.length * duration,
    iterations: Infinity
  });
  
//   stripe.animate({
//     clipPath: [getPath(), getPath()]
//   }, {
//     duration: duration * Math.random() + duration / 12,
//     direction: 'alternate',
//     iterations: Infinity
//   });
  
//   stripe.animate({
//     transform: ['skewX(18deg)','skewX(6deg)'],
//   }, {
//     duration: Math.random() / 2 * duration / 12 + duration / 12,
//     direction: 'alternate',
//     iterations: Infinity
//   });
});

// const drawn = document.getElementById('drawn').querySelector('feTurbulence');
// let freq = 0.001;
// const filtered = () => {
//   freq += 0.001;
//   drawn.setAttribute('baseFrequency',freq);
  
//   requestAnimationFrame(filtered)
// }

// requestAnimationFrame(filtered)

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

<!doctype html> <html> <head> <meta charset="utf-8"> <title>svg糖果手杖-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号