With Style
copy with( document.body .appendChild ( document.createElement ( 'div' ) ) .style ) height = '100px' , background = 'red' , border = '3px solid blue' , transform = 'rotate(10deg)'
Try it out…
Was looking through some old code and saw something like this… people don’t like with
and it doesn’t work in “strict mode”… I use it here on Snippet Zone for fun speed-coding stuff…
Flower of Life Canvas
copy ( ( d = document, b = d.body , rad = ( innerWidth * 1.9 ) / 6 , theta = 0 , thetaSpeed = 0.03 , cx = innerWidth / 4 , cy = innerHeight / 4 , ox = 0 , oy = 0 , offTheta, x, y, ang, step, blur, _ ) => { Object .assign ( b.style , { background: 'black' , margin: 0 } ) blur = Object .assign ( d.createElement `canvas`, { width: innerWidth * 2 , height: innerHeight * 2 } ) .getContext `2d` with ( Math ) { with ( b.appendChild ( Object .assign ( d.createElement `canvas`, { width: innerWidth * 2 , height: innerHeight * 2 } ) ) .getContext `2d`) { Object .assign ( canvas.style , { width: '100%' , height: '100%' } ) onresize = ( ) => { blur.canvas .width = canvas.width = innerWidth * 2 blur.canvas .height = canvas.height = innerHeight * 2 rad = ( innerWidth * 2.5 ) / 6 cx = innerWidth cy = innerHeight fillStyle = '#000' fillRect( 0 , 0 , canvas.width , canvas.height ) } onresize( ) step = ( PI * 2 ) / 6 _ = t => { ang = ~~( t / 500 ) % 7 globalAlpha = 0.23 fillStyle = '#fff' if ( ang > 0 ) { offTheta = step * ang ox = rad * cos( offTheta) oy = rad * sin( offTheta) } else { ox = 0 oy = 0 } for ( i = 0 ; i < 20 ; i++ ) { x = ox + cx + rad * cos( theta) y = oy + cy + rad * sin( theta) theta += thetaSpeed fillRect( x, y, 4 , 4 ) } blur.drawImage ( canvas, 0 , 0 ) globalAlpha = 0.05 drawImage( blur.canvas , 0 , 2 ) requestAnimationFrame( _) } _( ) } } } ) ( )
Try it out…
Speed coded animated flower of life on canvas
SVG getScreenCTM
copy const el = document.body .appendChild ( document.createElement `div` ) ; el.innerHTML = ` < svg width= "200" height= "200" viewBox= "0 0 200 200" > < rect class= "rect" transform= "translate(50, 50) scale(1.2) rotate(25)" fill= "purple" x= "0" y= "0" width= "50" height= "50" /> </ svg> `; const box = document.body .appendChild ( document.createElement `div` ) ; Object .assign ( box.style , { position: 'absolute' , left: 0 , top: 0 , width: '50px' , height: '50px' , transformOrigin: '0 0' , outline: '5px solid red' } ) ; const rect = document.querySelector ( '.rect' ) ; const { a, b, c, d, e, f} = rect.getScreenCTM ( ) box.style .transform = ` matrix( ${ [ a, b, c, d, e, f] } ) `;
Try it out…
The transformation matrix of an SVG element can be obtained using getScreenCTM
or getCTM
. The latter of which will be relative to the SVG coordinate space, vs the coordinate space of the page.
Here we take the matrix data from getScreenCTM
and use it on a div to place a border over an SVG rect
node. This is great for layering HTML on top of SVG.
Wiggly Line on Canvas 2
copy const canvas = document.body .appendChild ( document.createElement ( 'canvas' ) ) ; const c = canvas.getContext ( '2d' ) ; document.body .style .margin = 0 ; function resize( ) { canvas.width = innerWidth * 2 ; canvas.height = innerHeight * 2 ; canvas.style .width = innerWidth + 'px' ; canvas.style .height = innerHeight + 'px' ; } addEventListener( 'resize' , resize) ; resize( ) ; const PAD = 50 ; const RAD = 2 ; const SPEED = 200 ; const TWO_PI = Math .PI * 2 ; let mode = 'draw' ; let t = Math .random ( ) * TWO_PI, x = canvas.width / 2 , y = canvas.height / 2 , vx = 0 , vy = 0 , ta = 0 ; let solid = false ; let dotMod = 3 ; function loop( ) { if ( Math .random ( ) < .01) solid = ! solid; if ( Math .random ( ) < .01) dotMod = [ 2 , 3 , 6 ] [ Math .floor ( Math .random ( ) * 3 ) ] for ( var i = 0 ; i < SPEED; i++ ) { t = Math .sin ( ta) * TWO_PI; vx = RAD * Math .cos ( t) ; vy = RAD * Math .sin ( t) ; ta += Math .random ( ) * 0.1 - 0.05 ; x += vx; y += vy; if ( Math .random ( ) < 0.005 ) { mode = 'no draw' ; } else if ( Math .random ( ) < 0.005 ) { mode = 'draw' ; } if ( mode === 'draw' && ( solid || i % dotMod === 0 ) ) { c.fillStyle = 'black' ; c.fillRect ( x, y, 2 , 2 ) ; } if ( x < - PAD) { x = canvas.width + PAD; } else if ( x > canvas.width + PAD) { x = - PAD; } if ( y < - PAD) { y = canvas.height + PAD; } else if ( y > canvas.height + PAD) { y = - PAD; } } requestAnimationFrame( loop) ; } loop( ) ;
Try it out…
This is a variation on a post from awhile back. I was posting it over on dev.to and realized I wanted it to look a bit different.