Ghost Character

2K Views 47 Downloads - 7 API calls 44 Lines - 971 Bytes Apr 23, 2020 design

 .gg-ghost-character {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 14px;
 height: 18px;
 border: 2px solid;
 border-bottom: 0;
 border-top-left-radius: 22px;
 border-top-right-radius: 22px;
 overflow: hidden;
 background:
 radial-gradient(
 circle,currentColor 60%,
 transparent 40%)
 no-repeat 2px 4px/2px 2px,
 radial-gradient(
 circle,currentColor 60%,
 transparent 40%)
 no-repeat 6px 4px/2px 2px
}

.gg-ghost-character::after,
.gg-ghost-character::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 6px;
 height: 6px;
 border-top: 2px solid;
 border-right: 2px solid;
 bottom: -3px;
 transform: rotate(-45deg)
}

.gg-ghost-character::before {
 left: -1px
}

.gg-ghost-character::after {
 right: -1px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.9759 9C10.9759 9.55228 10.5282 10 9.97589 10C9.42361 10 8.97589 9.55228 8.97589 9C8.97589 8.44771 9.42361 8 9.97589 8C10.5282 8 10.9759 8.44771 10.9759 9Z" fill="currentColor" /><path d="M13.9712 10C14.5235 10 14.9712 9.55228 14.9712 9C14.9712 8.44771 14.5235 8 13.9712 8C13.4189 8 12.9712 8.44771 12.9712 9C12.9712 9.55228 13.4189 10 13.9712 10Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M19 20.9999V10C19 6.13401 15.866 3 12 3C8.13401 3 5 6.13401 5 10V21L7.82846 21L9.24264 19.5858L10.6569 21L13.3433 21L14.7574 19.5858L16.1717 21L19 20.9999ZM17 10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V19L9.24264 16.7573L12 19.5147L14.7574 16.7573L17 18.9999V10Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGhostCharacter = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 14px; height: 18px; border: 2px solid; border-bottom: 0; border-top-left-radius: 22px; border-top-right-radius: 22px; overflow: hidden; background: radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 2px 4px/2px 2px, radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat 6px 4px/2px 2px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 6px; height: 6px; border-top: 2px solid; border-right: 2px solid; bottom: -3px; transform: rotate(-45deg); } &::before { left: -1px; } &::after { right: -1px; }`export const GhostCharacter = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGhostCharacter {...props} ref={ref} icon-role="ghost-character" /></> ) },)

CSSSVGTSX

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 9C10.9759 9.55228 10.5282 10 9.97589 10C9.42361 10 8.97589 9.55228 8.97589 9C8.97589 8.44771 9.42361 8 9.97589 8C10.5282 8 10.9759 8.44771 10.9759 9Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M13.9712 10C14.5235 10 14.9712 9.55228 14.9712 9C14.9712 8.44771 14.5235 8 13.9712 8C13.4189 8 12.9712 8.44771 12.9712 9C12.9712 9.55228 13.4189 10 13.9712 10Z"
14	fill="currentColor"
15	/>
16	<path
17	fill-rule="evenodd"
18	clip-rule="evenodd"
19	d="M19 20.9999V10C19 6.13401 15.866 3 12 3C8.13401 3 5 6.13401 5 10V21L7.82846 21L9.24264 19.5858L10.6569 21L13.3433 21L14.7574 19.5858L16.1717 21L19 20.9999ZM17 10C17 7.23858 14.7614 5 12 5C9.23858 5 7 7.23858 7 10V19L9.24264 16.7573L12 19.5147L14.7574 16.7573L17 18.9999V10Z"
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

HTMLCSSJSONXML

MarkupSVG Sprite

Ghost Character ended up a wonderful CSS icon built by applying properties like: transform, width, height, border, border-bottom, overflow, background, border-top, border-right, .gg-ghost-character,
Fun facts, it has: 44 Lines of code at 971b & 706b after compression. Truly stunning 🤩 for a CSS designed icon.

Ghost Character

Thank you!