Edit Noise

1K Views 56 Downloads - 12 API calls 28 Lines - 693 Bytes Apr 23, 2020 interface design

 .gg-edit-noise {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid transparent;
 box-shadow: 0 0 0 2px;
 border-radius: 100px;
 overflow: hidden
}

.gg-edit-noise::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 12px;
 height: 12px;
 background-image:
 radial-gradient(circle,
 currentColor 25%, transparent 25%),
 radial-gradient(circle,
 currentColor 25%, transparent 25%);
 background-position: 4px 4px,2px 2px;
 background-size: 4px 4px;
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.4044 17.7657C10.419 17.7803 10.4329 17.7953 10.446 17.8108C10.1948 17.7439 9.95005 17.661 9.71293 17.5634C9.95429 17.5106 10.2167 17.578 10.4044 17.7657Z" fill="currentColor" /><path d="M8.43574 16.705C8.40862 16.7321 8.37994 16.7567 8.34999 16.7788C7.95661 16.4775 7.60163 16.1285 7.29364 15.7406C7.31765 15.7068 7.3448 15.6746 7.37508 15.6443C7.66797 15.3514 8.14285 15.3514 8.43574 15.6443C8.72863 15.9372 8.72863 16.4121 8.43574 16.705Z" fill="currentColor" /><path d="M6.37104 13.6475C6.59701 13.8735 6.64864 14.2077 6.52594 14.4832C6.38527 14.1723 6.27034 13.8472 6.18387 13.5107C6.25129 13.5454 6.31455 13.591 6.37104 13.6475Z" fill="currentColor" /><path d="M6.37104 10.6753C6.29401 10.7523 6.2044 10.8091 6.10883 10.8456C6.18637 10.4523 6.30234 10.0728 6.45268 9.71119C6.66079 10.004 6.63357 10.4128 6.37104 10.6753Z" fill="currentColor" /><path d="M7.37508 8.70669C7.28995 8.62156 7.22957 8.52106 7.19392 8.41413C7.45907 8.06093 7.76228 7.73793 8.09747 7.45124C8.22139 7.48394 8.33858 7.54887 8.43574 7.64603C8.72863 7.93892 8.72863 8.41379 8.43574 8.70669C8.14285 8.99958 7.66797 8.99958 7.37508 8.70669Z" fill="currentColor" /><path d="M9.34371 6.76662C9.31335 6.73627 9.28614 6.70396 9.26208 6.6701C9.6881 6.45171 10.1437 6.28277 10.6212 6.17088C10.6397 6.38399 10.5675 6.60352 10.4044 6.76662C10.1115 7.05952 9.6366 7.05952 9.34371 6.76662Z" fill="currentColor" /><path d="M13.2872 17.8734C13.5967 17.8055 13.8973 17.7136 14.1868 17.6C13.9165 17.4914 13.5957 17.5466 13.3766 17.7657C13.3429 17.7993 13.3131 17.8354 13.2872 17.8734Z" fill="currentColor" /><path d="M15.5312 16.8608C15.935 16.5658 16.3005 16.2216 16.619 15.8369C16.6005 15.8133 16.5803 15.7906 16.5586 15.7688C16.2657 15.4759 15.7908 15.4759 15.4979 15.7688C15.205 16.0617 15.205 16.5366 15.4979 16.8295C15.5088 16.8403 15.5199 16.8508 15.5312 16.8608Z" fill="currentColor" /><path d="M17.3654 14.6921C17.5637 14.2953 17.7194 13.8735 17.8264 13.4326C17.6636 13.451 17.5058 13.5227 17.3809 13.6475C17.0933 13.9351 17.0881 14.3982 17.3654 14.6921Z" fill="currentColor" /><path d="M17.8911 10.8934C17.8032 10.4272 17.6613 9.98016 17.4722 9.55885C17.4507 9.57609 17.4299 9.59469 17.4099 9.61465C17.117 9.90755 17.117 10.3824 17.4099 10.6753C17.5439 10.8093 17.7159 10.882 17.8911 10.8934Z" fill="currentColor" /><path d="M16.7556 8.35985C16.4971 8.02355 16.2038 7.71542 15.8811 7.44086C15.7407 7.46881 15.6068 7.5372 15.4979 7.64603C15.205 7.93892 15.205 8.41379 15.4979 8.70669C15.7908 8.99958 16.2657 8.99958 16.5586 8.70669C16.658 8.60729 16.7237 8.48694 16.7556 8.35985Z" fill="currentColor" /><path d="M14.4373 6.76662C14.4906 6.71331 14.5342 6.65397 14.5681 6.59079C14.1273 6.38127 13.6569 6.22392 13.1649 6.12671C13.1317 6.35331 13.2022 6.59223 13.3766 6.76662C13.6695 7.05952 14.1444 7.05952 14.4373 6.76662Z" fill="currentColor" /><path d="M12.5257 7.64603C12.8186 7.93892 12.8186 8.41379 12.5257 8.70669C12.2328 8.99958 11.7579 8.99958 11.465 8.70669C11.1721 8.41379 11.1721 7.93892 11.465 7.64603C11.7579 7.35313 12.2328 7.35313 12.5257 7.64603Z" fill="currentColor" /><path d="M10.4044 9.61465C10.6973 9.90755 10.6973 10.3824 10.4044 10.6753C10.1115 10.9682 9.6366 10.9682 9.34371 10.6753C9.05081 10.3824 9.05081 9.90755 9.34371 9.61465C9.6366 9.32176 10.1115 9.32176 10.4044 9.61465Z" fill="currentColor" /><path d="M8.43574 12.7967C8.72863 12.5038 8.72863 12.0289 8.43574 11.736C8.14285 11.4431 7.66797 11.4431 7.37508 11.736C7.08218 12.0289 7.08218 12.5038 7.37508 12.7967C7.66797 13.0895 8.14285 13.0895 8.43574 12.7967Z" fill="currentColor" /><path d="M10.4044 13.6475C10.6973 13.9404 10.6973 14.4153 10.4044 14.7082C10.1115 15.001 9.6366 15.001 9.34371 14.7082C9.05081 14.4153 9.05081 13.9404 9.34371 13.6475C9.6366 13.3546 10.1115 13.3546 10.4044 13.6475Z" fill="currentColor" /><path d="M12.5257 12.7967C12.8186 12.5038 12.8186 12.0289 12.5257 11.736C12.2328 11.4431 11.7579 11.4431 11.465 11.736C11.1721 12.0289 11.1721 12.5038 11.465 12.7967C11.7579 13.0895 12.2328 13.0895 12.5257 12.7967Z" fill="currentColor" /><path d="M14.4373 9.61465C14.7302 9.90755 14.7302 10.3824 14.4373 10.6753C14.1444 10.9682 13.6695 10.9682 13.3766 10.6753C13.0837 10.3824 13.0837 9.90755 13.3766 9.61465C13.6695 9.32176 14.1444 9.32176 14.4373 9.61465Z" fill="currentColor" /><path d="M16.5586 12.7681C16.8515 12.4752 16.8515 12.0003 16.5586 11.7074C16.2657 11.4145 15.7908 11.4145 15.4979 11.7074C15.205 12.0003 15.205 12.4752 15.4979 12.7681C15.7908 13.061 16.2657 13.061 16.5586 12.7681Z" fill="currentColor" /><path d="M14.423 13.6902C14.7159 13.9831 14.7159 14.458 14.423 14.7509C14.1301 15.0438 13.6552 15.0438 13.3623 14.7509C13.0694 14.458 13.0694 13.9831 13.3623 13.6902C13.6552 13.3973 14.1301 13.3973 14.423 13.6902Z" fill="currentColor" /><path d="M12.3159 16.705C12.6088 16.4121 12.6088 15.9372 12.3159 15.6443C12.023 15.3514 11.5482 15.3514 11.2553 15.6443C10.9624 15.9372 10.9624 16.4121 11.2553 16.705C11.5482 16.9979 12.023 16.9979 12.3159 16.705Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledEditNoise = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 2px solid transparent; box-shadow: 0 0 0 2px; border-radius: 100px; overflow: hidden; } &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 12px; height: 12px; background-image: radial-gradient(circle, currentColor 25%, transparent 25%), radial-gradient(circle, currentColor 25%, transparent 25%); background-position: 4px 4px, 2px 2px; background-size: 4px 4px; }`export const EditNoise = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledEditNoise {...props} ref={ref} icon-role="edit-noise" /></> ) },)

CSSSVGTSX

1	.gg-edit-noise {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 16px;
7	height: 16px;
8	border: 2px solid transparent;
9	box-shadow: 0 0 0 2px;
10	border-radius: 100px;
11	overflow: hidden
12	}
13
14	.gg-edit-noise::before {
15	content: "";
16	display: block;
17	box-sizing: border-box;
18	position: absolute;
19	width: 12px;
20	height: 12px;
21	background-image:
22	radial-gradient(circle,
23	currentColor 25%, transparent 25%),
24	radial-gradient(circle,
25	currentColor 25%, transparent 25%);
26	background-position: 4px 4px,2px 2px;
27	background-size: 4px 4px;
28	}

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.4044 17.7657C10.419 17.7803 10.4329 17.7953 10.446 17.8108C10.1948 17.7439 9.95005 17.661 9.71293 17.5634C9.95429 17.5106 10.2167 17.578 10.4044 17.7657Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M8.43574 16.705C8.40862 16.7321 8.37994 16.7567 8.34999 16.7788C7.95661 16.4775 7.60163 16.1285 7.29364 15.7406C7.31765 15.7068 7.3448 15.6746 7.37508 15.6443C7.66797 15.3514 8.14285 15.3514 8.43574 15.6443C8.72863 15.9372 8.72863 16.4121 8.43574 16.705Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M6.37104 13.6475C6.59701 13.8735 6.64864 14.2077 6.52594 14.4832C6.38527 14.1723 6.27034 13.8472 6.18387 13.5107C6.25129 13.5454 6.31455 13.591 6.37104 13.6475Z"
18	fill="currentColor"
19	/>
20	<path
21	d="M6.37104 10.6753C6.29401 10.7523 6.2044 10.8091 6.10883 10.8456C6.18637 10.4523 6.30234 10.0728 6.45268 9.71119C6.66079 10.004 6.63357 10.4128 6.37104 10.6753Z"
22	fill="currentColor"
23	/>
24	<path
25	d="M7.37508 8.70669C7.28995 8.62156 7.22957 8.52106 7.19392 8.41413C7.45907 8.06093 7.76228 7.73793 8.09747 7.45124C8.22139 7.48394 8.33858 7.54887 8.43574 7.64603C8.72863 7.93892 8.72863 8.41379 8.43574 8.70669C8.14285 8.99958 7.66797 8.99958 7.37508 8.70669Z"
26	fill="currentColor"
27	/>
28	<path
29	d="M9.34371 6.76662C9.31335 6.73627 9.28614 6.70396 9.26208 6.6701C9.6881 6.45171 10.1437 6.28277 10.6212 6.17088C10.6397 6.38399 10.5675 6.60352 10.4044 6.76662C10.1115 7.05952 9.6366 7.05952 9.34371 6.76662Z"
30	fill="currentColor"
31	/>
32	<path
33	d="M13.2872 17.8734C13.5967 17.8055 13.8973 17.7136 14.1868 17.6C13.9165 17.4914 13.5957 17.5466 13.3766 17.7657C13.3429 17.7993 13.3131 17.8354 13.2872 17.8734Z"
34	fill="currentColor"
35	/>
36	<path
37	d="M15.5312 16.8608C15.935 16.5658 16.3005 16.2216 16.619 15.8369C16.6005 15.8133 16.5803 15.7906 16.5586 15.7688C16.2657 15.4759 15.7908 15.4759 15.4979 15.7688C15.205 16.0617 15.205 16.5366 15.4979 16.8295C15.5088 16.8403 15.5199 16.8508 15.5312 16.8608Z"
38	fill="currentColor"
39	/>
40	<path
41	d="M17.3654 14.6921C17.5637 14.2953 17.7194 13.8735 17.8264 13.4326C17.6636 13.451 17.5058 13.5227 17.3809 13.6475C17.0933 13.9351 17.0881 14.3982 17.3654 14.6921Z"
42	fill="currentColor"
43	/>
44	<path
45	d="M17.8911 10.8934C17.8032 10.4272 17.6613 9.98016 17.4722 9.55885C17.4507 9.57609 17.4299 9.59469 17.4099 9.61465C17.117 9.90755 17.117 10.3824 17.4099 10.6753C17.5439 10.8093 17.7159 10.882 17.8911 10.8934Z"
46	fill="currentColor"
47	/>
48	<path
49	d="M16.7556 8.35985C16.4971 8.02355 16.2038 7.71542 15.8811 7.44086C15.7407 7.46881 15.6068 7.5372 15.4979 7.64603C15.205 7.93892 15.205 8.41379 15.4979 8.70669C15.7908 8.99958 16.2657 8.99958 16.5586 8.70669C16.658 8.60729 16.7237 8.48694 16.7556 8.35985Z"
50	fill="currentColor"
51	/>
52	<path
53	d="M14.4373 6.76662C14.4906 6.71331 14.5342 6.65397 14.5681 6.59079C14.1273 6.38127 13.6569 6.22392 13.1649 6.12671C13.1317 6.35331 13.2022 6.59223 13.3766 6.76662C13.6695 7.05952 14.1444 7.05952 14.4373 6.76662Z"
54	fill="currentColor"
55	/>
56	<path
57	d="M12.5257 7.64603C12.8186 7.93892 12.8186 8.41379 12.5257 8.70669C12.2328 8.99958 11.7579 8.99958 11.465 8.70669C11.1721 8.41379 11.1721 7.93892 11.465 7.64603C11.7579 7.35313 12.2328 7.35313 12.5257 7.64603Z"
58	fill="currentColor"
59	/>
60	<path
61	d="M10.4044 9.61465C10.6973 9.90755 10.6973 10.3824 10.4044 10.6753C10.1115 10.9682 9.6366 10.9682 9.34371 10.6753C9.05081 10.3824 9.05081 9.90755 9.34371 9.61465C9.6366 9.32176 10.1115 9.32176 10.4044 9.61465Z"
62	fill="currentColor"
63	/>
64	<path
65	d="M8.43574 12.7967C8.72863 12.5038 8.72863 12.0289 8.43574 11.736C8.14285 11.4431 7.66797 11.4431 7.37508 11.736C7.08218 12.0289 7.08218 12.5038 7.37508 12.7967C7.66797 13.0895 8.14285 13.0895 8.43574 12.7967Z"
66	fill="currentColor"
67	/>
68	<path
69	d="M10.4044 13.6475C10.6973 13.9404 10.6973 14.4153 10.4044 14.7082C10.1115 15.001 9.6366 15.001 9.34371 14.7082C9.05081 14.4153 9.05081 13.9404 9.34371 13.6475C9.6366 13.3546 10.1115 13.3546 10.4044 13.6475Z"
70	fill="currentColor"
71	/>
72	<path
73	d="M12.5257 12.7967C12.8186 12.5038 12.8186 12.0289 12.5257 11.736C12.2328 11.4431 11.7579 11.4431 11.465 11.736C11.1721 12.0289 11.1721 12.5038 11.465 12.7967C11.7579 13.0895 12.2328 13.0895 12.5257 12.7967Z"
74	fill="currentColor"
75	/>
76	<path
77	d="M14.4373 9.61465C14.7302 9.90755 14.7302 10.3824 14.4373 10.6753C14.1444 10.9682 13.6695 10.9682 13.3766 10.6753C13.0837 10.3824 13.0837 9.90755 13.3766 9.61465C13.6695 9.32176 14.1444 9.32176 14.4373 9.61465Z"
78	fill="currentColor"
79	/>
80	<path
81	d="M16.5586 12.7681C16.8515 12.4752 16.8515 12.0003 16.5586 11.7074C16.2657 11.4145 15.7908 11.4145 15.4979 11.7074C15.205 12.0003 15.205 12.4752 15.4979 12.7681C15.7908 13.061 16.2657 13.061 16.5586 12.7681Z"
82	fill="currentColor"
83	/>
84	<path
85	d="M14.423 13.6902C14.7159 13.9831 14.7159 14.458 14.423 14.7509C14.1301 15.0438 13.6552 15.0438 13.3623 14.7509C13.0694 14.458 13.0694 13.9831 13.3623 13.6902C13.6552 13.3973 14.1301 13.3973 14.423 13.6902Z"
86	fill="currentColor"
87	/>
88	<path
89	d="M12.3159 16.705C12.6088 16.4121 12.6088 15.9372 12.3159 15.6443C12.023 15.3514 11.5482 15.3514 11.2553 15.6443C10.9624 15.9372 10.9624 16.4121 11.2553 16.705C11.5482 16.9979 12.023 16.9979 12.3159 16.705Z"
90	fill="currentColor"
91	/>
92	<path
93	fill-rule="evenodd"
94	clip-rule="evenodd"
95	d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
96	fill="currentColor"
97	/>
98	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledEditNoise = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: scale(var(--ggs, 1));
10	width: 16px;
11	height: 16px;
12	border: 2px solid transparent;
13	box-shadow: 0 0 0 2px;
14	border-radius: 100px;
15	overflow: hidden;
16	}
17	&::before {
18	content: '';
19	display: block;
20	box-sizing: border-box;
21	position: absolute;
22	width: 12px;
23	height: 12px;
24	background-image: radial-gradient(circle, currentColor 25%, transparent 25%),
25	radial-gradient(circle, currentColor 25%, transparent 25%);
26	background-position: 4px 4px, 2px 2px;
27	background-size: 4px 4px;
28	}
29	`
30
31	export const EditNoise = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
32	(props, ref) => {
33	return (
34	<>
35	<StyledEditNoise {...props} ref={ref} icon-role="edit-noise" />
36	</>
37	)
38	},
39	)
40

HTMLCSSJSONXML

MarkupSVG Sprite

Edit Noise became a wonderful pure CSS icon built by using properties like: transform, width, height, border, box-shadow, border-radius, overflow, background-image, background- background-size,
Fun to know, it has: 28 Lines of code at 693b & 510b after compression. Truly wonderful 🤗 huhh.

Edit Noise

Thank you!