svg+react实现山间日出到日落景色效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+react实现山间日出到日落景色效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-main {
  width: 100vw;
  height: 100vh;
}

.tr-origin-bottom {
  transform-origin: 0% 100%;
}

button {
  position: fixed;
  right: 16px;
  top: 16px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>




</head>

<body >
  <div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
      <script>
const { useState } = React;

const { random, floor } = Math;

const range = (n) =>
Array(n).
fill(0).
map((i, j) => i + j);

const rand = (max, min = 0) => min + random() * (max - min);
const randInt = (max, min = 0) => floor(min + random() * (max - min));
const randChoise = arr => arr[randInt(arr.length)];
const cut = (d, n) => range(n).map(i => d / n * i);

function App() {
  const [key, setKey] = useState(random());
  const onClick = () => {
    setKey(random());
  };
  const pallette = randomPallette();
  return /*#__PURE__*/(
    React.createElement(React.Fragment, null, /*#__PURE__*/
    React.createElement(Refresh, { onClick: onClick, pallette: pallette }), /*#__PURE__*/
    React.createElement(Main, { key: key, pallette: pallette })));


}

function Refresh({ onClick, pallette }) {
  return /*#__PURE__*/(
    React.createElement("button", { onClick: onClick }, /*#__PURE__*/
    React.createElement("svg", {
      width: "50",
      height: "50",
      viewBox: "0 0 50 50",
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/

    React.createElement("circle", { cx: "25", cy: "25", r: "22", fill: "#00000044" }), /*#__PURE__*/
    React.createElement("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M14.8 11.4C15.2509 11.4 15.6833 11.5791 16.0021 11.8979C16.3209 12.2168 16.5 12.6492 16.5 13.1V16.6717C17.9145 15.2289 19.6729 14.1698 21.6098 13.5944C23.5466 13.0189 25.598 12.9459 27.5709 13.3822C29.5437 13.8186 31.373 14.75 32.8865 16.0886C34.3999 17.4273 35.5477 19.1291 36.2217 21.0339C36.3035 21.246 36.3419 21.4723 36.3347 21.6995C36.3274 21.9267 36.2747 22.1502 36.1796 22.3566C36.0846 22.5631 35.949 22.7484 35.7811 22.9016C35.6131 23.0547 35.4162 23.1727 35.2019 23.2484C34.9875 23.3241 34.7602 23.3561 34.5333 23.3424C34.3064 23.3288 34.0846 23.2697 33.8809 23.1688C33.6772 23.0679 33.4958 22.9272 33.3475 22.755C33.1991 22.5827 33.0868 22.3825 33.0172 22.1661C32.504 20.7157 31.607 19.4317 30.4216 18.4509C29.2363 17.4701 27.807 16.8293 26.2862 16.5967C24.7653 16.3642 23.2099 16.5486 21.7856 17.1303C20.3613 17.712 19.1215 18.6693 18.1983 19.9H23.3C23.7509 19.9 24.1833 20.0791 24.5021 20.3979C24.8209 20.7168 25 21.1492 25 21.6C25 22.0509 24.8209 22.4833 24.5021 22.8021C24.1833 23.1209 23.7509 23.3 23.3 23.3H14.8C14.3491 23.3 13.9167 23.1209 13.5979 22.8021C13.2791 22.4833 13.1 22.0509 13.1 21.6V13.1C13.1 12.6492 13.2791 12.2168 13.5979 11.8979C13.9167 11.5791 14.3491 11.4 14.8 11.4V11.4ZM14.8136 26.7969C15.0241 26.7226 15.2472 26.6904 15.4702 26.7023C15.6931 26.7142 15.9116 26.7698 16.113 26.8661C16.3144 26.9624 16.4949 27.0975 16.6442 27.2635C16.7934 27.4296 16.9085 27.6234 16.9828 27.8339C17.496 29.2843 18.393 30.5683 19.5784 31.5491C20.7638 32.5299 22.193 33.1708 23.7138 33.4033C25.2347 33.6359 26.7901 33.4515 28.2144 32.8698C29.6387 32.288 30.8785 31.3308 31.8017 30.1H26.7C26.2491 30.1 25.8167 29.9209 25.4979 29.6021C25.1791 29.2833 25 28.8509 25 28.4C25 27.9492 25.1791 27.5168 25.4979 27.1979C25.8167 26.8791 26.2491 26.7 26.7 26.7H35.2C35.6509 26.7 36.0833 26.8791 36.4021 27.1979C36.7209 27.5168 36.9 27.9492 36.9 28.4V36.9C36.9 37.3509 36.7209 37.7833 36.4021 38.1021C36.0833 38.4209 35.6509 38.6 35.2 38.6C34.7491 38.6 34.3167 38.4209 33.9979 38.1021C33.6791 37.7833 33.5 37.3509 33.5 36.9V33.3283C32.0855 34.7712 30.3271 35.8302 28.3902 36.4057C26.4534 36.9812 24.402 37.0542 22.4291 36.6178C20.4563 36.1814 18.627 35.2501 17.1136 33.9114C15.6001 32.5728 14.4523 30.8709 13.7783 28.9661C13.7039 28.7556 13.6718 28.5325 13.6837 28.3095C13.6955 28.0866 13.7512 27.8682 13.8475 27.6667C13.9438 27.4653 14.0788 27.2848 14.2449 27.1356C14.4109 26.9863 14.6048 26.8713 14.8153 26.7969H14.8136Z",
      fill: pallette[1] }))));




}

function randomPallette() {
  const pallettes = [
  [
  '#2F0668',
  '#41009a',
  '#6f05ff',
  '#7e1dff',
  '#a25eff',
  '#C49AFC',
  '#CEA9FF',
  '#D4B7FC',
  '#D9BFFC',
  '#E7D5FF'],

  [
  '#042840',
  '#164362',
  '#1E6591',
  '#4E8DC0',
  '#96BFEB',
  '#B5D6F9',
  '#C1DFFF',
  '#CDE5FF',
  '#DBECFF',
  '#EAF4FF'],

  [
  '#44110E',
  '#69241D',
  '#993526',
  '#CC592C',
  '#E07736',
  '#EDB168',
  '#F4BF7F',
  '#F9D09E',
  '#FFDCB2',
  '#FFEAD0'],

  [
  '#182E00',
  '#264700',
  '#356300',
  '#6E9A3B',
  '#B5D97F',
  '#CBEDA0',
  '#D5F1B1',
  '#E1F7C5',
  '#ECFBD9',
  '#FBFFF5'],

  [
  '#16191E',
  '#434554',
  '#535468',
  '#6B6C82',
  '#8889A1',
  '#ADAEC7',
  '#BEBFD6',
  '#C5C6DF',
  '#D1D2E8',
  '#DFE0EF'],

  [
  '#21221F',
  '#3A3B36',
  '#4E4F49',
  '#686962',
  '#7C7D77',
  '#A4A69B',
  '#B5B6AF',
  '#C8C8C2',
  '#D7D7D2',
  '#F2F2F1']];



  return randChoise(pallettes);
}

function Main({ pallette }) {
  return /*#__PURE__*/(
    React.createElement("div", { className: "container", style: { background: pallette[5] } }, /*#__PURE__*/
    React.createElement("svg", { id: "svg", viewBox: "0 0 1280 640", className: "svg-main" }, /*#__PURE__*/
    React.createElement("g", { clipPath: "url(#clip0)", transform: `translate(${rand(950, -150)},0)` }, /*#__PURE__*/
    React.createElement("circle", { cx: "262", cy: "187", r: "148", fill: pallette[6] }), /*#__PURE__*/
    React.createElement("circle", { cx: "262", cy: "187", r: "110.863", fill: pallette[7] }), /*#__PURE__*/
    React.createElement("circle", { cx: "262", cy: "187", r: "85.1956", fill: pallette[8] }), /*#__PURE__*/
    React.createElement("circle", { cx: "262", cy: "187", r: "60.6199", fill: pallette[9] })),

    range(5).
    filter(() => random() < 0.75).
    map((i) => /*#__PURE__*/
    React.createElement(Bird, { color: pallette[4], key: i })), /*#__PURE__*/

    React.createElement(TreeLine, { color: pallette[4], scale: 0.6, count: 16 }), /*#__PURE__*/
    React.createElement(Animal, { color: pallette[4], scale: 0.4 }), /*#__PURE__*/
    React.createElement(TreeLine, { color: pallette[3], scale: 0.8, count: 8 }), /*#__PURE__*/
    React.createElement(Animal, { color: pallette[3], scale: 0.6 }), /*#__PURE__*/
    React.createElement(TreeLine, { color: pallette[2], scale: 1, count: 1 }), /*#__PURE__*/
    React.createElement(Animal, { color: pallette[2], scale: 0.8 }), /*#__PURE__*/
    React.createElement(TreeLine, { color: pallette[1], scale: 1.2, count: 3 }), /*#__PURE__*/
    React.createElement(Animal, { color: pallette[0] }), /*#__PURE__*/
    React.createElement("rect", { y: "640", width: "1280", height: "16", fill: pallette[0] }), /*#__PURE__*/
    React.createElement(Grass, { color: pallette[0] }), /*#__PURE__*/
    React.createElement("defs", null, /*#__PURE__*/
    React.createElement("clipPath", { id: "clip0" }, /*#__PURE__*/
    React.createElement("rect", { width: "1280", height: "640", fill: "white" }))))));





}

function TreeLine({ color, scale, count }) {
  return /*#__PURE__*/(
    React.createElement(React.Fragment, null,
    cut(1280, count).
    filter(() => random() > 0.25).
    map((i) => /*#__PURE__*/
    React.createElement(Tree, { x: rand(-100, 1280), color: color, .........完整代码请登录后点击上方下载按钮下载查看