svg变换的曲线格子效果-html代码-BFW代码库

svg变换的曲线格子效果

代码语言：html

所属分类：动画

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
    margin: 0;
}
.svg-container {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#my-svg {
    width: 100%;
    height: 100%;
    background: black;
}
#my-svg g {
    opacity: 0;
}
#my-svg g {
    background-color: rgba(167, 36, 36, 0.5);
}
.fade-in-out {
    animation-name: fadeinout;
    animation-timing-function: linear;
}
g.fade-in-out {
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
}
@keyframes fadeinout {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
.purple { stroke: #6b5b95 }
.yellow { stroke: #feb236 }
.red { stroke: #d64161 }
.orange { stroke: #ff7b25 }
</style>

</head>
<body translate="no">

<div class="svg-container">
<svg id="my-svg" preserveAspectRatio="xMidYMid meet">
</svg>
</div>


<script>
const $svgContainer = document.getElementsByClassName("svg-container")[0];
const $svg = document.getElementById("my-svg");
const col = 7;
const row = 7;
const maxGrids = 27;
const variation = 10;
const svgWidth = $svgContainer.offsetWidth;
const svgHeight = $svgContainer.offsetHeight;
const colWidth = svgWidth / col;
const rowHeight = svgHeight / row;
const colArray = Array(col + 1);
const rowArray = Array(row + 1);
const xPositions = colArray.fill(null).map((e, i) => (i * colWidth));
const yPositions = rowArray.fill(null).map((e, i) => (i * rowHeight));
const colors = ['#6b5b95', '#feb236', '#d64161', '#ff7b25'];

// set svg dimensions to window
function setDimension(elem, width, height) {
    elem.setAttribute("viewBox", "0 0 " + width + " " + height );
}

// varying position values 
function offbeat(position, variation) {
    const newPosition = position + ( ( ( Math.random() * 2 ) - 1 ) * variation );
    return newPosition;
}

// return an array of objects with x and y values
function fillPositionsArray(yPosArray, xPosArray, variation) {
    let positionsArray = [];
    yPosArray.forEach( (yPos, rowIndex) => {
        xPosArray.forEach( (xPos, colIndex) => {
            positionsArray.push({
                xPos : offbeat(xPos, variation), 
                yPos : offbeat(yPos, variation),
                row : rowIndex,
                col : colIndex,
            })
        })
    });

    return positionsArray;
}

// return array of svg lines with positions and styles
function createLines(category, positions, categoryName) {

    let linesArray = [];

    for (let i = 0; i <= category; i++) {
        
        filteredPosition = positions.filter(position => position[categoryName] == i);
        
        filt.........完整代码请登录后点击上方下载按钮下载查看