Constructing an Interactive Weblog Map
I like an excellent diagram. So some time again I made a “weblog map” for my web site homepage that regarded a bit like this:
It was all the time a bit irritating as a static picture although as a result of it’s not clickable.. However then in the future I spotted which you could truly construct clickable diagrams utilizing the magic of Figma, SVGs and CSS!
So, checkout my new clickable interactive homepage.
The excellent news is that making these is tremendous easy and simple! I’ll stroll by way of how to try this in a sec, however first some inspiration.
Weirdo Bloggy Mappy Diagrammy Issues
I’m a sucker for this type of factor. Right here’s a couple of examples that I used to be impressed by alongside the best way:
Matt Webb wrote an important piece on his “weblog map”: writeup / map
Hypha.coop have an important digital backyard with a beautiful linked map:
Lynne Carty has as magical shifting, animated diagram/map thingy!
Visa has his Memex diagram of a form of grand grasp plan (presently a PDF however hey Visa in case you’re studying this let’s make a webpage model collectively!)
Weiwei Xu has a magical visible essay format:
One in all my favourite authors Samantha Hunt has a clickable…. insides? On her web site.
I like all of those examples – and there’s a ton of the way of making an attempt to make them… I wish to present you my method as a result of it’s tremendous straightforward and permits for some actually artistic designs utilizing the facility of Figma.
Easy methods to Make One utilizing Figma + SVGs + CSS
Making an SVG with clickable hyperlinks could be very straightforward. In abstract:
- Make a cool form / visible / diagram in Figma
- Add hyperlink to the shapes or textual content in Figma
- Export the SVG
- Embed in your webpage
- Model with CSS
That’s it!
A few gotchas:
1) If you’d like the textual content to export as textual content, not as a picture within the form of textual content then you must uncheck “define textual content” when exporting the SVG from Figma.
2) For the hyperlinks within the SVG to be clickable you must put the SVG inline in your webpage, not linked as a file. I believe browsers do that for safety causes.
What about cellular?!
Ugh. Placing our grubby little fingers throughout our grubby little screens. Sure, effectively I’m positive there’s a “actual” method to do that however I simply use breakpoints to swap out the SVG for a mobile-sized one… Sure it’s a little bit of a hack however it appears to work okay? If anybody has a greater concept please let me know!
Traversing the Weblog Maps
Hey, right here’s a wacky concept. What if a bunch of us made these sorts of weblog maps after which someway wired them up collectively in order that you might form of stroll throughout the map?
You understand, auto-generating an SVG file from a database (ahem, a spreadsheet) wouldn’t be that onerous… Possibly there’s a strategy to autogenerate some form of map/net/diagram that spans a couple of websites directly?
And, for the motivated reader – upon getting every part as an SVG you possibly can fashion it with CSS and make it interactive with JS to your coronary heart’s content material – so that you if you wish to present/cover or add interactions or motion to your SVG it’s as straightforward as including a couple of strains of javascript…!
Let’s make bizarre stuff collectively. Should you make one thing enjoyable – hit me up @tomcritchlow, I’d like to see it!