idettman

Fomalhaut && the Dust Disc

[ Mousemove / TouchSwipe ]
Young Star Fomalhaut :

A Pen by Isaac Dettman on CodePen.

License.

idettman

<canvas id='canv'></canvas>

idettman

<div class="container">
  <svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
 <filter id="goo" color-interpolation-filters="sRGB">
        <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0.3 0 0 0  0 1 0.3 0 0  0 0 1 0 0  0 0 0 25 -20" result="cm" />

      </filter>  

idettman

<div class="cube">
  <div class="faces-top">
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>
    <div class="face"></div>

idettman

base64 glitch animation

just a test

A Pen by Isaac Dettman on CodePen.

License.

idettman

never force

Because I know you will never force my door, I can open up my arms to you.

A Pen by Isaac Dettman on CodePen.

License.

idettman

Cube Illusion

Works best on Chrome.

Came across this illusion: https://openclipart.org/image/800px/svg_to_png/194620/dice-triangle.png and thought of trying it out using html and css :)

To make the illusion possible, the last cube (light green) has two cubes on top of each other with a different z-index.

One of these cube is halved having the top and bottom sides triangles instead of squares. You can change $impossible-colour to see this cube :)

idettman

<div class="visualizr">
  <div class="controls">
    <div class="field">
      <label for="width">Width</label>
      <input type="range" name="width" value="20">
    </div>
    <div class="field">
      <label for="height">Height</label>
      <input type="range" name="height" value="50">
    </div>

idettman

<canvas class='c'></canvas>
<canvas class='c'></canvas>
<canvas class='c'></canvas>

<section class='controls'>
  <label for='curve-order'>Curve order:</label>
  <input type='range' min='1' max='10' value='3' id='curve-order' step='1'/>
  
  <label for='animation-duration'>Animation duration:</label>
  <input type='range' min='2' max='32' value='10' id='animation-duration'/>

idettman

Canvas Cube III

Another css3D + canvas experiment

A Pen by Isaac Dettman on CodePen.

License.