Surf the Dream A discourse of links and articles from Justin Avery

Symbolic Change – Love Vs Hate

This was an CSS experiment after reading the Five Simple Steps book, Designing the invisible. The book was talking about the different meanings that symbols can take on in different cultures.

Over the past 3000 years the Swastika has gone from a spiritual symbol meaning love, change and wisdom and has been turned into one of the most recognised symbols of all time…. and for all the wrong reasons.

The images themselves are done completely with CSS and contains no images. The flag is just a large box with a red background, the white circle is using the border radius set to half the width of the container. The evil Swastika is done using the same methods, but adding a Transform to get the angles right. Stupidly I added the rotation transform to every one of the pieces instead of creating the symbol and applying the transition to the containing DIV. If I had of created the hindu swastika first then I would have realised this…. but I didn’t…. so I didn’t

Update: I did add an image in the because I wanted an ampersand in between the two items. I’m not sure if you can reverse the colours in the text just yet, so there’s the image.

Update 2: I took the ampersand image out and ended up doing it with CSS & HTML to keep in the theme. There’s one ampersand set to white in the red flag with the box set to overflow:hidden, and the red ampersand sits in the white flag. The overlapping occurs thanks to a bit of z-index magic.

See the Pen Love Vs Hate by Justin Avery (@justincavery) on CodePen.

View Permanent Page

More articles...

  1. Using different permalink structures for custom post types

    I’m in the process of shifting from Responsive Design site from the current CMS, Squiz Matrix, over on to WordPress. There are a number of reasons for the move which I might put into a post at some point, but I’ve been enjoying the freedom to create Custom Post Types for the different types of […]

    Read more

  2. Time tracking with Toggl

    The pie chart for this XKCD Comic is me all over, and I often feel as though I’m turning into the procrastination monkey Time tracking is one of those things that I just hate doing for a few different reasons. I spend more time trying to remember how I spent my time then doing something […]

    Read more

  3. Progressive Invision – Offline use

    On the way home yesterday afternoon I was going through a couple of designs that had been uploaded onto Invision with the Account Manager on the project. “On the way home” entails a 40 minute train ride for which I fortunately have access to WIFI although it is pretty patchy from time to time. I […]

    Read more

  4. SpaceX Notebooks — Phobos & Deimos

    As you may be aware I started a small Notebook business recently, Back Pocket Notebooks, with a set of responsive design notebooks for my responsively designed audience. This week I received the next batch of notebooks which I have added to the stock list — a set of SpaceX Mars Posters. Over the next couple […]

    Read more

  5. Google Search Console Updates – Content Keywords & Site Grouping

    If you manage a website the chances are that you’ve heard of and use the Google Search Console, the artist formally known as Webmaster Tools. If you’re sitting there scratching your head and wondering what I’m talking about then go and check out this article from Moz and get yourself started. The console is always […]

    Read more

  6. Getting back to podcasting

    You should be very aware that I love a great weekly newsletter. One of my recent favourite newsletters to receive is Paul Jarvis’ Sunday Dispatches where Paul imparts a very useful piece of nerdy knowledge each week. The content is around 95% educational and allows you to learn a lot about the web and how […]

    Read more

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.