Yinyang signs interface
1 .gg-yinyang { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: rotate(95deg ) scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 20px ;
8 border: 2px solid;
9 border-radius: 22px 10 } 11 12 .gg-yinyang::after ,
13 .gg-yinyang::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 8px ;
19 height: 8px ;
20 border-radius: 10px ;
21 top: 4px 22 } 23 24 .gg-yinyang::before { 25 border: 2px solid;
26 left: 0 27 } 28 29 .gg-yinyang::after { 30 border: 2px solid transparent;
31 right: 0 ;
32 box-shadow:
33 inset 0 0 0 4px ,
34 0 -3px 0 1px ,
35 -2px -4px 0 1px ,
36 -8px -5px 0 -1px ,
37 -11px -3px 0 -2px ,
38 -12px -1px 0 -3px ,
39 -6px -6px 0 -1px 40 }
1 <svg 2 width="24 " 3 height="24 " 4 viewBox="0 0 24 24 " 5 fill="none" 6 xmlns="http://www.w3 .org/2000 /svg" 7 > 8 <path 9 d="M14 16 C14 17.1046 13.1046 18 12 18 C10.8954 18 10 17.1046 10 16 C10 14.8954 10.8954 14 12 14 C13.1046 14 14 14.8954 14 16 Z" 10 fill="currentColor" 11 /> 12 <path 13 fill-rule="evenodd" 14 clip-rule="evenodd" 15 d="M22 12 C22 17.5228 17.5228 22 12 22 C6.47715 22 2 17.5228 2 12 C2 6.47715 6.47715 2 12 2 C17.5228 2 22 6.47715 22 12 ZM12 12 C9.79086 12 8 10.2091 8 8 C8 5.79086 9.79086 4 12 4 C7.58172 4 4 7.58172 4 12 C4 16.4183 7.58172 20 12 20 C14.2091 20 16 18.2091 16 16 C16 13.7909 14.2091 12 12 12 ZM14 8 C14 9.10457 13.1046 10 12 10 C10.8954 10 10 9.10457 10 8 C10 6.89543 10.8954 6 12 6 C13.1046 6 14 6.89543 14 8 Z" 16 fill="currentColor" 17 /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledYinyang = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: rotate(95deg ) scale(var(--ggs, 1 ));10 width: 20px ;11 height: 20px ;12 border: 2px solid;13 border-radius: 22px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 8px ;22 height: 8px ;23 border-radius: 10px ;24 top: 4px ;25 } 26 &::before { 27 border: 2px solid;28 left: 0 ;29 } 30 &::after { 31 border: 2px solid transparent;32 right: 0 ;33 box-shadow: inset 0 0 0 4px , 0 -3px 0 1px , -2px -4px 0 1px , -8px -5px 0 -1px , -11px -3px 0 -2px ,34 -12px -1px 0 -3px , -6px -6px 0 -1px ; 35 } 36 ` 37 38 export const Yinyang = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledYinyang { ...props} ref={ ref} icon-role="yinyang" /> 43 </> 44 ) 45 } , 46 ) 47
Yinyang ended up an amazing CSS icon built by using features as follows: transform, width, height, border, border-radius, box-shadow,
