doc22940

Example for the 11ty CSS Houdini Generator

This is the demo for the worklet created with the assistance of the 11ty CSS Houdini Generator, which is an Eleventy environment for creating CSS Houdini worklets.

A Pen by Acampbell on CodePen.

License.

doc22940

<div transition-style="in:wipe:up">
  👍
</div>

doc22940

<div transition-style="in:custom:swoopy">
  <h1>transition.css</h1>
  <p>customized with <b>The Hackpack</b></p>
</div>

doc22940

<div transition-style="in:wipe:up">
  <h1>transition.css</h1>
  <p>Drop-in CSS transitions @ <a href="http://transition.style" target="_blank">transition.style</a></p>
</div> 

doc22940

<div class="viewport" id="app">
  <transition name="nav">
    <nav class="nav" v-if="loaded">
      <a class="nav__brand" href="https://codepen.io/xdesro">
            <svg viewBox="0 0 100 100">
              <path
                d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"
              ></path>
            </svg>
          </a>

doc22940

<div class="viewport" id="app">
  <transition name="nav">
    <nav class="nav" v-if="loaded">
      <a class="nav__brand" href="https://codepen.io/xdesro">
            <svg viewBox="0 0 100 100">
              <path
                d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"
              ></path>
            </svg>
          </a>

doc22940

#CodepenChallenge - "Circle": Fresnel Refractivity Sphere (GLSL + ThreeJS)

I'l admit this is barely a circle but I think it's super cool so YEET.

A Pen by Acampbell on CodePen.

License.

doc22940

<div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>

doc22940

Bouncing Circles

A Pen by Acampbell on CodePen.

License.

doc22940

<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">

	<defs>

		<path id="gridBox" d="M281,328.39l30-109.16M518.73,328.89,281,328.39m30-109.16H489m0,0,29.74,109.66" fill="none" stroke-miterlimit="10" stroke-width="0.75" />

		<filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
			<feGaussianBlur stdDeviation="20" result="coloredBlur" />
			<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
			<feFlood id="glowAlpha" flood-color="#3F21E9" flood-opacity="1"></feFlood>