Ghost Character
1K Views
44 Downloads - 7 API calls
44 Lines - 971 Bytes
Apr 23, 2020 design
1 .gg-ghost-character { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 18px ;
8 border: 2px solid;
9 border-bottom: 0 ;
10 border-top-left-radius: 22px ;
11 border-top-right-radius: 22px ;
12 overflow: hidden;
13 background:
14 radial-gradient(
15 circle,currentColor 60% ,
16 transparent 40% )
17 no-repeat 2px 4px /2px 2px ,
18 radial-gradient(
19 circle,currentColor 60% ,
20 transparent 40% )
21 no-repeat 6px 4px /2px 2px 22 } 23 24 .gg-ghost-character::after ,
25 .gg-ghost-character::before { 26 content: "";
27 display: block;
28 box-sizing: border-box;
29 position: absolute;
30 width: 6px ;
31 height: 6px ;
32 border-top: 2px solid;
33 border-right: 2px solid;
34 bottom: -3px ;
35 transform: rotate(-45deg )
36 } 37 38 .gg-ghost-character::before { 39 left: -1px 40 } 41 42 .gg-ghost-character::after { 43 right: -1px 44 }
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="M10.9759 9 C10.9759 9.55228 10.5282 10 9.97589 10 C9.42361 10 8.97589 9.55228 8.97589 9 C8.97589 8.44771 9.42361 8 9.97589 8 C10.5282 8 10.9759 8.44771 10.9759 9 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M13.9712 10 C14.5235 10 14.9712 9.55228 14.9712 9 C14.9712 8.44771 14.5235 8 13.9712 8 C13.4189 8 12.9712 8.44771 12.9712 9 C12.9712 9.55228 13.4189 10 13.9712 10 Z" 14 fill="currentColor" 15 /> 16 <path 17 fill-rule="evenodd" 18 clip-rule="evenodd" 19 d="M19 20.9999 V10 C19 6.13401 15.866 3 12 3 C8.13401 3 5 6.13401 5 10 V21 L7.82846 21 L9.24264 19.5858 L10.6569 21 L13.3433 21 L14.7574 19.5858 L16.1717 21 L19 20.9999 ZM17 10 C17 7.23858 14.7614 5 12 5 C9.23858 5 7 7.23858 7 10 V19 L9.24264 16.7573 L12 19.5147 L14.7574 16.7573 L17 18.9999 V10 Z" 20 fill="currentColor" 21 /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGhostCharacter = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 18px ;12 border: 2px solid;13 border-bottom: 0 ;14 border-top-left-radius: 22px ;15 border-top-right-radius: 22px ;16 overflow: hidden;17 background: radial-gradient(circle, currentColor 60% , transparent 40% ) no-repeat 2px 4px /2px 2px ,18 radial-gradient(circle, currentColor 60% , transparent 40% ) no-repeat 6px 4px /2px 2px ; 19 } 20 &::after , 21 &::before { 22 content: '';23 display: block;24 box-sizing: border-box;25 position: absolute;26 width: 6px ;27 height: 6px ;28 border-top: 2px solid;29 border-right: 2px solid;30 bottom: -3px ;31 transform: rotate(-45deg );32 } 33 &::before { 34 left: -1px ;35 } 36 &::after { 37 right: -1px ;38 } 39 ` 40 41 export const GhostCharacter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledGhostCharacter { ...props} ref={ ref} icon-role="ghost-character" /> 46 </> 47 ) 48 } , 49 ) 50
Ghost Character turned into an amazing pure CSS icon made by applying attributes such as: transform, width, height, border, border-bottom, overflow, background, border-top, border-right, .gg-ghost-character, Fun to know, it has: 44 Lines of code at 971b & 706b after compiling. Truly marvelous 💎 .