svg模仿指纹纹理效果代码-html代码-BFW代码库

svg模仿指纹纹理效果代码

代码语言：html

所属分类：背景

代码描述：svg模仿指纹纹理效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        document, body {
            background: #111122;
            margin: 0;
            min-height: 100vh;
        }

        body {
            align-items: center;
            display: flex;
            justify-content: center;
        }

        #container {
            align-items: center;
            display: flex;
            flex-direction: column;
        }

        #container > :first-child {
            cursor: pointer;
        }

        button {
            max-width: 200px;
            margin-top: 10px;
        }

        .tracer {
            color: #fff;
        }
    </style>




</head>

<body>
    <div id="container"></div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/svg.min.js"></script>
    <script type="module">

        import {
            Vec2
        } from 'https://cdn.skypack.dev/wtc-math';
        import fitCurve from 'https://cdn.skypack.dev/fit-curves';
        console.clear();

        const config = {
            seed: 1337,
            drawingType: 1,
            dimensions: new Vec2(700, 700),
            nscale: .00125,
            sscale: 20,
            stepSize: 25,
            num: 1,
            r: 5,
            k: 8,
            testGridSize: 1,
            offset: new Vec2(10, -200),
            sneks: 200
        };
        const vars = {
            noise: null,
            grid: null,
            drawing: null
        }
        const setup = () => {
            const container = document.querySelector('#container');

            config.offset.x = floatRandomBetween(-1000, 1000);
            config.offset.y = floatRandomBetween(-1000, 1000);
            config.nscale = floatRandomBetween(.000005, .002);

            container.innerHTML = '';

            vars.drawing = new Drawing(config.drawingType).addTo('#container').size(config.dimensions);

            const t = document.createElement('div')
            t.className = 'tracer';
            container.appendChild(t)

            vars.bluenoise = new BlueNoise({
                size: config.dimensions.addNew(new Vec2(config.r*-1, config.r*-1)),
                offset: new Vec2(config.r*1, config.r*1),
                r: config.r,
                k: config.k
            });
            vars.noise = new SimplexNoise(config.seed);
            vars.grid = new Grid({
                cellSize: new Vec2(config.testGridSize, config.testGridSize), fill: -1
            });

            /// Create the download button
            // const dl = document.createElement('button');
            // dl.innerText = 'download';
            // dl.addEventListener('click', () => {
            //   vars.drawing.download();
            // });
            // container.appendChild(dl);

            document.body.querySelector('#container>:first-child').addEventListener('click', () => {
                setup();
            });

            draw(); drawStep();
        }

        let sneki = 0;
        const drawStep = () => {
            const sneks = [];
            if (vars.bluenoise.news.length > 0) {
                requestAnimationFrame(drawStep)
                for (let i = 0; i < config.sneks; i++) {
                    const [p] = vars.bluenoise.news.splice(Math.floor(Math.random() * vars.bluenoise.news.length), 1.);
                    if (!p) continue;
                    if (p.subtractNew(config.dimensions.scaleNew(.5)).length > 200) continue;
                    const pos = p;

                    const dir = new Vec2(1, 0);
                    const f = field(pos, 1., sneki+1);
                    dir.angle = f.noise;

                    // vars.drawing.stroke = '#ff0000AA';
                    // vars.drawing.circle(pos, 1);

                    const distancebreak = 3;
                    let cont = false;
                    for (let x = -distancebreak*.5; x <= distancebreak*.5; x++) {
                        for (let y = -distancebreak*.5; y <= distancebreak*.5; y++) {
                            const offset = new Vec2(x, y);
                            const t = vars.grid.getChildAtPosition(pos.addNew(offset));
                            if (t !== -1) cont = true;
                        }
                    }
                    if (cont) continue;

                    // vars.drawing.circle(pos, .5);

                    const s = new Snek(pos, {
                        direction: dir,
                        maxLength: 2000,
                        id: sneki++,
                        distanceProjection: 5,
                        distanceBreak: distancebreak,
                        projectionBreakMultiplier: 0
                    });
                    sneks.push(s);
                    //        projectionBreakMultiplier: 2
                    //
                }
            }

            // for(let j = 0; j < config.lineLength; j++) {
            for (let i = 0; i < sneks.length; i++) {
                sneks[i].walkOut();
            }
            // }

            // document.querySelector('.tracer').innerHTML = vars.bluenoise.news.length;
            for (let i = 0; i <.........完整代码请登录后点击上方下载按钮下载查看