Skip to content

Instantly share code, notes, and snippets.

View lostintangent's full-sized avatar

Jonathan Carter lostintangent

  • GitHub Staff
  • Seattle, WA
  • 20:23 (UTC -07:00)
  • X @lostintangent
View GitHub Profile
@lostintangent
lostintangent / index.html
Last active February 27, 2024 20:24
ZzFX Sound Board - Zuper Zmall Zeeded Zound Zynth
<body bgcolor=#223><center>
<div style=font-size:45px><b>ℤ𝕫𝔽𝕏 - Zuper Zmall Zound Zynth</b></div>
<div style=font-size:20px><i>A tiny tool for creating and playing sound effects with JavaScript</i></div>
<div style=max-width:799px>
<div style=font-size:20px>
<input id=volume type=range min=0 max=1 step=.01 oninput='zzfxV=volume.value;volumeText.innerHTML=volume.value*100|0'></input>
Volume <span id=volumeText>30</span> %
</div>
<button onClick=zzfx(...[,,1675,,.06,.24,1,1.82,,,837,.06])>💰</button>
<button onClick=zzfx(...[,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17])>🥊</button>

Flower Timeline

Calling it flower chain would actually be appropriate. Experiment with SVG syntax and anime.js to chain a series of animation.

I'm still uncertain as to how anime.js converts the coordinates to pixel values, but it seems to work.

A Pen by Gabriele Corti on CodePen.

License.

@lostintangent
lostintangent / foo.bar.md
Last active June 10, 2025 18:11
GLSL: fire

Oh hey!

@lostintangent
lostintangent / index.html
Last active March 31, 2020 05:13
Rock'N'Roll Half-Marathon animation
<svg class="rnr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 790.59 1071">
<defs>
<style>
.cls-1,
.cls-10,
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
@lostintangent
lostintangent / 1 - Type Selector---README.md
Last active March 18, 2025 20:34
CSS Dinner [Archived]

Type Selector

Select elements by their type. Selects all elements of type A. Type refers to the type of tag, so div, p and ul are all different element types.

Examples

  • div selects all div elements.
  • p selects all p elements.
@lostintangent
lostintangent / index.html
Last active March 27, 2020 03:23
Stay At Home Be Safe
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<svg width="100%" viewBox="0 0 752 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group">
<g id="BACKGROUND">
<path id="Vector" d="M750 0H0V500H750V0Z" fill="#FFDCD6"/>
</g>
@lostintangent
lostintangent / 3d-truchet-doshirak-inside-use-wsad-and-mouse.markdown
Created March 18, 2020 04:48
3d truchet - doshirak inside - use WSAD and mouse
@lostintangent
lostintangent / index.html
Last active August 15, 2023 21:26
Rock paper scissors
<span id="pc" class="hidden">✊</span>
<div id="player">
<span id="rock">✊</span>
<span id="paper">🤚</span>
<span id="scissor">✌️</span>
</div>
<p class="hidden">You Win</p>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/utils/BufferGeometryUtils.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
var noise = `
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : stegu