Changing SVG path data with CSS

Another great thing I learnt at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS.

As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long at the paths match up (e.g. same type, same amount of points, etc.) you can even sprinkle a transition property on top to get a smooth transition:

<svg viewBox="0 0 10 10">
  <path d="M5,2 Q 2,5 5,8" />
</svg>
svg path {
  transition: d 0.35s;
}

svg:hover path {
  d: path("M5,2 Q 8,5 5,8");
}

Here’s a working demo:

To animate more complex paths CSS won’t do unfortunately. For those you’ll need something like Greensock’s MorphSVG or the aformentioned flubber.

☝️ Looking for more demos and/or an in-depth look into path data? CSS Tricks has got you covered: The SVG `path` Syntax: An Illustrated Guide

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Path uploads your entire iPhone address book to its servers

It all started innocently enough. I was thinking of implementing a Path Mac OS X app as part of our regularly scheduled hackathon. Using the awesome mitmproxy tool, I started to observe the various API calls made to Path’s servers from the iPhone app. It all seemed harmless enough until I observed a POST request to https://api.path.com/3/contacts/add.

Path uploads your entire iPhone address book to its servers →

Better Instagram-Facebook Integration

A thing I’ve been missing in Instagram — ever since I noticed that Path did it right — is that Instagram photos shared on Facebook were only an entry/story on your wall/timeline; The actual photo remained on Instagram and wasn’t actually uploaded to Facebook (*).

Behold, today:

Starting today, when you choose to share Instagram photos to Facebook, your images will automatically be added to an “Instagram Photos” Facebook album visible to your Facebook friends!

The photos will appear full-sized in the News Feed along with the caption that you’ve added to the Instagram photo, and a link to the image’s public URL. This change will also display your Instagram photos beautifully in your timeline.

Share Bigger Photos to Your Facebook Album →

(*) Yes, I know that could be achieved by using ifttt

On Gowalla, Facebook, Instagram, Path, and Storytelling

I was meaning to write a blogpost on Gowalla 4. About how I used it less than before. But also about that when I use it (which I still do from time to time), I use it in a more engaged way.

In the blogpost on Path 2, I was going to state that “Path 2 is what Gowalla 4 and the new Facebook app should have been”, yet left that out because I wanted to save that for the Gowalla 4 post.

Now that Gowalla has apparently has been bought by Facebook, and after Inferis coined a likewise phrase on Twitter, I think it’s time to dig up that statement again and go a tad more in depth.

Gowalla 4

A much disputed move that Gowalla made in their fourth version was the removal of the items, even though a few months before that changes to the items were made to actually promote them.


One of my Gowalla items I was most proud of: received in Madeira at the top of the island after a five hour hike.

To me, the item hunting was the feature that made Gowalla unique (you’d get no standard points or badges, but nice items) and — above all — fun: Gowalla was a game.

Next to letting people know where you were, the items in Gowalla were the real incentive to checking in:

As some have written before, the possibilities with items were endless, and could’ve have helped further shaping Gowalla.

Now, Gowalla 4 wasn’t all bad. One core feature defining Gowalla 4, next to the city guides for example, was the introduction of stories. With the stories one, instead of saying “I am here”, is now saying “I am here with my friends X, Y and Z” making it all more social (one could even tag friends from other platforms, such as Facebook).


A typical Gowalla Story: Me and some friends out eating.

Each story one made can be compared to a journal entry, and that’s how I ended up using Gowalla 4: only if there was a worthy event I’d check in, add my (Facebook) friends, post some photos and add some comments. After an event was done, the story would serve as a memory one can share, whereas a check-in before would only serve as an entry in a check-in log.

Some memories/stories I now look back at are the surprise party we had when my brother turned 30, a beerfilled party I attended, taking my son to a meet and greet with a childrens’ character, etc.

Technically related: A technical point worth noting regarding the Gowalla 4 release was the API breakage. Some stuff just stopped working, without prior notice. And it wasn’t the first time this happened. My advice to anyone upgrading their API: please notify your developers before making the changes (*), or — even better — version your API to prevent stuff from breaking at all. Will spare you some sad/furious developers.

(*) When the new check-in API was released, Gowalla did notify developers. With version 4 that unfortunately was not the case.

~

Facebook’s Timeline

Facebook is currently rolling out a new feature called timeline. People who have a developer account most likely have already enabled it.

The Timeline not only represents your profile/wall in a timeline, it also allows you to back-log some important events you’ve encountered in your life.


Next to status updates and photos one can now also add a new “Life Event”

