2019-12-27
821
#css
Maks Akymenko
11630
Dec 27, 2019 ⋅ 2 min read

How to create a yin-yang symbol with pure CSS

Maks Akymenko I am a frontend developer 👨🏻‍💻 based in Krakow, Poland.

Recent posts:

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 ⋅ 9 min read
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 ⋅ 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 10, 2025 ⋅ 11 min read
improving ux with scroll-select box

How to improve UX with a scroll-select box

The scroll-select box is a great tool for frontend developers to improve the user experience of their applications. Learn how to build a scrollable date picker that mimics the iOS style, but with the exemption of the <select> element.

Emmanuel Odioko
Feb 7, 2025 ⋅ 10 min read
View all posts

2 Replies to "How to create a yin-yang symbol with pure CSS"

  1. You already have `infinite` in your `animation`, you don’t need more than `360deg` (or even better `1 turn`) You probably want to use ‘linear’ timing function though. I’d also recommend to stick to shorthand properties order as recommended in spec

Leave a Reply