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")
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0