Just as Gowalla has shifted towards storytelling with their Stories, Facebook will be also be shifting towards this, and a rather big story too: the story of your life. When were you born? When did you get your driver’s license? When did you buy a house? It soon will all be on Facebook (if you choose to do so).


Facebook’s updated mobile app, also works on iPad

It should also be noted that Facebook has recently released an update to its mobile app. Although it’s technically a very interesting app, the Timeline feature is nowhere to be found in it.

~

Instagram

In September, the second incarnation of Instagram landed upon us. In a year time this app went from zero to hero. Mainly the fact that it is really easy to post photos quickly, even with some nice filters applied made this app fun to use and thus an instant success (Maslow at work fellas: Functional > Reliable > Usable > Pleasurable).


Instagram (version 1) quick demo

In version 2 no crazy new features were introduced to: next to sporting a higher resolution and some new filters that was about it. And even although some filters in Instagram 2 where kinda FUBAR, Instagram took the hit standing as people already were in love with the app.

~

Path 2

As mentioned before, Path 2 has hit the jackpot with its new version and has become quite the storyteller: from telling where you are (cfr. Gowalla, Foursquare), what you are doing (cfr. Twitter), who you are with (cfr. several others), to what you are listening to (cfr. Last.fm, GetGlue), posting photos with filters (cfr. Instagram), and posting videos. A pity Path doesn’t support movies/tv series though (cfr. GetGlue), or it’d be a true digital polyglot.

~

Piecing the pieces of the puzzle together

Having used Path 2 the past few days it’s become clear that this app is about as close as it can get to being a Swiss Army Knife and might ultimately replace several apps you’re already using. For example when Instagram came around it replaced Camera+TiltShiftGen+CameraBag+Flickr/Twitter/Gowalla (part of ˜) in one go for posting a filtered photo at a given location.

Comparing Path 2 with the other mentioned apps (Gowalla, Facebook, Instagram) it’s also become clear that the other apps have some catching up to do, in order to remain fresh.

  • The UI of Path 2 just stands out. The rest has fallen victim of an overused mobile pattern.
  • Although Path 2 still has some work to do fine-tuning the home page (with the time of all your friends’ activity), it’s a feature that should’ve been in the Facebook App update.
  • Although the filters in Path 2 are not as good as Instagram’s, Path can become a worthy contestant.
  • If Path does some tweaking allowing several photos to be grouped in one story, it can easily push Gowalla out of the niche it has located itself into.

~

Storytelling

I’m pretty sure it’s become clear by now that apps/services will always have to push forward (*) in order to remain fresh, around each corner a contender can pop up and hit one hard. An aspect I see returning in most of the apps is storytelling. Without storytelling, I’m quite sure, no app will survive in the long run.

Is Path then such a treat to others? No. But it has potential; The ideas are there. It plays the storytelling card, which is directly linked to emotion, rather well. With some tweaking, I’m pretty sure it can outwin some apps. I hope the other apps find energy in this and re-invent themselves; again, if necessary.

(*) Beware, change isn’t always good though: Don’t kill features people really love, even if it’s only a small portion of your user base who might just be your platform advocates (cfr. Gowalla); and don’t make big changes too swift (cfr. Facebook’s layout changes).

Path 2

When Path was first released a little more than a year ago I installed it, yet didn’t make use of it that much: it allowed you to post a photo, tag it with a location and tag it with some of the contacts you were with. The app was “just another app in the line of apps that do about the same”

About two days ago, a new version of Path was released. And boy must I say, this app has changed in such a way that it now stands out in the line-up of similar apps.

The basic idea still is the same, yet it has been broadened: Path has now become a personal diary (née “Smart Journal”), allowing one to post stuff beyond a photo/location.

  • Next to posting photos one can also post videos, something I am missing in lots of apps.
  • When posting a photo, one can apply a filter to it (cfr. Instagram). The filters, however, aren’t that “wow” though.
  • Above that one can now also tag music one’s listening to, check-in to a place, post a thought, etc.

Above that the implementation is A+ and the UI is slick. Very slick. In Path, all events are represented via a timeline (cfr. Facebook’s Timeline).

  • The timeline is elegant, and fun to manipulate.
  • The little clock sliding along the timeline for example is a detail that finishes the implementation.
  • The way the main menu is implemented is refreshing and smooth: no dull bar at the bottom, but a circular menu that is animated just perfectly.

To me, personally, this app has hit the jackpot because it has shifted towards storytelling (cfr. Gowalla4, Delicious, Facebook). The neat implementation makes this app even more desirable.

Path: The smart journal that helps you share life with the ones you love. →
Path revamps with ‘Path 2′: A diary for the social, mobile world. →
New Path 2.0 automatically chronicles, shares your life →