svg+simplex-noise绘制日出东方景色效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+simplex-noise绘制日出东方景色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: grid; place-items: center; background: hsl(0, 50%, 98%); } svg { width: 75vmin; height: 75vmin; overflow: visible; } button { position: absolute; bottom: 1rem; right: 1rem; padding: 0.5rem 1rem; border: 1px solid #111; background: #111; color: #fff; font-family: system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 600; cursor: pointer; } </style> </head> <body > <button>Regenerate!</button> <script type="module"> console.clear(); import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js"; import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0"; const simplex = new SimplexNoise(); const width = 200; const height = 200; const svg = SVG().viewbox(0, 0, width, height).addTo("body"); const circleMaskGroup = svg.group().attr("id", "circleMask"); const hillsGroup = circleMaskGroup.group().attr("id", "hills"); const skyColor = "hsl(0, 50%, 95%)"; const sunColor = "hsl(45, 88%, 65%)"; const sunDotColor = "hsl(45, 80%, 97%)"; const birdColor = "hsl(45, 80%, 10%)"; circleMaskGroup.maskWith(svg.circle(200).cx(100).cy(100).fill("#fff")); svg.circle(200).cx(100).cy(100).fill("transparent").stroke({ width: 3, color: "hsl(45, 60%, 85%)" }); hillsGroup.rect(200, 200).fill(skyColor); for (let i = 0; i < 25; i++) { bird(random(0, 200), random(0, 200)); } createSun(); createHills(); const stitching = svg .text("Stitching away...") .font({ family: "Georgia", size: 12 }) .cx(100) .cy(100) .attr("id", "stitching") .hide(); document.querySelector("button").addEventListener("click", () => { stitching.show(); circleMaskGroup.node.style.opacity = 0; setTimeout(() => { hillsGroup.clear(); hillsGroup.rect(200, 200).fill(skyColor); for (let i = 0; i < 25; i++) { bird(random(0, 200), random(0, 200)); } createSun(); createHills(); stitching.hide(); circleMaskGroup.node.style.opacity = 1; }, 50); }); function bird(x, y) { const bird = hillsGroup .path(`M 0 0, Q 2 4 4 0`) .stroke(birdColor) .fill("none") .translate(x, y) .scale(random(0.5, 1)) .rotate(random(-20, 20)); } function createSun() { const originX = random(70, 100); const originY = random(50, 60); const baseRad = random(40, 50); hillsGroup .rect(baseRad * 2, baseRad * 2) .cx(originX) .cy(originY) .fill(skyColor); const inner = hillsGroup .circle(baseRad) .cx(originX) .cy(originY) .fill(sunColor); const bounds = inner.bbox(); let rays = 32; const angleStep = (Math.PI * 2) / rays; let rad; for (let i = 1; i <= rays; i++) { if (i % 2 === 0) { rad = baseRad / 1.375; } else { rad = baseRad; } const theta = i * angleStep; const x = originX + Math.cos(theta) * rad; const y = originY + Math.sin(theta) * rad; const ray = hillsGroup.line(originX, originY, x, y).stroke({ color: sunColor, linecap: "round", dasharray: 1 }); } const dots = dotPattern(bounds.x, bounds.y, baseRad, baseRad, 5, hillsGroup); dots.group.maskWith(inner.clone().fill("#fff")); dots.children.forEach((d) => { d.attr("fill", sunDotColor); }); } function createHills() { const numHills = 3; const hills = []; for (let i = 0; i < numHills; i++) { const container = hillsGrou.........完整代码请登录后点击上方下载按钮下载查看
网友评论0