ed.agoff.net

More HTML/JavaScript graphics experimentation, this time with SVG animation . Click/tap and drag in the frame below. Source: <svg id = "mySvg" viewBox = "0 0 400 300" style = "border: solid 1px black; width:100%; aspect-ratio: 4/3" ></svg> <script> var svg = document.getElementById( "mySvg" ), svgViewRect, clientViewRect, // svg and client coordinates currMouseDown = null , mouseDownIdleID = 0 ; const initialMouseTimeout = 250 , fasterMouseTimeout = 25 ; function animate(element, attrName, to, dur, repeatCount, fill = null ) { // animates SVG element attribute from its current value towards "to" value over timespan "dur" var animation = document.createElementNS( "http://www.w3.org/2000/svg" , "animate" ); animation.setAttribu...

Circles

An HTML / JavaScript exploration of the canvas element and touch and mouse event listeners. Touch or click and drag in frame below! Source: <script id = "myScript" > thisScript = document.getElementById( "myScript" ); class CanvasClass { onscreenCanvas; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas offscreenCanvas; // https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/OffscreenCanvas mouseDownHere = false ; // indicates whether mouseDown has been started within canvas constructor (width = 400 , height = 300 ) { this .onscreenCanvas = document.createElement( "canvas" ); Object.assign( this .onscreenCanvas, { width: width, height: height, style: "display: block; border: solid 1px black; width: 100%; aspe...

Fallout Premier on Amazon Prime Video

Coming tomorrow!

Powered by Blogger

ed.agoff.net

Search This Blog

Posts

Circles

Women and Bears

I smile because I have no idea what's going on

Zig-zag Square

Four Squares

Triangle in a Square

Two Squares

Dinner at Downtown Whirled Pies