Live Photo

Views 57 Downloads - 10 API calls 27 Lines - 528 Bytes Apr 23, 2020 multimedia design

 .gg-live-photo {
 transform: scale(var(--ggs,1))
}

.gg-live-photo,
.gg-live-photo::after {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 100px;
 border: 2px dotted currentColor
}

.gg-live-photo::after {
 content: "";
 position: absolute;
 width: 8px;
 height: 8px;
 border: 1px solid transparent;
 top: 4px;
 left: 4px;
 box-shadow:
 0 0 0 2px,
 inset 0 0 0 2px currentColor
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.9805 21.9525C12.6579 21.9839 12.3308 22 12 22C11.6692 22 11.3421 21.9839 11.0194 21.9525L11.2132 19.9619C11.4715 19.9871 11.7339 20 12 20C12.2661 20 12.5285 19.9871 12.7868 19.9619L12.9805 21.9525Z" fill="currentColor" /><path d="M9.09617 21.5719L9.67608 19.6578C9.17124 19.5048 8.68725 19.3031 8.22951 19.058L7.28519 20.821C7.8578 21.1277 8.46374 21.3803 9.09617 21.5719Z" fill="currentColor" /><path d="M5.65597 19.7304L6.92562 18.1851C6.5202 17.852 6.14801 17.4798 5.81491 17.0744L4.2696 18.344C4.68539 18.8501 5.1499 19.3146 5.65597 19.7304Z" fill="currentColor" /><path d="M3.17901 16.7148L4.94204 15.7705C4.69686 15.3127 4.49516 14.8288 4.34221 14.3239L2.42813 14.9038C2.61974 15.5363 2.87231 16.1422 3.17901 16.7148Z" fill="currentColor" /><path d="M2.04746 12.9805L4.03806 12.7868C4.01292 12.5285 4 12.2661 4 12C4 11.7339 4.01292 11.4715 4.03806 11.2132L2.04746 11.0195C2.01607 11.3421 2 11.6692 2 12C2 12.3308 2.01607 12.6579 2.04746 12.9805Z" fill="currentColor" /><path d="M2.42813 9.09617L4.34221 9.67608C4.49517 9.17124 4.69686 8.68725 4.94204 8.22951L3.17901 7.28519C2.87231 7.8578 2.61974 8.46374 2.42813 9.09617Z" fill="currentColor" /><path d="M4.2696 5.65597L5.81491 6.92562C6.14801 6.5202 6.5202 6.14801 6.92562 5.81491L5.65597 4.2696C5.14991 4.68539 4.68539 5.1499 4.2696 5.65597Z" fill="currentColor" /><path d="M7.2852 3.17901L8.22951 4.94204C8.68726 4.69686 9.17124 4.49516 9.67608 4.34221L9.09617 2.42813C8.46374 2.61974 7.8578 2.87231 7.2852 3.17901Z" fill="currentColor" /><path d="M11.0195 2.04746C11.3421 2.01607 11.6692 2 12 2C12.3308 2 12.6579 2.01607 12.9805 2.04746L12.7868 4.03806C12.5285 4.01292 12.2661 4 12 4C11.7339 4 11.4715 4.01292 11.2132 4.03806L11.0195 2.04746Z" fill="currentColor" /><path d="M14.9038 2.42813L14.3239 4.34221C14.8288 4.49517 15.3127 4.69686 15.7705 4.94204L16.7148 3.17901C16.1422 2.87231 15.5363 2.61974 14.9038 2.42813Z" fill="currentColor" /><path d="M18.344 4.2696L17.0744 5.81491C17.4798 6.14801 17.852 6.5202 18.1851 6.92562L19.7304 5.65597C19.3146 5.14991 18.8501 4.68539 18.344 4.2696Z" fill="currentColor" /><path d="M20.821 7.2852L19.058 8.22951C19.3031 8.68726 19.5048 9.17124 19.6578 9.67608L21.5719 9.09617C21.3803 8.46374 21.1277 7.8578 20.821 7.2852Z" fill="currentColor" /><path d="M21.9525 11.0195L19.9619 11.2132C19.9871 11.4715 20 11.7339 20 12C20 12.2661 19.9871 12.5285 19.9619 12.7868L21.9525 12.9806C21.9839 12.6579 22 12.3308 22 12C22 11.6692 21.9839 11.3421 21.9525 11.0195Z" fill="currentColor" /><path d="M21.5719 14.9038L19.6578 14.3239C19.5048 14.8288 19.3031 15.3127 19.058 15.7705L20.821 16.7148C21.1277 16.1422 21.3803 15.5363 21.5719 14.9038Z" fill="currentColor" /><path d="M19.7304 18.344L18.1851 17.0744C17.852 17.4798 17.4798 17.852 17.0744 18.1851L18.344 19.7304C18.8501 19.3146 19.3146 18.8501 19.7304 18.344Z" fill="currentColor" /><path d="M16.7148 20.821L15.7705 19.058C15.3127 19.3031 14.8288 19.5048 14.3239 19.6578L14.9038 21.5719C15.5363 21.3803 16.1422 21.1277 16.7148 20.821Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12ZM12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6ZM8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledLivePhoto = styled.i` & { transform: scale(var(--ggs, 1)); } &, &::after { box-sizing: border-box; position: relative; display: block; width: 20px; height: 20px; border-radius: 100px; border: 2px dotted currentColor; } &::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid transparent; top: 4px; left: 4px; box-shadow: 0 0 0 2px, inset 0 0 0 2px currentColor; }`export const LivePhoto = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledLivePhoto {...props} ref={ref} icon-role="live-photo" /></> ) },)

