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:

SOLID series: The Open-Closed Principle

Today, we’ll be exploring the Open-Closed Principle: from the criticisms around it, its best use cases, and common misapplication.

Oyinkansola Awosan
May 16, 2025 ⋅ 11 min read
Simplifying E2E Testing With Open Source AI Testing Tools

AI-powered e2e testing: Getting started with Shortest

Explore how AI-driven testing tools like Shortest, Testim, Mabl, and Functionize are changing how we do end-to-end testing.

Jude Miracle
May 16, 2025 ⋅ 11 min read
profit center vs. cost center: How company structure affects engineering

Profit center vs. cost center: How company structure affects engineering

Examine the difference between profit vs. cost center organizations, and the pros and cons these bring for the engineering team.

Marie Starck
May 15, 2025 ⋅ 4 min read
How to pass a TypeScript function as a parameter

How to pass a TypeScript function as a parameter

Explore how to pass functions and structured objects as parameters in TypeScript, including use cases, syntax, and practical scenarios.

Kealan Parr
May 15, 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