Quick SVG
copy const el = document.body .appendChild ( document.createElement ( 'div' ) ) ; el.innerHTML = `< svg style= 'overlow:visible' > < circle cx= "100" cy= "20" r= "20" fill= "red" /> < rect x= "100" y= "60" width= "20" height= "20" fill= "blue" /> </ svg> `;
Try it out…
Defining SVG like this in a template string is a fast and powerful way to start doing SVG that is controlled or generated by JavaScript. Here is another example:
copy const scribble = document.body .appendChild ( document.createElement ( 'div' ) ) ; const d = ( iter = 30 ) => { // make sure the iter is odd if ( iter % 2 == 0 ) iter += 1 ; // random cubic beziér let path = 'M ' ; for ( let i = 0 ; i < iter; i++ ) { const cmd = i == 1 ? 'C ' : ' ' path += cmd + Math .random ( ) * 200 + ' ' + Math .random ( ) * 200 ; } return path + 'z' ; } scribble.innerHTML = `< svg style= 'overlow:visible' viewBox= "0 0 200 200" > < path d= "${d()}" stroke= "#295896" stroke- width= "3" fill= "#ccc" fill- rule= "even-odd" vector- effect= "non-scaling-stroke" /> </ svg> < style> svg, div, body, html { overflow: visible; height: 100 %; width: 100 %; margin: 0 ; padding: 0 ; } </ style> `;
Try it out…
You’ll notice a somewhat hacky style tag as well… this is used to quickly fill the page with the SVG.
Convert an Image to dataUri
copy function toDataUri( img, scalar = 1 ) { const canvas = document.createElement ( 'canvas' ) ; canvas.width = img.width * scalar; canvas.height = img.height * scalar; canvas.getContext ( '2d' ) .drawImage ( img, 0 , 0 , canvas.width , canvas.height ) ; return canvas.toDataURL ( 'image/png' ) ; } const img = new Image( ) ; img.crossOrigin = 'Anonymous' ; img.addEventListener ( 'load' , ( ) => { const thumb = new Image( ) ; // use the data URI as the source thumb.src = toDataUri( img, .3) ; document.body .appendChild ( thumb) ; } ) ; img.src = 'https://zevanrosser.com/fotoda/slide-shot-9.jpg' ;
Try it out…
Load an image and convert it to a data URI.
Make a Debugging Dot
copy function dot( x, y, radius, color) { const el = document.createElement ( 'div' ) ; const size = `${ radius * 2 } px`; Object .assign ( el.style , { position: 'absolute' , left: `${ x} px`, top: `${ y} px`, width: size, height: size, transform: `translate( ${ - radius} px, ${ - radius} px) `, borderRadius: '50%' , background: color } ) ; el.classList .add ( 'dot' ) ; document.body .appendChild ( el) ; return el; } dot( 100 , 100 , 10 , 'red' ) ; dot( 200 , 100 , 5 , 'blue' ) ; for ( let i = 0 ; i < 20 ; i++ ) { dot( 20 + i * 12 , 200 , 5 , `hsl( ${ i * 10 } deg, 60 %, 50 % ) `) }
Try it out…
Draw a dot – good for visualizing things when doing animation and positioning logic.
Draw a Spiral with Resize
copy const canvas = document.body .appendChild ( document.createElement ( 'canvas' ) ) ; const c = canvas.getContext ( '2d' ) ; function resize( ) { canvas.width = window.innerWidth ; canvas.height = window.innerHeight ; draw( ) ; } function draw( ) { c.clearRect ( 0 , 0 , canvas.width , canvas.height ) ; c.fillStyle = 'blue' ; const iter = 300 , halfWidth = window.innerWidth / 2 , halfHeight = window.innerHeight / 2 ; let rad = 0 , theta = 0 , x, y; for ( let i = 0 ; i < iter; i++ ) { x = halfWidth + rad * Math .cos ( theta) ; y = halfHeight + rad * Math .sin ( theta) ; c.fillRect ( x, y, 5 , 5 ) ; rad += Math .min ( window.innerWidth , window.innerHeight ) * 0.0015 ; theta += .1; } } resize( ) ; window.addEventListener ( 'resize' , resize) ;
Try it out…
Expanding on yesterdays post, this draws a resizable sprial on a canvas.