spline实现随机圆圈曲线纹理效果代码-html代码-BFW代码库

spline实现随机圆圈曲线纹理效果代码

代码语言：html

代码描述：spline实现随机圆圈曲线纹理效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
  
<style>
html, body {
  display: grid;
  place-items: center;
  min-height: 100%;
  background-color: #eee;
}

svg {
  background: #fff;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
}

.fill {
  fill: #fff;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 10;
}
</style>



  
  
</head>

<body >
  <svg 
  viewBox="0 0 1000 1000" 
  width="1000" 
  height="1000" 
  role="img"
>
  <title>
    A geometric pattern composed of nested circles and squiggly lines.
    Inspired by Legends of Zelda: Tears of the Kingdom
  </title>

  <g class="pattern">
    <!-- 
      Our graphics code goes here 
    -->
  </g>
</svg>

<button>Randomize</button>

  
      <script  type="module">
import { randomInt } from 'https://unpkg.com/randomness-helpers@0.0.1/dist/index.js';
import { spline } from 'https://unpkg.com/@georgedoescode/spline@1.0.1/spline.js';

const gridSize = 1000;

function circle({ x, y, r, className }) {
  return `
    <circle 
      cx="${x}" 
      cy="${y}" 
      r="${r}" 
      class="${className}"
    />
  `;
}

function circleGroup({x, y, r }) {
  // We'll store all our circles in an array.
  const circles = [];

  // First, draw a circle with a white background but no border.
  // This will hide any elements behind the circle.
  circles.push(circle({ x, y, r, className: 'fill' }));

  // Decide how much space to put between our circles.
  const gap = 20;

  // Draw a number of circles, making each one smaller than the last
  // until we hit a radius of 0.
  let circ.........完整代码请登录后点击上方下载按钮下载查看