Having fun with CSS, SVG, animations, themes#

This page presents small details I had fun creating for several projects. Most of them use handcrafted CSS, SVG and animations.

Bas Gros Poing#

The website Bas Gros Poing is dedicated to fighting games. It takes visual inspirations (colors, shapes, attitude) from arcade cabinets and arcade games. Arcade games were competing to attract players using flashy details like text scrolling, blinking elements, which I used for hovers on the website.

On articles and podcasts cards, a mouse hover triggers a text scroll like the ones present in Street Fighter Alpha 3.

Another type of card for articles and podcasts is a small reference to character select screens. In this case, the one from The King of Fighters XI.

Thomasorus#

My own website is my playground for experimentations.

Colors and Themes#

It contains five main sections, each one with its own set of colors, and the whole website has three themes: colors, light, dark. All colors are shifted between themes by using CSS custom properties.

On the home page, where the visitor hasn't yet choose a section, the theme picker discreetly changes between the colors.

Animations#

I wanted each section of the site to have its own "logo". Those were commissionned to the artist Saskia Freeke and exported as SVG. I animated them by hand using CSS keyframes.

Project IG1#

At Iguane Solution I worked on an experimental project that help visualize cloud infrastructures by using an isometric grid like presentation.

In an initial prototype, deployment turned every SVG icon into a small animated box I created in Affinity and animated by hand using CSS.

A sleeker design figcaption — The final design commissioned to an agency by the CEO, with the goal to convince investors to fund the project by presenting a more finished look/direction. | Full size

I implemented this new design and reduced the animations to more subtle affordances, the kind your barely notice but give a nice feeling to the user actions.

A demonstration of the infrastructure editing screen, with subtle animations on the click and drag & drop.

Deploy in progress animations

The designer only delivered a desktop design. I created the responsive version.