svg.js实现鼠标点击产生彩色墨汁水渍动画效果代码-html代码-BFW代码库

svg.js实现鼠标点击产生彩色墨汁水渍动画效果代码

代码语言：html

所属分类：其他

代码描述：svg.js实现鼠标点击产生彩色墨汁水渍动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          display: grid;
          place-items: center;
          min-height: 100vh;
        }
        
        svg {
          width: 25vmin;
          aspect-ratio: 1;
          overflow: visible !important;
          position: absolute;
          top: calc(var(--y) * 1px);
          left: calc(var(--x) * 1px);
          transform: translate(-50%, -50%);
        }
        
        h1 {
          margin: 0;
          opacity: 0.5;
          position: fixed;
          bottom: 1rem;
          right: 1rem;
          font-family: sans-serif;
          z-index: 10;
        }
    </style>



</head>

<body>
    <h1>tap to splat</h1>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg.3.1.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg.filter.3.0.8.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
    <script>
        const SIZE = 100
        const generateSplat = ({ x, y }) => {
          const splat = SVG();
          const COUNT = gsap.utils.random(2, 10);
          splat.viewbox(`0 0 ${SIZE} ${SIZE}`);
          const splats = splat.group()
          const circles = []
          const groups = []
          const color = `hsl(${gsap.utils.random(0, 359)} 100% 69%)`
        
          for (let i = 0; i < COUNT; i++) {
            const circle = splat.circle(SIZE);
            circle.fill(color)
            circle.stroke({
              color: 'hsl(0 0% 0%)',
              width: 2,
            })
            const group = splat.group();
            group.add(circle);
            splats.add(group);
            groups.push(group.node)
            circles.push(ci.........完整代码请登录后点击上方下载按钮下载查看