Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
*, *:before, *:after { box-sizing: border-box; } body { background: #66b2ff; } .yin-yang { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100px; height: 100px; margin: auto; border-radius: 100%; background: linear-gradient(90deg, #3399ff 50%, white 50%); animation: spin 1s linear infinite; } .yin-yang:before, .yin-yang:after { content: ''; position: absolute; left: 0; right: 0; width: 50px; height: 50px; margin: auto; border-radius: 100%; border-width: 16.66667px; border-style: solid; } .yin-yang:before { top: 0; border-color: #3399ff; background: white; } .yin-yang:after { bottom: 0; border-color: white; background: #3399ff; } @keyframes spin { 100% { transform: rotate(360deg); } }
HTML
<div class='yin-yang'></div>
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email
