Laptop Lid Opening
An isometric hairline laptop whose lid swings open on a spring, then the screen lights up line by line. The hinge runs on one @property angle and CSS trig, so the lid stays true to the grid.
Also known as: hairline animation, isometric laptop animation, laptop opening css, hairline isometric.
HTML
<div class="hln-laptop-lid" role="img" aria-label="A laptop opening and its screen lighting up">
<svg viewBox="-110 -60 220 120" aria-hidden="true">
<g transform="translate(-12.6 -2.3) scale(.78)">
<g><polygon points="-42.24,19 -42.16,18.59 -41.92,18.19 -41.53,17.82 -41,17.5 -3,-1.5 -2.36,-1.76 -1.62,-1.96 -0.83,-2.08 0,-2.12 0.83,-2.08 1.62,-1.96 2.36,-1.76 3,-1.5 61,27.5 61.53,27.82 61.92,28.19 62.16,28.59 62.24,29 62.24,32 62.16,32.41 61.92,32.81 61.53,33.18 61,33.5 23,52.5 22.36,52.76 21.62,52.96 20.83,53.08 20,53.12 19.17,53.08 18.38,52.96 17.64,52.76 17,52.5 -41,23.5 -41.53,23.18 -41.92,22.81 -42.16,22.41 -42.24,22"/><polygon points="61,27.5 61.53,27.82 61.92,28.19 62.16,28.59 62.24,29 62.16,29.41 61.92,29.81 61.53,30.18 61,30.5 23,49.5 22.36,49.76 21.62,49.96 20.83,50.08 20,50.12 19.17,50.08 18.38,49.96 17.64,49.76 17,49.5 -41,20.5 -41.53,20.18 -41.92,19.81 -42.16,19.41 -42.24,19 -42.16,18.59 -41.92,18.19 -41.53,17.82 -41,17.5 -3,-1.5 -2.36,-1.76 -1.62,-1.96 -0.83,-2.08 0,-2.12 0.83,-2.08 1.62,-1.96 2.36,-1.76 3,-1.5"/></g>
<polygon class="hln-laptop-lid-l" points="2.8,4.4 2.94,4.49 3.05,4.58 3.11,4.69 3.13,4.8 3.11,4.91 3.05,5.02 2.94,5.11 2.8,5.2 0.8,6.2 0.63,6.27 0.43,6.32 0.22,6.35 0,6.37 -0.22,6.35 -0.43,6.32 -0.63,6.27 -0.8,6.2 -2.8,5.2 -2.94,5.11 -3.05,5.02 -3.11,4.91 -3.13,4.8 -3.11,4.69 -3.05,4.58 -2.94,4.49 -2.8,4.4 -0.8,3.4 -0.63,3.33 -0.43,3.28 -0.22,3.25 0,3.23 0.22,3.25 0.43,3.28 0.63,3.33 0.8,3.4"/>
<polygon class="hln-laptop-lid-l" points="7.2,6.6 7.34,6.69 7.45,6.78 7.51,6.89 7.53,7 7.51,7.11 7.45,7.22 7.34,7.31 7.2,7.4 5.2,8.4 5.03,8.47 4.83,8.52 4.62,8.55 4.4,8.57 4.18,8.55 3.97,8.52 3.77,8.47 3.6,8.4 1.6,7.4 1.46,7.31 1.35,7.22 1.29,7.11 1.27,7 1.29,6.89 1.35,6.78 1.46,6.69 1.6,6.6 3.6,5.6 3.77,5.53 3.97,5.48 4.18,5.45 4.4,5.43 4.62,5.45 4.83,5.48 5.03,5.53 5.2,5.6"/>
<polygon class="hln-laptop-lid-l" points="11.6,8.8 11.74,8.89 11.85,8.98 11.91,9.09 11.93,9.2 11.91,9.31 11.85,9.42 11.74,9.51 11.6,9.6 9.6,10.6 9.43,10.67 9.23,10.72 9.02,10.75 8.8,10.77 8.58,10.75 8.37,10.72 8.17,10.67 8,10.6 6,9.6 5.86,9.51 5.75,9.42 5.69,9.31 5.67,9.2 5.69,9.09 5.75,8.98 5.86,8.89 6,8.8 8,7.8 8.17,7.73 8.37,7.68 8.58,7.65 8.8,7.63 9.02,7.65 9.23,7.68 9.43,7.73 9.6,7.8"/>
<polygon class="hln-laptop-lid-l" points="16,11 16.14,11.09 16.25,11.18 16.31,11.29 16.33,11.4 16.31,11.51 16.25,11.62 16.14,11.71 16,11.8 14,12.8 13.83,12.87 13.63,12.92 13.42,12.95 13.2,12.97 12.98,12.95 12.77,12.92 12.57,12.87 12.4,12.8 10.4,11.8 10.26,11.71 10.15,11.62 10.09,11.51 10.07,11.4 10.09,11.29 10.15,11.18 10.26,11.09 10.4,11 12.4,10 12.57,9.93 12.77,9.88 12.98,9.85 13.2,9.83 13.42,9.85 13.63,9.88 13.83,9.93 14,10"/>
<polygon class="hln-laptop-lid-l" points="20.4,13.2 20.54,13.29 20.65,13.38 20.71,13.49 20.73,13.6 20.71,13.71 20.65,13.82 20.54,13.91 20.4,14 18.4,15 18.23,15.07 18.03,15.12 17.82,15.15 17.6,15.17 17.38,15.15 17.17,15.12 16.97,15.07 16.8,15 14.8,14 14.66,13.91 14.55,13.82 14.49,13.71 14.47,13.6 14.49,13.49 14.55,13.38 14.66,13.29 14.8,13.2 16.8,12.2 16.97,12.13 17.17,12.08 17.38,12.05 17.6,12.03 17.82,12.05 18.03,12.08 18.23,12.13 18.4,12.2"/>
<polygon class="hln-laptop-lid-l" points="24.8,15.4 24.94,15.49 25.05,15.58 25.11,15.69 25.13,15.8 25.11,15.91 25.05,16.02 24.94,16.11 24.8,16.2 22.8,17.2 22.63,17.27 22.43,17.32 22.22,17.35 22,17.37 21.78,17.35 21.57,17.32 21.37,17.27 21.2,17.2 19.2,16.2 19.06,16.11 18.95,16.02 18.89,15.91 18.87,15.8 18.89,15.69 18.95,15.58 19.06,15.49 19.2,15.4 21.2,14.4 21.37,14.33 21.57,14.28 21.78,14.25 22,14.23 22.22,14.25 22.43,14.28 22.63,14.33 22.8,14.4"/>
<polygon class="hln-laptop-lid-l" points="29.2,17.6 29.34,17.69 29.45,17.78 29.51,17.89 29.53,18 29.51,18.11 29.45,18.22 29.34,18.31 29.2,18.4 27.2,19.4 27.03,19.47 26.83,19.52 26.62,19.55 26.4,19.57 26.18,19.55 25.97,19.52 25.77,19.47 25.6,19.4 23.6,18.4 23.46,18.31 23.35,18.22 23.29,18.11 23.27,18 23.29,17.89 23.35,17.78 23.46,17.69 23.6,17.6 25.6,16.6 25.77,16.53 25.97,16.48 26.18,16.45 26.4,16.43 26.62,16.45 26.83,16.48 27.03,16.53 27.2,16.6"/>
<polygon class="hln-laptop-lid-l" points="33.6,19.8 33.74,19.89 33.85,19.98 33.91,20.09 33.93,20.2 33.91,20.31 33.85,20.42 33.74,20.51 33.6,20.6 31.6,21.6 31.43,21.67 31.23,21.72 31.02,21.75 30.8,21.77 30.58,21.75 30.37,21.72 30.17,21.67 30,21.6 28,20.6 27.86,20.51 27.75,20.42 27.69,20.31 27.67,20.2 27.69,20.09 27.75,19.98 27.86,19.89 28,19.8 30,18.8 30.17,18.73 30.37,18.68 30.58,18.65 30.8,18.63 31.02,18.65 31.23,18.68 31.43,18.73 31.6,18.8"/>
<polygon class="hln-laptop-lid-l" points="38,22 38.14,22.09 38.25,22.18 38.31,22.29 38.33,22.4 38.31,22.51 38.25,22.62 38.14,22.71 38,22.8 36,23.8 35.83,23.87 35.63,23.92 35.42,23.95 35.2,23.97 34.98,23.95 34.77,23.92 34.57,23.87 34.4,23.8 32.4,22.8 32.26,22.71 32.15,22.62 32.09,22.51 32.07,22.4 32.09,22.29 32.15,22.18 32.26,22.09 32.4,22 34.4,21 34.57,20.93 34.77,20.88 34.98,20.85 35.2,20.83 35.42,20.85 35.63,20.88 35.83,20.93 36,21"/>
<polygon class="hln-laptop-lid-l" points="42.4,24.2 42.54,24.29 42.65,24.38 42.71,24.49 42.73,24.6 42.71,24.71 42.65,24.82 42.54,24.91 42.4,25 40.4,26 40.23,26.07 40.03,26.12 39.82,26.15 39.6,26.17 39.38,26.15 39.17,26.12 38.97,26.07 38.8,26 36.8,25 36.66,24.91 36.55,24.82 36.49,24.71 36.47,24.6 36.49,24.49 36.55,24.38 36.66,24.29 36.8,24.2 38.8,23.2 38.97,23.13 39.17,23.08 39.38,23.05 39.6,23.03 39.82,23.05 40.03,23.08 40.23,23.13 40.4,23.2"/>
<polygon class="hln-laptop-lid-l" points="46.8,26.4 46.94,26.49 47.05,26.58 47.11,26.69 47.13,26.8 47.11,26.91 47.05,27.02 46.94,27.11 46.8,27.2 44.8,28.2 44.63,28.27 44.43,28.32 44.22,28.35 44,28.37 43.78,28.35 43.57,28.32 43.37,28.27 43.2,28.2 41.2,27.2 41.06,27.11 40.95,27.02 40.89,26.91 40.87,26.8 40.89,26.69 40.95,26.58 41.06,26.49 41.2,26.4 43.2,25.4 43.37,25.33 43.57,25.28 43.78,25.25 44,25.23 44.22,25.25 44.43,25.28 44.63,25.33 44.8,25.4"/>
<polygon class="hln-laptop-lid-l" points="51.2,28.6 51.34,28.69 51.45,28.78 51.51,28.89 51.53,29 51.51,29.11 51.45,29.22 51.34,29.31 51.2,29.4 49.2,30.4 49.03,30.47 48.83,30.52 48.62,30.55 48.4,30.57 48.18,30.55 47.97,30.52 47.77,30.47 47.6,30.4 45.6,29.4 45.46,29.31 45.35,29.22 45.29,29.11 45.27,29 45.29,28.89 45.35,28.78 45.46,28.69 45.6,28.6 47.6,27.6 47.77,27.53 47.97,27.48 48.18,27.45 48.4,27.43 48.62,27.45 48.83,27.48 49.03,27.53 49.2,27.6"/>
<polygon class="hln-laptop-lid-l" points="-1.8,6.7 -1.66,6.79 -1.55,6.88 -1.49,6.99 -1.47,7.1 -1.49,7.21 -1.55,7.32 -1.66,7.41 -1.8,7.5 -3.8,8.5 -3.97,8.57 -4.17,8.62 -4.38,8.65 -4.6,8.67 -4.82,8.65 -5.03,8.62 -5.23,8.57 -5.4,8.5 -7.4,7.5 -7.54,7.41 -7.65,7.32 -7.71,7.21 -7.73,7.1 -7.71,6.99 -7.65,6.88 -7.54,6.79 -7.4,6.7 -5.4,5.7 -5.23,5.63 -5.03,5.58 -4.82,5.55 -4.6,5.53 -4.38,5.55 -4.17,5.58 -3.97,5.63 -3.8,5.7"/>
<polygon class="hln-laptop-lid-l" points="2.6,8.9 2.74,8.99 2.85,9.08 2.91,9.19 2.93,9.3 2.91,9.41 2.85,9.52 2.74,9.61 2.6,9.7 0.6,10.7 0.43,10.77 0.23,10.82 0.02,10.85 -0.2,10.87 -0.42,10.85 -0.63,10.82 -0.83,10.77 -1,10.7 -3,9.7 -3.14,9.61 -3.25,9.52 -3.31,9.41 -3.33,9.3 -3.31,9.19 -3.25,9.08 -3.14,8.99 -3,8.9 -1,7.9 -0.83,7.83 -0.63,7.78 -0.42,7.75 -0.2,7.73 0.02,7.75 0.23,7.78 0.43,7.83 0.6,7.9"/>
<polygon class="hln-laptop-lid-l" points="7,11.1 7.14,11.19 7.25,11.28 7.31,11.39 7.33,11.5 7.31,11.61 7.25,11.72 7.14,11.81 7,11.9 5,12.9 4.83,12.97 4.63,13.02 4.42,13.05 4.2,13.07 3.98,13.05 3.77,13.02 3.57,12.97 3.4,12.9 1.4,11.9 1.26,11.81 1.15,11.72 1.09,11.61 1.07,11.5 1.09,11.39 1.15,11.28 1.26,11.19 1.4,11.1 3.4,10.1 3.57,10.03 3.77,9.98 3.98,9.95 4.2,9.93 4.42,9.95 4.63,9.98 4.83,10.03 5,10.1"/>
<polygon class="hln-laptop-lid-l" points="11.4,13.3 11.54,13.39 11.65,13.48 11.71,13.59 11.73,13.7 11.71,13.81 11.65,13.92 11.54,14.01 11.4,14.1 9.4,15.1 9.23,15.17 9.03,15.22 8.82,15.25 8.6,15.27 8.38,15.25 8.17,15.22 7.97,15.17 7.8,15.1 5.8,14.1 5.66,14.01 5.55,13.92 5.49,13.81 5.47,13.7 5.49,13.59 5.55,13.48 5.66,13.39 5.8,13.3 7.8,12.3 7.97,12.23 8.17,12.18 8.38,12.15 8.6,12.13 8.82,12.15 9.03,12.18 9.23,12.23 9.4,12.3"/>
<polygon class="hln-laptop-lid-l" points="15.8,15.5 15.94,15.59 16.05,15.68 16.11,15.79 16.13,15.9 16.11,16.01 16.05,16.12 15.94,16.21 15.8,16.3 13.8,17.3 13.63,17.37 13.43,17.42 13.22,17.45 13,17.47 12.78,17.45 12.57,17.42 12.37,17.37 12.2,17.3 10.2,16.3 10.06,16.21 9.95,16.12 9.89,16.01 9.87,15.9 9.89,15.79 9.95,15.68 10.06,15.59 10.2,15.5 12.2,14.5 12.37,14.43 12.57,14.38 12.78,14.35 13,14.33 13.22,14.35 13.43,14.38 13.63,14.43 13.8,14.5"/>
<polygon class="hln-laptop-lid-l" points="20.2,17.7 20.34,17.79 20.45,17.88 20.51,17.99 20.53,18.1 20.51,18.21 20.45,18.32 20.34,18.41 20.2,18.5 18.2,19.5 18.03,19.57 17.83,19.62 17.62,19.65 17.4,19.67 17.18,19.65 16.97,19.62 16.77,19.57 16.6,19.5 14.6,18.5 14.46,18.41 14.35,18.32 14.29,18.21 14.27,18.1 14.29,17.99 14.35,17.88 14.46,17.79 14.6,17.7 16.6,16.7 16.77,16.63 16.97,16.58 17.18,16.55 17.4,16.53 17.62,16.55 17.83,16.58 18.03,16.63 18.2,16.7"/>
<polygon class="hln-laptop-lid-l" points="24.6,19.9 24.74,19.99 24.85,20.08 24.91,20.19 24.93,20.3 24.91,20.41 24.85,20.52 24.74,20.61 24.6,20.7 22.6,21.7 22.43,21.77 22.23,21.82 22.02,21.85 21.8,21.87 21.58,21.85 21.37,21.82 21.17,21.77 21,21.7 19,20.7 18.86,20.61 18.75,20.52 18.69,20.41 18.67,20.3 18.69,20.19 18.75,20.08 18.86,19.99 19,19.9 21,18.9 21.17,18.83 21.37,18.78 21.58,18.75 21.8,18.73 22.02,18.75 22.23,18.78 22.43,18.83 22.6,18.9"/>
<polygon class="hln-laptop-lid-l" points="29,22.1 29.14,22.19 29.25,22.28 29.31,22.39 29.33,22.5 29.31,22.61 29.25,22.72 29.14,22.81 29,22.9 27,23.9 26.83,23.97 26.63,24.02 26.42,24.05 26.2,24.07 25.98,24.05 25.77,24.02 25.57,23.97 25.4,23.9 23.4,22.9 23.26,22.81 23.15,22.72 23.09,22.61 23.07,22.5 23.09,22.39 23.15,22.28 23.26,22.19 23.4,22.1 25.4,21.1 25.57,21.03 25.77,20.98 25.98,20.95 26.2,20.93 26.42,20.95 26.63,20.98 26.83,21.03 27,21.1"/>
<polygon class="hln-laptop-lid-l" points="33.4,24.3 33.54,24.39 33.65,24.48 33.71,24.59 33.73,24.7 33.71,24.81 33.65,24.92 33.54,25.01 33.4,25.1 31.4,26.1 31.23,26.17 31.03,26.22 30.82,26.25 30.6,26.27 30.38,26.25 30.17,26.22 29.97,26.17 29.8,26.1 27.8,25.1 27.66,25.01 27.55,24.92 27.49,24.81 27.47,24.7 27.49,24.59 27.55,24.48 27.66,24.39 27.8,24.3 29.8,23.3 29.97,23.23 30.17,23.18 30.38,23.15 30.6,23.13 30.82,23.15 31.03,23.18 31.23,23.23 31.4,23.3"/>
<polygon class="hln-laptop-lid-l" points="37.8,26.5 37.94,26.59 38.05,26.68 38.11,26.79 38.13,26.9 38.11,27.01 38.05,27.12 37.94,27.21 37.8,27.3 35.8,28.3 35.63,28.37 35.43,28.42 35.22,28.45 35,28.47 34.78,28.45 34.57,28.42 34.37,28.37 34.2,28.3 32.2,27.3 32.06,27.21 31.95,27.12 31.89,27.01 31.87,26.9 31.89,26.79 31.95,26.68 32.06,26.59 32.2,26.5 34.2,25.5 34.37,25.43 34.57,25.38 34.78,25.35 35,25.33 35.22,25.35 35.43,25.38 35.63,25.43 35.8,25.5"/>
<polygon class="hln-laptop-lid-l" points="42.2,28.7 42.34,28.79 42.45,28.88 42.51,28.99 42.53,29.1 42.51,29.21 42.45,29.32 42.34,29.41 42.2,29.5 40.2,30.5 40.03,30.57 39.83,30.62 39.62,30.65 39.4,30.67 39.18,30.65 38.97,30.62 38.77,30.57 38.6,30.5 36.6,29.5 36.46,29.41 36.35,29.32 36.29,29.21 36.27,29.1 36.29,28.99 36.35,28.88 36.46,28.79 36.6,28.7 38.6,27.7 38.77,27.63 38.97,27.58 39.18,27.55 39.4,27.53 39.62,27.55 39.83,27.58 40.03,27.63 40.2,27.7"/>
<polygon class="hln-laptop-lid-l" points="46.6,30.9 46.74,30.99 46.85,31.08 46.91,31.19 46.93,31.3 46.91,31.41 46.85,31.52 46.74,31.61 46.6,31.7 44.6,32.7 44.43,32.77 44.23,32.82 44.02,32.85 43.8,32.87 43.58,32.85 43.37,32.82 43.17,32.77 43,32.7 41,31.7 40.86,31.61 40.75,31.52 40.69,31.41 40.67,31.3 40.69,31.19 40.75,31.08 40.86,30.99 41,30.9 43,29.9 43.17,29.83 43.37,29.78 43.58,29.75 43.8,29.73 44.02,29.75 44.23,29.78 44.43,29.83 44.6,29.9"/>
<polygon class="hln-laptop-lid-l" points="-6.4,9 -6.26,9.09 -6.15,9.18 -6.09,9.29 -6.07,9.4 -6.09,9.51 -6.15,9.62 -6.26,9.71 -6.4,9.8 -8.4,10.8 -8.57,10.87 -8.77,10.92 -8.98,10.95 -9.2,10.97 -9.42,10.95 -9.63,10.92 -9.83,10.87 -10,10.8 -12,9.8 -12.14,9.71 -12.25,9.62 -12.31,9.51 -12.33,9.4 -12.31,9.29 -12.25,9.18 -12.14,9.09 -12,9 -10,8 -9.83,7.93 -9.63,7.88 -9.42,7.85 -9.2,7.83 -8.98,7.85 -8.77,7.88 -8.57,7.93 -8.4,8"/>
<polygon class="hln-laptop-lid-l" points="-2,11.2 -1.86,11.29 -1.75,11.38 -1.69,11.49 -1.67,11.6 -1.69,11.71 -1.75,11.82 -1.86,11.91 -2,12 -4,13 -4.17,13.07 -4.37,13.12 -4.58,13.15 -4.8,13.17 -5.02,13.15 -5.23,13.12 -5.43,13.07 -5.6,13 -7.6,12 -7.74,11.91 -7.85,11.82 -7.91,11.71 -7.93,11.6 -7.91,11.49 -7.85,11.38 -7.74,11.29 -7.6,11.2 -5.6,10.2 -5.43,10.13 -5.23,10.08 -5.02,10.05 -4.8,10.03 -4.58,10.05 -4.37,10.08 -4.17,10.13 -4,10.2"/>
<polygon class="hln-laptop-lid-l" points="2.4,13.4 2.54,13.49 2.65,13.58 2.71,13.69 2.73,13.8 2.71,13.91 2.65,14.02 2.54,14.11 2.4,14.2 0.4,15.2 0.23,15.27 0.03,15.32 -0.18,15.35 -0.4,15.37 -0.62,15.35 -0.83,15.32 -1.03,15.27 -1.2,15.2 -3.2,14.2 -3.34,14.11 -3.45,14.02 -3.51,13.91 -3.53,13.8 -3.51,13.69 -3.45,13.58 -3.34,13.49 -3.2,13.4 -1.2,12.4 -1.03,12.33 -0.83,12.28 -0.62,12.25 -0.4,12.23 -0.18,12.25 0.03,12.28 0.23,12.33 0.4,12.4"/>
<polygon class="hln-laptop-lid-l" points="6.8,15.6 6.94,15.69 7.05,15.78 7.11,15.89 7.13,16 7.11,16.11 7.05,16.22 6.94,16.31 6.8,16.4 4.8,17.4 4.63,17.47 4.43,17.52 4.22,17.55 4,17.57 3.78,17.55 3.57,17.52 3.37,17.47 3.2,17.4 1.2,16.4 1.06,16.31 0.95,16.22 0.89,16.11 0.87,16 0.89,15.89 0.95,15.78 1.06,15.69 1.2,15.6 3.2,14.6 3.37,14.53 3.57,14.48 3.78,14.45 4,14.43 4.22,14.45 4.43,14.48 4.63,14.53 4.8,14.6"/>
<polygon class="hln-laptop-lid-l" points="11.2,17.8 11.34,17.89 11.45,17.98 11.51,18.09 11.53,18.2 11.51,18.31 11.45,18.42 11.34,18.51 11.2,18.6 9.2,19.6 9.03,19.67 8.83,19.72 8.62,19.75 8.4,19.77 8.18,19.75 7.97,19.72 7.77,19.67 7.6,19.6 5.6,18.6 5.46,18.51 5.35,18.42 5.29,18.31 5.27,18.2 5.29,18.09 5.35,17.98 5.46,17.89 5.6,17.8 7.6,16.8 7.77,16.73 7.97,16.68 8.18,16.65 8.4,16.63 8.62,16.65 8.83,16.68 9.03,16.73 9.2,16.8"/>
<polygon class="hln-laptop-lid-l" points="15.6,20 15.74,20.09 15.85,20.18 15.91,20.29 15.93,20.4 15.91,20.51 15.85,20.62 15.74,20.71 15.6,20.8 13.6,21.8 13.43,21.87 13.23,21.92 13.02,21.95 12.8,21.97 12.58,21.95 12.37,21.92 12.17,21.87 12,21.8 10,20.8 9.86,20.71 9.75,20.62 9.69,20.51 9.67,20.4 9.69,20.29 9.75,20.18 9.86,20.09 10,20 12,19 12.17,18.93 12.37,18.88 12.58,18.85 12.8,18.83 13.02,18.85 13.23,18.88 13.43,18.93 13.6,19"/>
<polygon class="hln-laptop-lid-l" points="20,22.2 20.14,22.29 20.25,22.38 20.31,22.49 20.33,22.6 20.31,22.71 20.25,22.82 20.14,22.91 20,23 18,24 17.83,24.07 17.63,24.12 17.42,24.15 17.2,24.17 16.98,24.15 16.77,24.12 16.57,24.07 16.4,24 14.4,23 14.26,22.91 14.15,22.82 14.09,22.71 14.07,22.6 14.09,22.49 14.15,22.38 14.26,22.29 14.4,22.2 16.4,21.2 16.57,21.13 16.77,21.08 16.98,21.05 17.2,21.03 17.42,21.05 17.63,21.08 17.83,21.13 18,21.2"/>
<polygon class="hln-laptop-lid-l" points="24.4,24.4 24.54,24.49 24.65,24.58 24.71,24.69 24.73,24.8 24.71,24.91 24.65,25.02 24.54,25.11 24.4,25.2 22.4,26.2 22.23,26.27 22.03,26.32 21.82,26.35 21.6,26.37 21.38,26.35 21.17,26.32 20.97,26.27 20.8,26.2 18.8,25.2 18.66,25.11 18.55,25.02 18.49,24.91 18.47,24.8 18.49,24.69 18.55,24.58 18.66,24.49 18.8,24.4 20.8,23.4 20.97,23.33 21.17,23.28 21.38,23.25 21.6,23.23 21.82,23.25 22.03,23.28 22.23,23.33 22.4,23.4"/>
<polygon class="hln-laptop-lid-l" points="28.8,26.6 28.94,26.69 29.05,26.78 29.11,26.89 29.13,27 29.11,27.11 29.05,27.22 28.94,27.31 28.8,27.4 26.8,28.4 26.63,28.47 26.43,28.52 26.22,28.55 26,28.57 25.78,28.55 25.57,28.52 25.37,28.47 25.2,28.4 23.2,27.4 23.06,27.31 22.95,27.22 22.89,27.11 22.87,27 22.89,26.89 22.95,26.78 23.06,26.69 23.2,26.6 25.2,25.6 25.37,25.53 25.57,25.48 25.78,25.45 26,25.43 26.22,25.45 26.43,25.48 26.63,25.53 26.8,25.6"/>
<polygon class="hln-laptop-lid-l" points="33.2,28.8 33.34,28.89 33.45,28.98 33.51,29.09 33.53,29.2 33.51,29.31 33.45,29.42 33.34,29.51 33.2,29.6 31.2,30.6 31.03,30.67 30.83,30.72 30.62,30.75 30.4,30.77 30.18,30.75 29.97,30.72 29.77,30.67 29.6,30.6 27.6,29.6 27.46,29.51 27.35,29.42 27.29,29.31 27.27,29.2 27.29,29.09 27.35,28.98 27.46,28.89 27.6,28.8 29.6,27.8 29.77,27.73 29.97,27.68 30.18,27.65 30.4,27.63 30.62,27.65 30.83,27.68 31.03,27.73 31.2,27.8"/>
<polygon class="hln-laptop-lid-l" points="37.6,31 37.74,31.09 37.85,31.18 37.91,31.29 37.93,31.4 37.91,31.51 37.85,31.62 37.74,31.71 37.6,31.8 35.6,32.8 35.43,32.87 35.23,32.92 35.02,32.95 34.8,32.97 34.58,32.95 34.37,32.92 34.17,32.87 34,32.8 32,31.8 31.86,31.71 31.75,31.62 31.69,31.51 31.67,31.4 31.69,31.29 31.75,31.18 31.86,31.09 32,31 34,30 34.17,29.93 34.37,29.88 34.58,29.85 34.8,29.83 35.02,29.85 35.23,29.88 35.43,29.93 35.6,30"/>
<polygon class="hln-laptop-lid-l" points="42,33.2 42.14,33.29 42.25,33.38 42.31,33.49 42.33,33.6 42.31,33.71 42.25,33.82 42.14,33.91 42,34 40,35 39.83,35.07 39.63,35.12 39.42,35.15 39.2,35.17 38.98,35.15 38.77,35.12 38.57,35.07 38.4,35 36.4,34 36.26,33.91 36.15,33.82 36.09,33.71 36.07,33.6 36.09,33.49 36.15,33.38 36.26,33.29 36.4,33.2 38.4,32.2 38.57,32.13 38.77,32.08 38.98,32.05 39.2,32.03 39.42,32.05 39.63,32.08 39.83,32.13 40,32.2"/>
<polygon class="hln-laptop-lid-l" points="-11,11.3 -10.86,11.39 -10.75,11.48 -10.69,11.59 -10.67,11.7 -10.69,11.81 -10.75,11.92 -10.86,12.01 -11,12.1 -13,13.1 -13.17,13.17 -13.37,13.22 -13.58,13.25 -13.8,13.27 -14.02,13.25 -14.23,13.22 -14.43,13.17 -14.6,13.1 -16.6,12.1 -16.74,12.01 -16.85,11.92 -16.91,11.81 -16.93,11.7 -16.91,11.59 -16.85,11.48 -16.74,11.39 -16.6,11.3 -14.6,10.3 -14.43,10.23 -14.23,10.18 -14.02,10.15 -13.8,10.13 -13.58,10.15 -13.37,10.18 -13.17,10.23 -13,10.3"/>
<polygon class="hln-laptop-lid-l" points="-6.6,13.5 -6.46,13.59 -6.35,13.68 -6.29,13.79 -6.27,13.9 -6.29,14.01 -6.35,14.12 -6.46,14.21 -6.6,14.3 -8.6,15.3 -8.77,15.37 -8.97,15.42 -9.18,15.45 -9.4,15.47 -9.62,15.45 -9.83,15.42 -10.03,15.37 -10.2,15.3 -12.2,14.3 -12.34,14.21 -12.45,14.12 -12.51,14.01 -12.53,13.9 -12.51,13.79 -12.45,13.68 -12.34,13.59 -12.2,13.5 -10.2,12.5 -10.03,12.43 -9.83,12.38 -9.62,12.35 -9.4,12.33 -9.18,12.35 -8.97,12.38 -8.77,12.43 -8.6,12.5"/>
<polygon class="hln-laptop-lid-l" points="-2.2,15.7 -2.06,15.79 -1.95,15.88 -1.89,15.99 -1.87,16.1 -1.89,16.21 -1.95,16.32 -2.06,16.41 -2.2,16.5 -4.2,17.5 -4.37,17.57 -4.57,17.62 -4.78,17.65 -5,17.67 -5.22,17.65 -5.43,17.62 -5.63,17.57 -5.8,17.5 -7.8,16.5 -7.94,16.41 -8.05,16.32 -8.11,16.21 -8.13,16.1 -8.11,15.99 -8.05,15.88 -7.94,15.79 -7.8,15.7 -5.8,14.7 -5.63,14.63 -5.43,14.58 -5.22,14.55 -5,14.53 -4.78,14.55 -4.57,14.58 -4.37,14.63 -4.2,14.7"/>
<polygon class="hln-laptop-lid-l" points="2.2,17.9 2.34,17.99 2.45,18.08 2.51,18.19 2.53,18.3 2.51,18.41 2.45,18.52 2.34,18.61 2.2,18.7 0.2,19.7 0.03,19.77 -0.17,19.82 -0.38,19.85 -0.6,19.87 -0.82,19.85 -1.03,19.82 -1.23,19.77 -1.4,19.7 -3.4,18.7 -3.54,18.61 -3.65,18.52 -3.71,18.41 -3.73,18.3 -3.71,18.19 -3.65,18.08 -3.54,17.99 -3.4,17.9 -1.4,16.9 -1.23,16.83 -1.03,16.78 -0.82,16.75 -0.6,16.73 -0.38,16.75 -0.17,16.78 0.03,16.83 0.2,16.9"/>
<polygon class="hln-laptop-lid-l" points="19.8,26.7 19.94,26.79 20.05,26.88 20.11,26.99 20.13,27.1 20.11,27.21 20.05,27.32 19.94,27.41 19.8,27.5 17.8,28.5 17.63,28.57 17.43,28.62 17.22,28.65 17,28.67 16.78,28.65 16.57,28.62 16.37,28.57 16.2,28.5 1,20.9 0.86,20.81 0.75,20.72 0.69,20.61 0.67,20.5 0.69,20.39 0.75,20.28 0.86,20.19 1,20.1 3,19.1 3.17,19.03 3.37,18.98 3.58,18.95 3.8,18.93 4.02,18.95 4.23,18.98 4.43,19.03 4.6,19.1"/>
<polygon class="hln-laptop-lid-l" points="24.2,28.9 24.34,28.99 24.45,29.08 24.51,29.19 24.53,29.3 24.51,29.41 24.45,29.52 24.34,29.61 24.2,29.7 22.2,30.7 22.03,30.77 21.83,30.82 21.62,30.85 21.4,30.87 21.18,30.85 20.97,30.82 20.77,30.77 20.6,30.7 18.6,29.7 18.46,29.61 18.35,29.52 18.29,29.41 18.27,29.3 18.29,29.19 18.35,29.08 18.46,28.99 18.6,28.9 20.6,27.9 20.77,27.83 20.97,27.78 21.18,27.75 21.4,27.73 21.62,27.75 21.83,27.78 22.03,27.83 22.2,27.9"/>
<polygon class="hln-laptop-lid-l" points="28.6,31.1 28.74,31.19 28.85,31.28 28.91,31.39 28.93,31.5 28.91,31.61 28.85,31.72 28.74,31.81 28.6,31.9 26.6,32.9 26.43,32.97 26.23,33.02 26.02,33.05 25.8,33.07 25.58,33.05 25.37,33.02 25.17,32.97 25,32.9 23,31.9 22.86,31.81 22.75,31.72 22.69,31.61 22.67,31.5 22.69,31.39 22.75,31.28 22.86,31.19 23,31.1 25,30.1 25.17,30.03 25.37,29.98 25.58,29.95 25.8,29.93 26.02,29.95 26.23,29.98 26.43,30.03 26.6,30.1"/>
<polygon class="hln-laptop-lid-l" points="33,33.3 33.14,33.39 33.25,33.48 33.31,33.59 33.33,33.7 33.31,33.81 33.25,33.92 33.14,34.01 33,34.1 31,35.1 30.83,35.17 30.63,35.22 30.42,35.25 30.2,35.27 29.98,35.25 29.77,35.22 29.57,35.17 29.4,35.1 27.4,34.1 27.26,34.01 27.15,33.92 27.09,33.81 27.07,33.7 27.09,33.59 27.15,33.48 27.26,33.39 27.4,33.3 29.4,32.3 29.57,32.23 29.77,32.18 29.98,32.15 30.2,32.13 30.42,32.15 30.63,32.18 30.83,32.23 31,32.3"/>
<polygon class="hln-laptop-lid-l" points="37.4,35.5 37.54,35.59 37.65,35.68 37.71,35.79 37.73,35.9 37.71,36.01 37.65,36.12 37.54,36.21 37.4,36.3 35.4,37.3 35.23,37.37 35.03,37.42 34.82,37.45 34.6,37.47 34.38,37.45 34.17,37.42 33.97,37.37 33.8,37.3 31.8,36.3 31.66,36.21 31.55,36.12 31.49,36.01 31.47,35.9 31.49,35.79 31.55,35.68 31.66,35.59 31.8,35.5 33.8,34.5 33.97,34.43 34.17,34.38 34.38,34.35 34.6,34.33 34.82,34.35 35.03,34.38 35.23,34.43 35.4,34.5"/>
<polygon class="hln-laptop-lid-l" points="12,30.5 12.26,30.66 12.46,30.84 12.58,31.04 12.62,31.25 12.58,31.46 12.46,31.66 12.26,31.84 12,32 3,36.5 2.68,36.63 2.31,36.73 1.91,36.79 1.5,36.81 1.09,36.79 0.69,36.73 0.32,36.63 0,36.5 -15,29 -15.26,28.84 -15.46,28.66 -15.58,28.46 -15.62,28.25 -15.58,28.04 -15.46,27.84 -15.26,27.66 -15,27.5 -6,23 -5.68,22.87 -5.31,22.77 -4.91,22.71 -4.5,22.69 -4.09,22.71 -3.69,22.77 -3.32,22.87 -3,23"/>
<g transform="translate(0 -3.4) rotate(26.565)"><g class="hln-laptop-lid-lid"><rect x="0" y="0" width="64" height="40" rx="3"/><g class="hln-laptop-lid-back"><circle class="hln-laptop-lid-l" cx="32" cy="20" r="3.2"/></g><g class="hln-laptop-lid-scr"><rect class="hln-laptop-lid-l" x="3" y="3" width="58" height="34" rx="1.5"/><line class="hln-laptop-lid-c" style="--i: 0" x1="8" y1="33" x2="30" y2="33"/><line class="hln-laptop-lid-c" style="--i: 1" x1="12" y1="29" x2="50" y2="29"/><line class="hln-laptop-lid-c" style="--i: 2" x1="12" y1="25" x2="42" y2="25"/><line class="hln-laptop-lid-c" style="--i: 3" x1="16" y1="21" x2="50" y2="21"/><line class="hln-laptop-lid-c" style="--i: 4" x1="16" y1="17" x2="40" y2="17"/><line class="hln-laptop-lid-c" style="--i: 5" x1="8" y1="13" x2="26" y2="13"/><rect class="hln-laptop-lid-af hln-laptop-lid-cur" x="27.5" y="11.6" width="1.6" height="2.8"/></g></g></g>
</g>
</svg>
</div>CSS
.hln-laptop-lid {
--c: var(--hln-color, #ff4f2e);
font-size: var(--hln-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 22em;
height: 12em;
border-radius: 0.75em;
background: #f6f5f1;
overflow: hidden;
}
.hln-laptop-lid svg {
width: 100%;
height: 100%;
overflow: visible;
fill: #ffffff;
stroke: #1c1d21;
stroke-width: 1.25;
stroke-linejoin: round;
stroke-linecap: round;
}
.hln-laptop-lid svg * {
vector-effect: non-scaling-stroke;
}
.hln-laptop-lid .hln-laptop-lid-l {
stroke: #9a9ca3;
}
.hln-laptop-lid .hln-laptop-lid-af {
fill: var(--c);
stroke: var(--c);
}
@property --hln-laptop-lid-t {
syntax: "<angle>";
inherits: true;
initial-value: 105deg;
}
.hln-laptop-lid .hln-laptop-lid-lid {
--hln-laptop-lid-t: 105deg;
transform: scale(1.118, calc((cos(var(--hln-laptop-lid-t)) - sin(var(--hln-laptop-lid-t))) * 0.8944)) skewX(atan((-1.5 * cos(var(--hln-laptop-lid-t)) - sin(var(--hln-laptop-lid-t))) * 0.4));
animation: hln-laptop-lid-open 6s infinite;
}
.hln-laptop-lid .hln-laptop-lid-scr {
opacity: clamp(0, (sin(var(--hln-laptop-lid-t)) - cos(var(--hln-laptop-lid-t))) * 30, 1);
}
.hln-laptop-lid .hln-laptop-lid-back {
opacity: clamp(0, (cos(var(--hln-laptop-lid-t)) - sin(var(--hln-laptop-lid-t))) * 30, 1);
}
.hln-laptop-lid .hln-laptop-lid-c {
stroke: #9a9ca3;
transform-box: fill-box;
transform-origin: 0 50%;
animation: hln-laptop-lid-type 6s calc(var(--i) * 0.11s) infinite both;
}
.hln-laptop-lid .hln-laptop-lid-cur {
animation: hln-laptop-lid-blink 6s infinite;
}
@keyframes hln-laptop-lid-open {
0% { --hln-laptop-lid-t: 0deg; }
8.33% { --hln-laptop-lid-t: 0deg; animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
31.67% { --hln-laptop-lid-t: 105deg; }
78.33% { --hln-laptop-lid-t: 105deg; animation-timing-function: cubic-bezier(.65,0,.35,1); }
93.33% { --hln-laptop-lid-t: 0deg; }
100% { --hln-laptop-lid-t: 0deg; }
}
@keyframes hln-laptop-lid-type {
0% { transform: scaleX(0); }
24.17% { transform: scaleX(0); animation-timing-function: cubic-bezier(.22,1,.36,1); }
30.83% { transform: scaleX(1); }
86.67% { transform: scaleX(1); }
87.5% { transform: scaleX(0); }
100% { transform: scaleX(0); }
}
@keyframes hln-laptop-lid-blink {
0% { opacity: 0; }
38.33% { opacity: 0; }
38.67% { opacity: 1; }
50% { opacity: 1; }
50.33% { opacity: 0; }
56.67% { opacity: 0; }
57% { opacity: 1; }
100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hln-laptop-lid * {
animation: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.hln-laptop-lid, .hln-laptop-lid *, .hln-laptop-lid::before, .hln-laptop-lid::after, .hln-laptop-lid *::before, .hln-laptop-lid *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hln-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hln-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.