svg+react实现山间日出到日落景色效果代码
代码语言：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, scale: scale, key: i }))));
}
const treePaths = [/*#__PURE__*/
React.createElement("path", { d: "M122.449 298.001C119.11 298.127 118.729 306.124 119.11 307.471C119.49 308.818 117.25 310.165 117.123 312.775C116.996 315.343 117.123 316.816 117.123 316.816C117.123 316.816 110.698 310.923 108.584 314.964C106.471 319.005 109.218 322.582 109.218 322.582C109.218 322.582 108.373 325.908 108.965 328.349C109.599 330.79 110.317 330.454 110.951 331.927C111.586 333.4 111.712 335.126 109.852 335.126C107.993 335.126 104.907 333.526 103.174 335.126C101.44 336.725 99.7073 336.473 99.4114 339.04C99.1155 341.608 97.636 342.66 95.4802 342.787C93.3243 342.913 92.5634 344.26 92.6903 345.691C92.8171 347.122 96.4524 347.711 99.4114 347.333C102.37 346.954 106.513 347.333 107.147 348.553C107.781 349.774 109.134 351.5 105.837 351.921C102.582 352.342 99.9609 352.594 99.3691 353.226C98.7351 353.857 95.7338 355.372 93.0284 356.298C90.3231 357.224 90.1117 359.497 90.1963 360.592C90.2385 361.686 88.8858 361.77 89.4354 363.412C89.9849 365.053 89.5622 365.39 87.4486 366.99C85.335 368.589 80.1779 369.347 79.1211 370.82C78.0644 372.293 74.8517 372.925 75.1054 374.945C75.359 376.966 78.0644 376.545 79.9243 376.966C81.7842 377.386 80.3047 378.186 79.5439 378.397C78.783 378.565 75.1476 379.87 72.4423 381.343C69.7369 382.816 64.1148 382.774 64.1148 382.774C64.1148 382.774 68.6801 385.805 78.318 384.416C87.9559 383.069 99.9187 378.102 99.9187 378.102C99.9187 378.102 88.2518 386.478 82.7988 389.172C77.3458 391.866 74.5136 393.297 74.2177 394.476C70.1596 394.223 66.8624 394.308 66.3552 395.276C65.8479 396.244 68.8915 399.99 77.0499 399.78C71.9773 406.346 61.8744 411.355 61.8744 411.355C61.8744 411.355 72.7382 415.859 87.4909 402.01C84.5319 406.388 85.5041 408.03 82.841 410.808C80.1779 413.586 77.9798 416.953 75.359 417.458C72.7804 417.963 68.8915 420.278 68.2574 422.425C67.6233 424.572 67.2852 429.076 65.2984 430.128C63.3116 431.18 62.128 430.549 60.4372 432.78C58.7041 435.011 54.9842 435.726 54.1388 437.157C53.2933 438.589 55.6183 441.072 60.4795 440.23C65.3407 439.388 70.9628 435.726 72.5691 436.358C74.1754 436.989 70.1596 438.799 68.8069 440.399C67.4542 441.998 69.2296 442.503 66.8202 443.682C64.4107 444.86 63.1003 447.133 58.6618 448.312C54.2233 449.491 53.8006 450.711 51.687 451.932C49.5735 453.153 46.234 452.984 45.0081 454.079C43.7823 455.173 44.0359 457.825 46.9104 458.246C49.8271 458.667 53.7583 457.825 58.1968 458.246C62.6353 458.667 64.5375 457.825 67.6656 457.151C70.7514 456.478 74.2599 454.71 77.8107 453.153C81.3193 451.595 82.6297 451.679 85.0391 449.28C87.4486 446.881 92.1407 442.84 92.1407 442.84C92.1407 442.84 88.2095 448.607 85.8 451.806C83.3905 455.005 77.7262 459.677 73.4568 461.824C69.1874 463.97 66.8624 466.201 63.0157 467.169C59.1691 468.137 56.5482 470.368 55.1533 473.946C53.8006 477.524 41.0769 483.669 36.6807 483.375C32.2845 483.08 29.9595 484.132 29.875 485.101C29.8327 486.069 30.7204 489.015 36.1734 489.141C41.6264 489.268 43.0214 490.236 43.0214 490.236C43.0214 490.236 38.5829 492.803 38.752 494.529C38.9211 496.255 45.2195 495.371 47.629 495.329C50.0384 495.287 54.7728 493.477 57.14 493.477C59.5072 493.477 62.5085 493.224 62.5085 493.224C62.5085 493.224 61.6631 495.076 63.0157 496.002C64.3684 496.928 58.9577 504.8 56.9709 505.515C54.9842 506.273 52.7861 506.989 51.6448 509.261C50.5457 511.534 37.822 516.459 36.5961 517.133C35.3703 517.806 30.974 518.774 31.1009 520.29C31.2277 521.763 32.0731 523.91 39.8088 523.32C39.6397 525.088 41.246 525.888 44.205 525.467C47.164 525.046 47.9249 526.309 47.9249 527.824C47.9249 529.297 50.1653 529.845 52.8706 529.297C55.576 528.75 60.7754 528.329 60.7754 528.329C60.7754 528.329 57.605 531.149 52.617 532.37C47.629 533.591 41.6264 539.694 37.5684 540.199C45.5154 541.967 65.3407 536.032 65.3407 536.032C65.3407 536.032 47.629 544.956 41.7955 545.671C36.0043 546.429 21.2516 547.229 15.1646 546.303C9.11975 545.377 4.80807 548.997 1.89134 548.997C-1.02538 548.997 -0.814028 551.017 4.25854 552.322C9.3311 553.627 15.7986 556.152 19.0958 557.668C22.3507 559.225 41.8801 556.994 41.8801 556.994C41.8801 556.994 31.1431 562.845 28.0573 565.118C24.9715 567.391 24.3374 569.622 27.4233 569.411C30.5091 569.243 30.0018 570.506 32.9608 570.506C35.9198 570.506 40.2315 568.064 43.5286 568.864C46.7835 569.664 50.3766 566.886 52.4902 566.886C54.6037 566.886 53.2933 568.359 58.7886 568.359C64.2839 568.359 67.2006 567.138 69.4833 566.086C71.7659 565.034 76.754 565.96 80.4738 564.739C84.1937 563.518 91.7603 557.289 91.7603 557.289C91.7603 557.289 82.1224 568.064 78.9098 569.874C75.6972 571.726 73.5836 570.969 72.1464 571.305C70.7091 571.642 66.6934 575.346 63.988 576.483C61.2826 577.577 54.3501 578.587 52.7861 579.976C51.222 581.366 47.629 582.544 45.8536 583.302C44.0359 584.059 44.1204 585.659 40.1892 585.869C36.258 586.08 34.5671 585.07 32.3267 588.142C30.0441 591.173 24.2106 589.952 23.027 591.005C21.8434 592.057 16.0523 590.205 14.9955 591.131C13.981 592.057 16.94 595.677 20.7866 596.477C24.6333 597.276 25.2674 600.139 31.8195 598.245C38.3293 596.35 36.0466 600.097 41.4151 598.876C46.7835 597.655 51.1798 597.697 51.1798 597.697C51.1798 597.697 46.4031 604.053 42.9368 604.18C39.4706 604.306 35.2012 604.39 34.7785 606.453C34.3558 608.473 39.0901 610.746 42.8946 609.652C46.699 608.557 48.3053 607.379 50.5034 608.599C52.6593 609.778 57.8164 611.546 63.4385 610.157C69.0606 608.768 68.8915 609.567 72.7382 607C76.5849 604.474 89.3508 598.96 102.539 582.081C95.3956 596.266 89.4776 604.053 79.2902 609.104C81.0656 609.231 85.2928 608.431 85.2928 608.431C85.2928 608.431 81.8265 612.43 84.1937 614.155C86.5609 615.881 90.9994 611.756 94.212 609.357C97.4247 606.958 101.821 601.78 101.821 601.78C101.821 601.78 101.102 606.916 100.088 609.441C99.1155 611.967 101.187 613.356 104.399 612.514C107.612 611.672 115.813 604.222 115.813 604.222L114.756 637.18H85.7155L78.318 640H175.077L166.665 636.17L136.272 636.801C136.272 636.801 137.033 629.435 136.018 623.416C135.046 617.396 134.285 604.095 134.285 604.095C134.285 604.095 143.416 612.598 148.996 611.588C154.533 610.62 149.249 606.789 148.615 601.149C154.28 607.926 157.873 608.515 159.479 61.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0