Logo in CSS
context
This article was published before 2022, therefore before the rise of generative AI. Some information may now be outdated. The period drawings and visuals shown here were created without the assistance of artificial intelligence.
I am currently working for Twenga, a price comparison site.
Like most companies, it has a strong visual identity, marked by a logo identifiable by a target, marked with an arrow.
For fun and because it was trendy, I got drawn into recreating the logo in pure CSS, with no image or JavaScript!
An exercise as tedious as it is fun and pointless, I tackled it, curious to see whether I would run into any unexpected difficulty or discovery!
The main blue outer circle.On top of the blue circle, the first inner circle, white.The small blue circle at the center of the target.The nearly transparent white circle that creates the reflective effect for the whole target.The tip of the white arrow that stands out.White mask.The tip of the brown arrow.Left white part of the arrow, which goes over the outer circle.Left brown part of the arrow, which goes over the circle.Brown right / upper part of the arrow.Mask for the bottom of the previous part, with the same background as the blue circle.Mask of the mask (!) which makes it possible to soften the blue of the mask below in the same way as span.circle4 does.