Today’s Finished Result
SVG + CSS
objective: create a ‘map’ to showcases all of the exhibitors I met with at the Educause Conference.
Refresh memory on SVG in CSS best practices
Paste svg code on web and work on any necessary edits
Hover states + animations
Design pop-up text
Implement additional information on web
TO KEEP THINGS INTERESTING, I WILL NOT BE POSTING MY ENTIRE PROGRESS, - but I will need to test out how I can implement code into squarespace, which may be tricky, so I’ll keep all of the tests on this page.
click shapes to activate the svg tests
Ok, I refreshed my memory on animating and placing SVG shapes – I was also able to place all of the code into squarespace (using inline scripts and css, not the most organized but it works!) – now onto the map
I’m starting out with 3 boxes to make sure I have the rest under control – it’s working ok , need to figure out what those borders are behind the text. I figured out that I need to convert the text to outlines, because the text box is what is showing up in the background. MORE SHAPES :(
<p> WTVR, now on to the actual map. I'll fix size l8r. </p>
Getting somewhere – here’s the initial map layout SCROLL OVER THE BOXES (ON COMPUTER ) TO SEE THEM GLOW :D
Finished result on the top of the blog for excitement purposes.