Animating SVG using CSS

I wanted to animate a vector graphic (SVG) image by making some elements appearing gradually one after the other.

My first first step was to clean up the markup and give meaningful CSS classes to my SVG elements. For example:

<style type="text/css">
  .arrow .line{fill:none;stroke:#8B999E;stroke-width:3;stroke-miterlimit:10;}
  .arrow .head{fill:#8B999E;}
<g class="arrow">
  <path class="line" d="M160,41.4c9.2-4.9,21-7.2,29.8-8.2"/>
  <polygon class="head" points="187.2,37.9 203.1,32.3 186.5,29.2"/>
  <path class="line" d="M95,90.2c10-18.5,22.7-26.7,22.7-26.7"/>

My second step was to use CSS animations to gradually make elements appear (go from opacity 0 to 100). To do that, I defined the animation @keyframes. Then I referenced the animation in the CSS class. To make multiple animations in sequence, I simply used the animation-delay attribute, with a computed value using calc() and a CSS variable for the time delay:

    @keyframes appear {
      0% {
        opacity: 0;
      100% {
        opacity: 100;

    animation-name: appear;
    animation-duration: 60s;
    animation-fill-mode: backwards;
    --spacing: 0.6s;
  .arrow:nth-of-type(2) {
    animation-delay: calc( 1*var(--spacing) );
  .arrow:nth-of-type(3) {
    animation-delay: calc( 2*var(--spacing) );
  .arrow:nth-of-type(4) {
    animation-delay: calc( 3*var(--spacing) );
  .arrow:nth-of-type(5) {
    animation-delay: calc( 4*var(--spacing) );

Here is a recording of the final result. Find the full SVG markup on GitHub.

The final animation, rendered as a gif

Setting up Stackdriver Error Reporting on Play Framework 1.4

Here is how I setup Stackdriver Error Reporting for my application running Play Framework 1.4:

My goal was to capture any Java exception in my production application and report it to Stackdriver Error Reporting for automatic exception monitoring and alerting.

I use the very simple Stackdriver Error Reporting report API: just send error stack traces using an HTTP POST request and an API key.

After creating a project and getting an API key in the Google Cloud Console, I instrumented my Play Framework application to catch all exceptions, format them in the expected structure and POST them to Stackdriver.  (make sure you are using at least JDK v1.7)

Here is the code I added to my main application controller:

A short amount of time after deploying this code, I started receiving alerts that new errors were occurring in my production application:

Screenshot of Stackdriver Error Reporting: 2 different errors occurred in my Play Framework app in the last 6 hours. The first one happened 42 times.

I was not aware of these application errors, now I have better visibility into their impact and will be able to prioritize what to fix.

My website (Cadeaux entre nous, to organize Secret Santas), has been running on Heroku for years and has huge usage spikes around christmas. This will help me make it more stable.

Disclaimer: I am a Product Manager at Google, working on Stackdriver

Using MailJet as mail server for “Cadeaux entre nous”

My old website “Cadeaux entre nous” is seeing a large traffic during the christmass season:

  • around 2000 events were created during the last 2 months
  • between 500 and 1000 people visit the site each day.

This naturally lead to a mailing issue: I was previously using gmail to automatically send emails, I guess I reached the limit since it constantly required me to change the password.

I recently heard about MailJet, a French company that raised quite a lot of money last week. I knew Sendgrid but was willing to try something fresh.

Mailjet has a nice UI, clear instructions and allows you to setup your SMTP server in a few clicks. The real-time dashboard with analytics is a real plus to see if everything goes well.

I quickly reached the free plans limit (which is 200 mails per day), but thanks to a few donations from my users, I could upgrade a Bronze plan and since then, all is runnign smoothly. I guess I will downgrade when the holiday season is over.

Annual update to “Cadeaux entre nous”

Two years ago I built a simple website to organize online what is called a “Secret Santa”: you enter a list of participants, and everyone has to offer a present to someone else. the draw is done online and the mails are sent by the server. Since then, the service has been used moderately : more than 1300 events have been created.

Last year, I added an organizer dashboard, to track who opened the mail. This was a important feature in order to make sure that everything goes well. This year, following tens of user complaints, I added a way to change the email of a participant and resend him the drawing email.

The organizer dashboard, with the new edit and resend email feature

Happy holidays

Bugfixes and new features

Cadeaux entre nous has been moderately used during the previous days. It’s nice to see people organizing their Christmas using our tool.

Unfortunately, we had some bad feedback from users who did not received invitation emails. This was because emails were sent right away after the event creation. Thus after the creation of an event with a lot of participants, the mail server wasn’t very happy.
I re-wrote yesterday the invitation system using a job list. I used the very simple Job feature of the Play! framework.

We also added a new feature : wishlists. Now users can express their wishes by entering what they would like to receive. The person who have to offer something to him receive a new mail giving him a hint about what to offer.

This feature has been asked by a couple of users. And that’s something we had in mind, indeed, it is a path top a potential monetization of the website.

Gifts between us

I’ve been building a new small website in a couple of evenings with the help of Xavier : ( for the French version).

Xavier needed it to organize a present distribution with his family for Christmas. The idea is simple: in a group of person (family, co-workers) everyone will have to give a present to another person. What makes this fun is that you don’t know from who you are getting yours.

The Gifts between us Home page

We first hacked a first version in a small amount of hours using the Play! framework. I could try the very easy to use Mailer function from the framework. So easy to use.

I did not found a very elegant method to define present targets. At first, users could only offer one present to the other, so I randomized the user list and then used a circular permutation to determine who offer to who. But then we decided that users could offer more than one gift. I couldn’t think rapidely of an algorithm that makes sure the gift repartition seams random, that everyone gets the same number of present and that I don’t offer one to myself. So I implemented a strategy that if it cannot find a solution once, try again.

The “Pick a paper” page

I also took the time to make the pick experience something nice and natural, in the end, you pick a paper the same way you would do it in real life. I used CSS3 transforms with transitions. What is great with this technology is that it degrades well on non-compliant browsers: on IE, the papers are displayed as a list, on Firefox3 the papers are nicely organize but don’t move when you click on them, on Chrome you have a very nice transition when you pick one.

If you tested it, you probably noticed that the papers seam to flip in 3D. They don’t. 3D transforms are not really available in current browsers. To simulate a flip of the paper, I use the scale 2D transform, going from -1 to 1 in both X and Y. The illustion is here.

A last comment concerning CSS transforms: manipulating the transformation values using jQuery is not very easy. I tried the transform plugin but this one wants to be compatible with all browsers (something I don’t necessarily want) and do not offer what I was looking for : an easy way to get and set transform values. I may extract my code into a plugin if I need it another time.

Then we polished the edges, tested it and we are proud to release it. Check it out and tell me what you think of it.