Bot

5K Views 73 Downloads - 45 API calls 39 Lines - 769 Bytes Apr 23, 2020 devices interface

 .gg-bot {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 21px;
 height: 10px;
 border-right: 8px solid transparent;
 border-left: 8px solid transparent;
 border-bottom: 1px solid transparent;
 border-radius: 12px;
 box-shadow:
 0 0 0 2px,
 -4px 0 0 -1px,
 4px 0 0 -1px,
 inset 0 -4px 0 -2px
}

.gg-bot::after,
.gg-bot::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 2px;
 height: 2px;
 box-shadow: 0 0 0 2px;
 top: 3px
}

.gg-bot::before {
 left: -4px;
 border-radius: 3px
}

.gg-bot::after {
 border-radius: 100px;
 right: -4px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1254 13H10.1254V15H14.1254V13Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M8.12537 13C9.22994 13 10.1254 12.1046 10.1254 11C10.1254 9.89543 9.22994 9 8.12537 9C7.0208 9 6.12537 9.89543 6.12537 11C6.12537 12.1046 7.0208 13 8.12537 13ZM8.12537 11.5C8.40151 11.5 8.62537 11.2761 8.62537 11C8.62537 10.7239 8.40151 10.5 8.12537 10.5C7.84922 10.5 7.62537 10.7239 7.62537 11C7.62537 11.2761 7.84922 11.5 8.12537 11.5Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M18.1254 11C18.1254 12.1046 17.2299 13 16.1254 13C15.0208 13 14.1254 12.1046 14.1254 11C14.1254 9.89543 15.0208 9 16.1254 9C17.2299 9 18.1254 9.89543 18.1254 11ZM16.6254 11C16.6254 11.2761 16.4015 11.5 16.1254 11.5C15.8492 11.5 15.6254 11.2761 15.6254 11C15.6254 10.7239 15.8492 10.5 16.1254 10.5C16.4015 10.5 16.6254 10.7239 16.6254 11Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M2.74884 14.6663C3.73056 16.6421 5.76939 18 8.12537 18H16.1254C18.5654 18 20.6652 16.5435 21.6029 14.4525C22.3722 13.9093 22.8746 13.0133 22.8746 12C22.8746 10.9867 22.3722 10.0907 21.6029 9.54753C20.6652 7.45651 18.5654 6 16.1254 6H8.12537C5.76939 6 3.73056 7.3579 2.74884 9.33375C1.78448 9.83263 1.12537 10.8393 1.12537 12C1.12537 13.1607 1.78448 14.1674 2.74884 14.6663ZM8.12537 8H16.1254C17.5088 8 18.7282 8.70234 19.4465 9.76991C19.7227 10.4593 19.8746 11.2119 19.8746 12C19.8746 12.7881 19.7227 13.5407 19.4465 14.2301C18.7282 15.2977 17.5088 16 16.1254 16H8.12537C5.91623 16 4.12537 14.2091 4.12537 12C4.12537 9.79086 5.91623 8 8.12537 8Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledBot = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 21px; height: 10px; border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 1px solid transparent; border-radius: 12px; box-shadow: 0 0 0 2px, -4px 0 0 -1px, 4px 0 0 -1px, inset 0 -4px 0 -2px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 2px; height: 2px; box-shadow: 0 0 0 2px; top: 3px; } &::before { left: -4px; border-radius: 3px; } &::after { border-radius: 100px; right: -4px; }`export const Bot = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledBot {...props} ref={ref} icon-role="bot" /></> ) },)

CSSSVGTSX

1	.gg-bot {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 21px;
7	height: 10px;
8	border-right: 8px solid transparent;
9	border-left: 8px solid transparent;
10	border-bottom: 1px solid transparent;
11	border-radius: 12px;
12	box-shadow:
13	0 0 0 2px,
14	-4px 0 0 -1px,
15	4px 0 0 -1px,
16	inset 0 -4px 0 -2px
17	}
18
19	.gg-bot::after,
20	.gg-bot::before {
21	content: "";
22	display: block;
23	box-sizing: border-box;
24	position: absolute;
25	width: 2px;
26	height: 2px;
27	box-shadow: 0 0 0 2px;
28	top: 3px
29	}
30
31	.gg-bot::before {
32	left: -4px;
33	border-radius: 3px
34	}
35
36	.gg-bot::after {
37	border-radius: 100px;
38	right: -4px
39	}

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 d="M14.1254 13H10.1254V15H14.1254V13Z" fill="currentColor" />
9	<path
10	fill-rule="evenodd"
11	clip-rule="evenodd"
12	d="M8.12537 13C9.22994 13 10.1254 12.1046 10.1254 11C10.1254 9.89543 9.22994 9 8.12537 9C7.0208 9 6.12537 9.89543 6.12537 11C6.12537 12.1046 7.0208 13 8.12537 13ZM8.12537 11.5C8.40151 11.5 8.62537 11.2761 8.62537 11C8.62537 10.7239 8.40151 10.5 8.12537 10.5C7.84922 10.5 7.62537 10.7239 7.62537 11C7.62537 11.2761 7.84922 11.5 8.12537 11.5Z"
13	fill="currentColor"
14	/>
15	<path
16	fill-rule="evenodd"
17	clip-rule="evenodd"
18	d="M18.1254 11C18.1254 12.1046 17.2299 13 16.1254 13C15.0208 13 14.1254 12.1046 14.1254 11C14.1254 9.89543 15.0208 9 16.1254 9C17.2299 9 18.1254 9.89543 18.1254 11ZM16.6254 11C16.6254 11.2761 16.4015 11.5 16.1254 11.5C15.8492 11.5 15.6254 11.2761 15.6254 11C15.6254 10.7239 15.8492 10.5 16.1254 10.5C16.4015 10.5 16.6254 10.7239 16.6254 11Z"
19	fill="currentColor"
20	/>
21	<path
22	fill-rule="evenodd"
23	clip-rule="evenodd"
24	d="M2.74884 14.6663C3.73056 16.6421 5.76939 18 8.12537 18H16.1254C18.5654 18 20.6652 16.5435 21.6029 14.4525C22.3722 13.9093 22.8746 13.0133 22.8746 12C22.8746 10.9867 22.3722 10.0907 21.6029 9.54753C20.6652 7.45651 18.5654 6 16.1254 6H8.12537C5.76939 6 3.73056 7.3579 2.74884 9.33375C1.78448 9.83263 1.12537 10.8393 1.12537 12C1.12537 13.1607 1.78448 14.1674 2.74884 14.6663ZM8.12537 8H16.1254C17.5088 8 18.7282 8.70234 19.4465 9.76991C19.7227 10.4593 19.8746 11.2119 19.8746 12C19.8746 12.7881 19.7227 13.5407 19.4465 14.2301C18.7282 15.2977 17.5088 16 16.1254 16H8.12537C5.91623 16 4.12537 14.2091 4.12537 12C4.12537 9.79086 5.91623 8 8.12537 8Z"
25	fill="currentColor"
26	/>
27	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledBot = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: scale(var(--ggs, 1));
10	width: 21px;
11	height: 10px;
12	border-right: 8px solid transparent;
13	border-left: 8px solid transparent;
14	border-bottom: 1px solid transparent;
15	border-radius: 12px;
16	box-shadow: 0 0 0 2px, -4px 0 0 -1px, 4px 0 0 -1px, inset 0 -4px 0 -2px;
17	}
18	&::after,
19	&::before {
20	content: '';
21	display: block;
22	box-sizing: border-box;
23	position: absolute;
24	width: 2px;
25	height: 2px;
26	box-shadow: 0 0 0 2px;
27	top: 3px;
28	}
29	&::before {
30	left: -4px;
31	border-radius: 3px;
32	}
33	&::after {
34	border-radius: 100px;
35	right: -4px;
36	}
37	`
38
39	export const Bot = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
40	(props, ref) => {
41	return (
42	<>
43	<StyledBot {...props} ref={ref} icon-role="bot" />
44	</>
45	)
46	},
47	)
48

HTMLCSSJSONXML

MarkupSVG Sprite

Bot became an amazing CSS icon made by practicing properties like: transform, width, height, border-right, border-left, border-bottom, border-radius, box-shadow,
Fun facts, it has: 39 Lines of code at 769b & 543b after compiling. Actually stunning 🤩 huhh.

Bot

Thank you!