Jonathan Carter lostintangent

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.

Oh hey!

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.

Hot Ones Animation

That's a homage to my favorite YouTube channel, First We Feast, that is responsible for THE GREATEST INTERVIEW SHOW OF ALL TIME Hot Ones.

A Pen by Ryan Monteiro on CodePen.

License.

3d truchet - doshirak inside - use WSAD and mouse

A Pen by Stranger in the Q on CodePen.

License.

	<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>

	<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,

	<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>

	<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