Космическое звездное поле Гудини - пример html js css

• HTML код


• CSS код
• Результат кода

<script src="https://unpkg.com/css-paint-polyfill"></script>

<script>

  CSS.paintWorklet.addModule("https://unpkg.com/houdini-cosmic-starfield");

</script>



<header>

  <h1>

    Houdini Cosmic Starfield

  </h1>

</header>

/* Package details:

https://www.npmjs.com/package/houdini-cosmic-starfield

*/

* {

  box-sizing: border-box;

  margin: 0;

}



body {

  min-height: 100vh;

  display: grid;

}



header {

  --cosmic-starfield-clouds: true;

  background-image: paint(cosmic-starfield);

  display: grid;

  place-content: center;

  padding: 5%;

}



h1 {

  font-family: system-ui, sans-serif;

  color: white;

  font-size: calc(1rem + 8vmin);

  text-align: center;

}