Cast

2K Views 65 Downloads - 26 API calls 48 Lines - 1150 Bytes Apr 23, 2020 interface devices multimedia

 .gg-cast {
 background:
 linear-gradient( to left,
 currentColor 5px,transparent 0)
 no-repeat bottom right/6px 2px,
 linear-gradient( to left,
 currentColor 5px,transparent 0)
 no-repeat top left/2px 2px;
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 16px;
 border-top: 2px solid;
 border-right: 2px solid;
 border-radius: 2px;
 border-left: 0
 }

 .gg-cast::after,
 .gg-cast::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 20px;
 height: 20px;
 border: 6px double;
 border-top-color: transparent;
 border-bottom-color: transparent;
 border-left-color: transparent;
 border-radius: 50%;
 transform: rotate(-45deg);
 bottom: -10px;
 left: -10px
 }

 .gg-cast::after {
 width: 4px;
 height: 4px;
 border: 2px solid;
 border-top-color: transparent;
 border-bottom-color: transparent;
 border-left-color: transparent;
 bottom: -2px;
 left: -2px
 }

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6H4V8H2V6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H15V18H20V6Z" fill="currentColor" /><path d="M2 13C5.86599 13 9 16.134 9 20H7C7 17.2386 4.76142 15 2 15V13Z" fill="currentColor" /><path d="M2 17C3.65685 17 5 18.3431 5 20H2V17Z" fill="currentColor" /><path d="M2 9C8.07513 9 13 13.9249 13 20H11C11 15.0294 6.97056 11 2 11V9Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledCast = styled.i` & { background: linear-gradient(to left, currentColor 5px, transparent 0) no-repeat bottom right/6px 2px, linear-gradient(to left, currentColor 5px, transparent 0) no-repeat top left/2px 2px; box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 20px; height: 16px; border-top: 2px solid; border-right: 2px solid; border-radius: 2px; border-left: 0; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 20px; height: 20px; border: 6px double; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-45deg); bottom: -10px; left: -10px; } &::after { width: 4px; height: 4px; border: 2px solid; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; bottom: -2px; left: -2px; }`export const Cast = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledCast {...props} ref={ref} icon-role="cast" /></> ) },)

CSSSVGTSX

1	.gg-cast {
2	background:
3	linear-gradient( to left,
4	currentColor 5px,transparent 0)
5	no-repeat bottom right/6px 2px,
6	linear-gradient( to left,
7	currentColor 5px,transparent 0)
8	no-repeat top left/2px 2px;
9	box-sizing: border-box;
10	position: relative;
11	display: block;
12	transform: scale(var(--ggs,1));
13	width: 20px;
14	height: 16px;
15	border-top: 2px solid;
16	border-right: 2px solid;
17	border-radius: 2px;
18	border-left: 0
19	}
20
21	.gg-cast::after,
22	.gg-cast::before {
23	content: "";
24	display: block;
25	box-sizing: border-box;
26	position: absolute;
27	width: 20px;
28	height: 20px;
29	border: 6px double;
30	border-top-color: transparent;
31	border-bottom-color: transparent;
32	border-left-color: transparent;
33	border-radius: 50%;
34	transform: rotate(-45deg);
35	bottom: -10px;
36	left: -10px
37	}
38
39	.gg-cast::after {
40	width: 4px;
41	height: 4px;
42	border: 2px solid;
43	border-top-color: transparent;
44	border-bottom-color: transparent;
45	border-left-color: transparent;
46	bottom: -2px;
47	left: -2px
48	}

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="M20 6H4V8H2V6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H15V18H20V6Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M2 13C5.86599 13 9 16.134 9 20H7C7 17.2386 4.76142 15 2 15V13Z"
14	fill="currentColor"
15	/>
16	<path d="M2 17C3.65685 17 5 18.3431 5 20H2V17Z" fill="currentColor" />
17	<path
18	d="M2 9C8.07513 9 13 13.9249 13 20H11C11 15.0294 6.97056 11 2 11V9Z"
19	fill="currentColor"
20	/>
21	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledCast = styled.i`
5	& {
6	background: linear-gradient(to left, currentColor 5px, transparent 0) no-repeat bottom right/6px
7	2px,
8	linear-gradient(to left, currentColor 5px, transparent 0) no-repeat top left/2px 2px;
9	box-sizing: border-box;
10	position: relative;
11	display: block;
12	transform: scale(var(--ggs, 1));
13	width: 20px;
14	height: 16px;
15	border-top: 2px solid;
16	border-right: 2px solid;
17	border-radius: 2px;
18	border-left: 0;
19	}
20	&::after,
21	&::before {
22	content: '';
23	display: block;
24	box-sizing: border-box;
25	position: absolute;
26	width: 20px;
27	height: 20px;
28	border: 6px double;
29	border-top-color: transparent;
30	border-bottom-color: transparent;
31	border-left-color: transparent;
32	border-radius: 50%;
33	transform: rotate(-45deg);
34	bottom: -10px;
35	left: -10px;
36	}
37	&::after {
38	width: 4px;
39	height: 4px;
40	border: 2px solid;
41	border-top-color: transparent;
42	border-bottom-color: transparent;
43	border-left-color: transparent;
44	bottom: -2px;
45	left: -2px;
46	}
47	`
48
49	export const Cast = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
50	(props, ref) => {
51	return (
52	<>
53	<StyledCast {...props} ref={ref} icon-role="cast" />
54	</>
55	)
56	},
57	)
58

HTMLCSSJSONXML

MarkupSVG Sprite

Cast turned into a magic 100% CSS icon made by using properties as follows: background, transform, width, height, border-top, border-right, border-radius, border-left, border, border-top-color, border-bottom-color, border-left-color,
Fun to know, it has: 48 Lines of code at 1150b & 837b after compression. Actually amazing 😲 huhh.

Cast

Thank you!