CSSSVGTSX

1	.gg-live-photo {
2	transform: scale(var(--ggs,1))
3	}
4
5	.gg-live-photo,
6	.gg-live-photo::after {
7	box-sizing: border-box;
8	position: relative;
9	display: block;
10	width: 20px;
11	height: 20px;
12	border-radius: 100px;
13	border: 2px dotted currentColor
14	}
15
16	.gg-live-photo::after {
17	content: "";
18	position: absolute;
19	width: 8px;
20	height: 8px;
21	border: 1px solid transparent;
22	top: 4px;
23	left: 4px;
24	box-shadow:
25	0 0 0 2px,
26	inset 0 0 0 2px currentColor
27	}

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="M12.9805 21.9525C12.6579 21.9839 12.3308 22 12 22C11.6692 22 11.3421 21.9839 11.0194 21.9525L11.2132 19.9619C11.4715 19.9871 11.7339 20 12 20C12.2661 20 12.5285 19.9871 12.7868 19.9619L12.9805 21.9525Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M9.09617 21.5719L9.67608 19.6578C9.17124 19.5048 8.68725 19.3031 8.22951 19.058L7.28519 20.821C7.8578 21.1277 8.46374 21.3803 9.09617 21.5719Z"
14	fill="currentColor"
15	/>
16	<path
17	d="M5.65597 19.7304L6.92562 18.1851C6.5202 17.852 6.14801 17.4798 5.81491 17.0744L4.2696 18.344C4.68539 18.8501 5.1499 19.3146 5.65597 19.7304Z"
18	fill="currentColor"
19	/>
20	<path
21	d="M3.17901 16.7148L4.94204 15.7705C4.69686 15.3127 4.49516 14.8288 4.34221 14.3239L2.42813 14.9038C2.61974 15.5363 2.87231 16.1422 3.17901 16.7148Z"
22	fill="currentColor"
23	/>
24	<path
25	d="M2.04746 12.9805L4.03806 12.7868C4.01292 12.5285 4 12.2661 4 12C4 11.7339 4.01292 11.4715 4.03806 11.2132L2.04746 11.0195C2.01607 11.3421 2 11.6692 2 12C2 12.3308 2.01607 12.6579 2.04746 12.9805Z"
26	fill="currentColor"
27	/>
28	<path
29	d="M2.42813 9.09617L4.34221 9.67608C4.49517 9.17124 4.69686 8.68725 4.94204 8.22951L3.17901 7.28519C2.87231 7.8578 2.61974 8.46374 2.42813 9.09617Z"
30	fill="currentColor"
31	/>
32	<path
33	d="M4.2696 5.65597L5.81491 6.92562C6.14801 6.5202 6.5202 6.14801 6.92562 5.81491L5.65597 4.2696C5.14991 4.68539 4.68539 5.1499 4.2696 5.65597Z"
34	fill="currentColor"
35	/>
36	<path
37	d="M7.2852 3.17901L8.22951 4.94204C8.68726 4.69686 9.17124 4.49516 9.67608 4.34221L9.09617 2.42813C8.46374 2.61974 7.8578 2.87231 7.2852 3.17901Z"
38	fill="currentColor"
39	/>
40	<path
41	d="M11.0195 2.04746C11.3421 2.01607 11.6692 2 12 2C12.3308 2 12.6579 2.01607 12.9805 2.04746L12.7868 4.03806C12.5285 4.01292 12.2661 4 12 4C11.7339 4 11.4715 4.01292 11.2132 4.03806L11.0195 2.04746Z"
42	fill="currentColor"
43	/>
44	<path
45	d="M14.9038 2.42813L14.3239 4.34221C14.8288 4.49517 15.3127 4.69686 15.7705 4.94204L16.7148 3.17901C16.1422 2.87231 15.5363 2.61974 14.9038 2.42813Z"
46	fill="currentColor"
47	/>
48	<path
49	d="M18.344 4.2696L17.0744 5.81491C17.4798 6.14801 17.852 6.5202 18.1851 6.92562L19.7304 5.65597C19.3146 5.14991 18.8501 4.68539 18.344 4.2696Z"
50	fill="currentColor"
51	/>
52	<path
53	d="M20.821 7.2852L19.058 8.22951C19.3031 8.68726 19.5048 9.17124 19.6578 9.67608L21.5719 9.09617C21.3803 8.46374 21.1277 7.8578 20.821 7.2852Z"
54	fill="currentColor"
55	/>
56	<path
57	d="M21.9525 11.0195L19.9619 11.2132C19.9871 11.4715 20 11.7339 20 12C20 12.2661 19.9871 12.5285 19.9619 12.7868L21.9525 12.9806C21.9839 12.6579 22 12.3308 22 12C22 11.6692 21.9839 11.3421 21.9525 11.0195Z"
58	fill="currentColor"
59	/>
60	<path
61	d="M21.5719 14.9038L19.6578 14.3239C19.5048 14.8288 19.3031 15.3127 19.058 15.7705L20.821 16.7148C21.1277 16.1422 21.3803 15.5363 21.5719 14.9038Z"
62	fill="currentColor"
63	/>
64	<path
65	d="M19.7304 18.344L18.1851 17.0744C17.852 17.4798 17.4798 17.852 17.0744 18.1851L18.344 19.7304C18.8501 19.3146 19.3146 18.8501 19.7304 18.344Z"
66	fill="currentColor"
67	/>
68	<path
69	d="M16.7148 20.821L15.7705 19.058C15.3127 19.3031 14.8288 19.5048 14.3239 19.6578L14.9038 21.5719C15.5363 21.3803 16.1422 21.1277 16.7148 20.821Z"
70	fill="currentColor"
71	/>
72	<path
73	fill-rule="evenodd"
74	clip-rule="evenodd"
75	d="M9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12ZM12 13C11.4477 13 11 12.5523 11 12C11 11.4477 11.4477 11 12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13Z"
76	fill="currentColor"
77	/>
78	<path
79	fill-rule="evenodd"
80	clip-rule="evenodd"
81	d="M12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6ZM8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12Z"
82	fill="currentColor"
83	/>
84	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Live Photo developed into a wonderful CSS icon made by applying properties like: transform, width, height, border-radius, border, box-shadow,
Fun to know, it has: 27 Lines of code at 528b & 378b after compiling. Actually wonderful 🤗 for a icon designed by code.

Live Photo

Thank you!