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.setAttribute( "attributeName" , attrName); animation.setAttribute( &quo

Fallout Premier on Amazon Prime Video

Coming tomorrow!

Triangle in a Square

My solution for area of shadows | geometry problem from Facebook Algebra Tricks . I don't run that group but I enjoy solving the problems there. My posts here also serve as an exercise in CSS animation and embedded display of Google doc viewer (docs.google.com/viewer) .

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