git2358

<a href="https://canvasanimations.com/2017/10/06/recreating-yoshis-island/">
<div id="controls">
  <img src="http://www.unm.edu/~bmatthews1/hosted/just%20assets/wordpress.png", width="30px"/><br>
  Read about how this was made<br>
  over on Wordpress
</div>
</a>

git2358

Course Clear! (Splitting.js Demo)

A Super Mario Maker-like Course Clear screen built with Splitting.js.

A Pen by Shaw on CodePen.

License.

git2358

//- Planet Data
- var planetList = [{"name":"mercury", "tilt":"0.034", "day": "1,407", "year":"88"},{"name":"venus", "tilt":"177.3", "day": "5,832", "year":"224.7"},{"name":"earth", "tilt":"23.26", "day": "23.9", "year":"365.2"},{"name":"mars", "tilt":"25.2", "day": "24.6", "year":"687"},{"name":"jupiter", "tilt":"3.1", "day": "9.9", "year":"4,331"},{"name":"saturn", "tilt":"26.7", "day": "10.7", "year":"10,747"},{"name":"uranus", "tilt":"97.8", "day": "17.2", "year":"30,589"},{"name":"neptune", "tilt":"28.3", "day": "16.1", "year":"59,800"},{"name":"pluto", "tilt":"122.5", "day": "153.3", "year":"90,560"}, {"name":"sun", "tilt":"0", "day": "~600", "year":"0"}];

//- Planet Template
each planet in planetList
  article(class="card card--"+planet.name)
    div(class="card__planet")
      div(class="planet__atmosphere")
        div(class="planet__surface")
    div(class="card__info")

git2358

.container
  - for (i = 0; i < 400; i++)
    .trigger
  .monitor
    .camera.o-x
      .camera.o-y
        .camera.o-z
          .vr
            - for (i = 0; i < 20; i++)
              .vr_layer

git2358

<div class="box">
  <div class="circle"></div>
  <div class="orbit"></div>
  <div class="orbit"></div>
  <div class="orbit"></div>
  <div class="orbit"></div>
</div>

git2358

#container
	.bg.bg_one
	.bg.bg_two
	.bg.bg_three
	.bg.bg_four
	.bg.bg_five

git2358

<div id="mouse-container">
    <div id="lottie"></div>
</div>
<div id="cursor_preloader"></div>

git2358

Celeste snowglobe round 3D

Been playing a lot of Celeste. In the eye of the storm with Madeline.

Special sauce includes bokeh shapes for the snowflakes and light rods, which grow & fade out as the move further from the scene center.

View more round 3D Pens

---

git2358

<svg id="svg" viewBox="0 0 1000 1000">
  <path id="path1"></path>
  <path id="path2"></path>  
  <g id="dot-container"></g>
</svg>

<div class="controls">
  <input type="checkbox" id="show-points">
  <label for="show-points">Show Points</label>
</div>

git2358

Fizz

Here's some simulated fizz. It is not physically accurate, but I think it still looks cool.

A Pen by Vivek Thakyal on CodePen.

License.