rxctionzz

<div id="score">Press UP</div>

<div id="controls">
  <div id="buttons">
    <button id="accelerate">
      <svg width="30" height="30" viewBox="0 0 10 10">
        <g transform="rotate(0, 5,5)">
          <path d="M5,4 L7,6 L3,6 L5,4" />
        </g>
      </svg>

rxctionzz

<div class="container"></div>

rxctionzz

<div class="container"></div>

rxctionzz

<div>
	<label>Switch</label>
	<input name="cb1" id="cb1" type="checkbox" />
	<label for="cb1"><span></span></label>
</div>

rxctionzz

<input type="checkbox" id="debug" />

<ul class="cards" id="cards">
    <li id="card_0">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--Front-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_1">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--A-Thousand-Clouds-Front-Cover-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_2">

rxctionzz

<input type="checkbox" id="debug" />

<ul class="cards" id="cards">
    <li id="card_0">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--Front-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_1">
        <img draggable="false" src="https://assets.codepen.io/89905/coverflow--A-Thousand-Clouds-Front-Cover-1024x1024.jpg" width="1200" height="1200" />
    </li>
    <li id="card_2">

rxctionzz

_ Particle Trails _

Trails of particles started in circles into canvas. The canvas is not clean for build trails.

A Pen by Jeremie Boulay on CodePen.

License.

rxctionzz

Preact + JSX

A Pen by Chris Coyier on CodePen.

License.

rxctionzz

Custom JSX Function

A Pen by Chris Coyier on CodePen.

License.

rxctionzz

Gooey button hover effect with SVG filters & CSS

Originally developed for https://prodi.gy. Uses the "gooey" SVG filter on top of a button element, and pseudo-elements with hover transitions for "bubbles".

For more details on the goo filter, see this post by CSS Tricks: https://css-tricks.com/gooey-effect/

A Pen by Ines Montani on CodePen.

License.