Tag Archive: SVG
Before I ventured on this mini project, I had no previous experience with animating SVG graphics. This article documents my journey and details my processes (and mistakes made along the way). The final product I created consists of a slideshow whereby four devices – desktop, laptop, tablet, and smartphone (basically iMac, MacBook Pro, iPad, and iPhone-esque form factors) – morph into one another, in order to showcase how the responsive websites I’ve created react to the various screen sizes. The finished article, showing each of the four morphing devices. I love Mary Lou’s work over at tympanus.net and was really …
When composing this post, I decided that each of the accompanying icons would work well against coloured discs, gradually rotating in hue as they progressed down the page. The result was something a bit like this: I opted for 12 different colours, so each icon’s hue would change by 30 (hue being measured on a scale of 0-360 degrees). After some thought, I decided to create the discs programmatically using CSS. This has the following benefits over including them as part of the icon image: If I ever decide to add, remove, or edit page content, I wouldn’t need to …
Please note: This post relates to an ealier website build, in a time when I thought that this kind of behaviour was perfectly acceptable. Please forgive me. Forever on the lookout for ways to speed up the loading time of my website, I realised that the graphics for each of my music production, web development and online promotion pages were causing considerable overhead. This surprised me at first, as I’d taken the time to create SVGZ (zipped SVG) files (with a neat fall back to PNG for those less well-endowed browsers), but all-in, the six images on my ‘Web Development’ …
One of the main considerations when developing the new Freakyleaf website was how to future-proof the site’s graphical elements. For the vast majority of sprites and graphics, it was a real no-brainer to choose SGV (Scalable Vector Graphics) over traditional file formats (such as JPG, GIF and PNG), to deliver resolution-independent visuals (with a suitable fall-back in place for those not-so-well-endowed web browsers, of course). So with this mind set I went about creating the various graphics for my website, including the main logo (the one top left of this very page). This was created in Adobe Illustrator and saved …