Author Archives: Zevan

Quick line in HTML and JavaScript

Usually if you want to draw lines in HTML you use canvas or SVG. Awhile back I wondered how I might do it without those. This is really just a proof of concept speed coded answer to that question:
See the Pen Quick Line by Zevan Rosser (@ZevanRosser) on CodePen.

This works by using a div with [...]

Posted in Graphics, Math, html5, javascript, misc, motion | Tagged , , | Leave a comment

Color Breeder (aka Features)

Choose two colors to breed them and create 5 new colors:
See the Pen Color Breeder by Zevan Rosser (@ZevanRosser) on CodePen.

This is a speed coded pen from awhile back - the features object is interesting - it allows two objects to be bred together. In this case two colors. I could see this is as [...]

Posted in Graphics, Object, html5, javascript, misc | Tagged , , | Leave a comment

Quick SVG with Javascript

If you look into creating SVG dynamically with JavaScript you might stumble upon `document.createElementNS`. In most simple cases, you don’t need to go down that path. Contemporary libraries handle this stuff internally now (they didn’t always) or if you’re going vanilla… you can integrate this kind of thing somewhere:
See the Pen Inline Svg ES6 Template [...]

Posted in Uncategorized | Leave a comment

3d Point to 2d Point (Easy Mini 3d Engine)

Many years ago when I had just started programming I found this absolute gem by Andries Odendaal.
modern es6 version

let rotX = 0, rotY = 0,
perspective = 500,
currX, currY;
// learned something like this at Andries Odendaal’s
function point3d(x, y, z) {

Posted in 3D, Graphics, graphics algorithms, html5, javascript | Tagged , , , | Leave a comment

Hermit Crab Curve as PRNG

(a deterministic pseudo-random number generator with contrast and smoothness - inspired by stochastic and organic randomness)

Around 2015 I had the idea for a PRNG that would clamp itself and have moments of “smoothness”. When I got around to trying to create such a thing, the result was something I jokingly called the “Hermit Crab Curve”. I also called it the “Shard Curve”.
The equation for the curve defines a radius in [...]

Posted in Graphics, Math, functions, graphics algorithms, javascript, misc, motion | Tagged , , | Leave a comment

PRNG Sine Rendering (Easiest Seeded Random with Index)

Here is a codepen showing seeded random numbers created use `Math.sin`. We’ll get to the code in a bit, first a little backstory…
See the Pen PPRng Sine w Rendering by Zevan Rosser (@ZevanRosser) on CodePen.

Over the years I’ve used all manner of famous random number generators. From Tausworthe to Mersenne Twister.
Sometime last year I [...]

Posted in Math, Uncategorized, javascript, misc, random | Tagged , , | Leave a comment

Emmet as a Template (aka zen-coding)

This is not the most useful thing in the world - was just an idea I had awhile back… First off, I love Emmet (formerly zen-coding) created by Sergey Chikuyonok. I especially like it for quickly writing html or jsx.
While I don’t use them that often, I really enjoy Jade and Pug. Anyway, I realized [...]

Posted in html5, javascript | Tagged , , | Leave a comment

The Experimental Zeta Project

Sometime in 2015 I decided to do an experiment. I created a speed coded graphics library with the intention of eventually completely re-writing it . The idea being, I would work on an elegant (albeit strange) graphics library that would make it easy to quickly create complex graphics with very little code. The result was [...]

Posted in Uncategorized | Leave a comment

ArcType (quick and easy math authoring)

In 2015 I was writing lots of short recreational math documents. To aid myself in the creation of these, I built ArcType.
ArcType is a minimalistic editor that combines LaTeX, Markdown, HTML/CSS, gnuplot and Octave all in one place. A few months back I took ArcType and finalized it so that others could use it. [...]

Posted in Uncategorized | Leave a comment

Dynamic Getter

Getters in ES6 are usually defined within a class like this:

class RandomPoint {
get x() {
return Math.random();
get y() {
return Math.random();

In this case we use [...]

Posted in Uncategorized, javascript | Tagged , | Leave a comment