Phone Notification Card

<div class="hln-phone-notification" role="img" aria-label="A notification sliding onto a phone screen">
  <svg viewBox="-110 -60 220 120" aria-hidden="true">
    <g transform="translate(16.5 -23.8) scale(1.1)">
      <g><polygon points="-60.78,28.5 -60.63,27.74 -60.19,27.01 -59.47,26.34 -58.5,25.75 -5.5,-0.75 -4.32,-1.23 -2.98,-1.59 -1.52,-1.81 0,-1.89 1.52,-1.81 2.98,-1.59 4.32,-1.23 5.5,-0.75 28.5,10.75 29.47,11.34 30.19,12.01 30.63,12.74 30.78,13.5 30.78,17 30.63,17.76 30.19,18.49 29.47,19.16 28.5,19.75 -24.5,46.25 -25.68,46.73 -27.02,47.09 -28.48,47.31 -30,47.39 -31.52,47.31 -32.98,47.09 -34.32,46.73 -35.5,46.25 -58.5,34.75 -59.47,34.16 -60.19,33.49 -60.63,32.76 -60.78,32"/><polygon points="28.5,10.75 29.47,11.34 30.19,12.01 30.63,12.74 30.78,13.5 30.63,14.26 30.19,14.99 29.47,15.66 28.5,16.25 -24.5,42.75 -25.68,43.23 -27.02,43.59 -28.48,43.81 -30,43.89 -31.52,43.81 -32.98,43.59 -34.32,43.23 -35.5,42.75 -58.5,31.25 -59.47,30.66 -60.19,29.99 -60.63,29.26 -60.78,28.5 -60.63,27.74 -60.19,27.01 -59.47,26.34 -58.5,25.75 -5.5,-0.75 -4.32,-1.23 -2.98,-1.59 -1.52,-1.81 0,-1.89 1.52,-1.81 2.98,-1.59 4.32,-1.23 5.5,-0.75"/></g>
      <polygon class="hln-phone-notification-l" points="26,11.5 26.7,11.93 27.23,12.42 27.55,12.95 27.66,13.5 27.55,14.05 27.23,14.58 26.7,15.07 26,15.5 -26,41.5 -26.86,41.85 -27.84,42.11 -28.9,42.27 -30,42.33 -31.1,42.27 -32.16,42.11 -33.14,41.85 -34,41.5 -56,30.5 -56.7,30.07 -57.23,29.58 -57.55,29.05 -57.66,28.5 -57.55,27.95 -57.23,27.42 -56.7,26.93 -56,26.5 -4,0.5 -3.14,0.15 -2.16,-0.11 -1.1,-0.27 0,-0.33 1.1,-0.27 2.16,-0.11 3.14,0.15 4,0.5"/>
      <polygon class="hln-phone-notification-l" points="15.2,8.6 15.43,8.74 15.6,8.9 15.7,9.07 15.74,9.25 15.7,9.43 15.6,9.6 15.43,9.76 15.2,9.9 15.2,9.9 14.92,10.01 14.6,10.1 14.26,10.15 13.9,10.17 13.54,10.15 13.2,10.1 12.88,10.01 12.6,9.9 7.2,7.2 6.97,7.06 6.8,6.9 6.7,6.73 6.66,6.55 6.7,6.37 6.8,6.2 6.97,6.04 7.2,5.9 7.2,5.9 7.48,5.79 7.8,5.7 8.14,5.65 8.5,5.63 8.86,5.65 9.2,5.7 9.52,5.79 9.8,5.9"/>
      <polygon class="hln-phone-notification-l" points="-16.7,13.15 -16.49,13.28 -16.33,13.43 -16.24,13.58 -16.2,13.75 -16.24,13.92 -16.33,14.07 -16.49,14.22 -16.7,14.35 -18.8,15.4 -19.06,15.51 -19.35,15.58 -19.67,15.63 -20,15.65 -20.33,15.63 -20.65,15.58 -20.94,15.51 -21.2,15.4 -23.3,14.35 -23.51,14.22 -23.67,14.07 -23.76,13.92 -23.8,13.75 -23.76,13.58 -23.67,13.43 -23.51,13.28 -23.3,13.15 -21.2,12.1 -20.94,11.99 -20.65,11.92 -20.33,11.87 -20,11.85 -19.67,11.87 -19.35,11.92 -19.06,11.99 -18.8,12.1"/>
      <polygon class="hln-phone-notification-l" points="-10.2,16.4 -9.99,16.53 -9.83,16.68 -9.74,16.83 -9.7,17 -9.74,17.17 -9.83,17.32 -9.99,17.47 -10.2,17.6 -12.3,18.65 -12.56,18.76 -12.85,18.83 -13.17,18.88 -13.5,18.9 -13.83,18.88 -14.15,18.83 -14.44,18.76 -14.7,18.65 -16.8,17.6 -17.01,17.47 -17.17,17.32 -17.26,17.17 -17.3,17 -17.26,16.83 -17.17,16.68 -17.01,16.53 -16.8,16.4 -14.7,15.35 -14.44,15.24 -14.15,15.17 -13.83,15.12 -13.5,15.1 -13.17,15.12 -12.85,15.17 -12.56,15.24 -12.3,15.35"/>
      <polygon class="hln-phone-notification-l" points="-3.7,19.65 -3.49,19.78 -3.33,19.93 -3.24,20.08 -3.2,20.25 -3.24,20.42 -3.33,20.57 -3.49,20.72 -3.7,20.85 -5.8,21.9 -6.06,22.01 -6.35,22.08 -6.67,22.13 -7,22.15 -7.33,22.13 -7.65,22.08 -7.94,22.01 -8.2,21.9 -10.3,20.85 -10.51,20.72 -10.67,20.57 -10.76,20.42 -10.8,20.25 -10.76,20.08 -10.67,19.93 -10.51,19.78 -10.3,19.65 -8.2,18.6 -7.94,18.49 -7.65,18.42 -7.33,18.37 -7,18.35 -6.67,18.37 -6.35,18.42 -6.06,18.49 -5.8,18.6"/>
      <polygon class="hln-phone-notification-l" points="2.8,22.9 3.01,23.03 3.17,23.18 3.26,23.33 3.3,23.5 3.26,23.67 3.17,23.82 3.01,23.97 2.8,24.1 0.7,25.15 0.44,25.26 0.15,25.33 -0.17,25.38 -0.5,25.4 -0.83,25.38 -1.15,25.33 -1.44,25.26 -1.7,25.15 -3.8,24.1 -4.01,23.97 -4.17,23.82 -4.26,23.67 -4.3,23.5 -4.26,23.33 -4.17,23.18 -4.01,23.03 -3.8,22.9 -1.7,21.85 -1.44,21.74 -1.15,21.67 -0.83,21.62 -0.5,21.6 -0.17,21.62 0.15,21.67 0.44,21.74 0.7,21.85"/>
      <polygon class="hln-phone-notification-l" points="-24.7,17.15 -24.49,17.28 -24.33,17.43 -24.24,17.58 -24.2,17.75 -24.24,17.92 -24.33,18.07 -24.49,18.22 -24.7,18.35 -26.8,19.4 -27.06,19.51 -27.35,19.58 -27.67,19.63 -28,19.65 -28.33,19.63 -28.65,19.58 -28.94,19.51 -29.2,19.4 -31.3,18.35 -31.51,18.22 -31.67,18.07 -31.76,17.92 -31.8,17.75 -31.76,17.58 -31.67,17.43 -31.51,17.28 -31.3,17.15 -29.2,16.1 -28.94,15.99 -28.65,15.92 -28.33,15.87 -28,15.85 -27.67,15.87 -27.35,15.92 -27.06,15.99 -26.8,16.1"/>
      <polygon class="hln-phone-notification-l" points="-18.2,20.4 -17.99,20.53 -17.83,20.68 -17.74,20.83 -17.7,21 -17.74,21.17 -17.83,21.32 -17.99,21.47 -18.2,21.6 -20.3,22.65 -20.56,22.76 -20.85,22.83 -21.17,22.88 -21.5,22.9 -21.83,22.88 -22.15,22.83 -22.44,22.76 -22.7,22.65 -24.8,21.6 -25.01,21.47 -25.17,21.32 -25.26,21.17 -25.3,21 -25.26,20.83 -25.17,20.68 -25.01,20.53 -24.8,20.4 -22.7,19.35 -22.44,19.24 -22.15,19.17 -21.83,19.12 -21.5,19.1 -21.17,19.12 -20.85,19.17 -20.56,19.24 -20.3,19.35"/>
      <polygon class="hln-phone-notification-l" points="-11.7,23.65 -11.49,23.78 -11.33,23.93 -11.24,24.08 -11.2,24.25 -11.24,24.42 -11.33,24.57 -11.49,24.72 -11.7,24.85 -13.8,25.9 -14.06,26.01 -14.35,26.08 -14.67,26.13 -15,26.15 -15.33,26.13 -15.65,26.08 -15.94,26.01 -16.2,25.9 -18.3,24.85 -18.51,24.72 -18.67,24.57 -18.76,24.42 -18.8,24.25 -18.76,24.08 -18.67,23.93 -18.51,23.78 -18.3,23.65 -16.2,22.6 -15.94,22.49 -15.65,22.42 -15.33,22.37 -15,22.35 -14.67,22.37 -14.35,22.42 -14.06,22.49 -13.8,22.6"/>
      <polygon class="hln-phone-notification-l" points="-5.2,26.9 -4.99,27.03 -4.83,27.18 -4.74,27.33 -4.7,27.5 -4.74,27.67 -4.83,27.82 -4.99,27.97 -5.2,28.1 -7.3,29.15 -7.56,29.26 -7.85,29.33 -8.17,29.38 -8.5,29.4 -8.83,29.38 -9.15,29.33 -9.44,29.26 -9.7,29.15 -11.8,28.1 -12.01,27.97 -12.17,27.82 -12.26,27.67 -12.3,27.5 -12.26,27.33 -12.17,27.18 -12.01,27.03 -11.8,26.9 -9.7,25.85 -9.44,25.74 -9.15,25.67 -8.83,25.62 -8.5,25.6 -8.17,25.62 -7.85,25.67 -7.56,25.74 -7.3,25.85"/>
      <polygon class="hln-phone-notification-l" points="-32.7,21.15 -32.49,21.28 -32.33,21.43 -32.24,21.58 -32.2,21.75 -32.24,21.92 -32.33,22.07 -32.49,22.22 -32.7,22.35 -34.8,23.4 -35.06,23.51 -35.35,23.58 -35.67,23.63 -36,23.65 -36.33,23.63 -36.65,23.58 -36.94,23.51 -37.2,23.4 -39.3,22.35 -39.51,22.22 -39.67,22.07 -39.76,21.92 -39.8,21.75 -39.76,21.58 -39.67,21.43 -39.51,21.28 -39.3,21.15 -37.2,20.1 -36.94,19.99 -36.65,19.92 -36.33,19.87 -36,19.85 -35.67,19.87 -35.35,19.92 -35.06,19.99 -34.8,20.1"/>
      <polygon class="hln-phone-notification-l" points="-26.2,24.4 -25.99,24.53 -25.83,24.68 -25.74,24.83 -25.7,25 -25.74,25.17 -25.83,25.32 -25.99,25.47 -26.2,25.6 -28.3,26.65 -28.56,26.76 -28.85,26.83 -29.17,26.88 -29.5,26.9 -29.83,26.88 -30.15,26.83 -30.44,26.76 -30.7,26.65 -32.8,25.6 -33.01,25.47 -33.17,25.32 -33.26,25.17 -33.3,25 -33.26,24.83 -33.17,24.68 -33.01,24.53 -32.8,24.4 -30.7,23.35 -30.44,23.24 -30.15,23.17 -29.83,23.12 -29.5,23.1 -29.17,23.12 -28.85,23.17 -28.56,23.24 -28.3,23.35"/>
      <polygon class="hln-phone-notification-l" points="-19.7,27.65 -19.49,27.78 -19.33,27.93 -19.24,28.08 -19.2,28.25 -19.24,28.42 -19.33,28.57 -19.49,28.72 -19.7,28.85 -21.8,29.9 -22.06,30.01 -22.35,30.08 -22.67,30.13 -23,30.15 -23.33,30.13 -23.65,30.08 -23.94,30.01 -24.2,29.9 -26.3,28.85 -26.51,28.72 -26.67,28.57 -26.76,28.42 -26.8,28.25 -26.76,28.08 -26.67,27.93 -26.51,27.78 -26.3,27.65 -24.2,26.6 -23.94,26.49 -23.65,26.42 -23.33,26.37 -23,26.35 -22.67,26.37 -22.35,26.42 -22.06,26.49 -21.8,26.6"/>
      <polygon class="hln-phone-notification-l" points="-13.2,30.9 -12.99,31.03 -12.83,31.18 -12.74,31.33 -12.7,31.5 -12.74,31.67 -12.83,31.82 -12.99,31.97 -13.2,32.1 -15.3,33.15 -15.56,33.26 -15.85,33.33 -16.17,33.38 -16.5,33.4 -16.83,33.38 -17.15,33.33 -17.44,33.26 -17.7,33.15 -19.8,32.1 -20.01,31.97 -20.17,31.82 -20.26,31.67 -20.3,31.5 -20.26,31.33 -20.17,31.18 -20.01,31.03 -19.8,30.9 -17.7,29.85 -17.44,29.74 -17.15,29.67 -16.83,29.62 -16.5,29.6 -16.17,29.62 -15.85,29.67 -15.56,29.74 -15.3,29.85"/>
      <polygon class="hln-phone-notification-l" points="-40.7,25.15 -40.49,25.28 -40.33,25.43 -40.24,25.58 -40.2,25.75 -40.24,25.92 -40.33,26.07 -40.49,26.22 -40.7,26.35 -42.8,27.4 -43.06,27.51 -43.35,27.58 -43.67,27.63 -44,27.65 -44.33,27.63 -44.65,27.58 -44.94,27.51 -45.2,27.4 -47.3,26.35 -47.51,26.22 -47.67,26.07 -47.76,25.92 -47.8,25.75 -47.76,25.58 -47.67,25.43 -47.51,25.28 -47.3,25.15 -45.2,24.1 -44.94,23.99 -44.65,23.92 -44.33,23.87 -44,23.85 -43.67,23.87 -43.35,23.92 -43.06,23.99 -42.8,24.1"/>
      <polygon class="hln-phone-notification-l" points="-34.2,28.4 -33.99,28.53 -33.83,28.68 -33.74,28.83 -33.7,29 -33.74,29.17 -33.83,29.32 -33.99,29.47 -34.2,29.6 -36.3,30.65 -36.56,30.76 -36.85,30.83 -37.17,30.88 -37.5,30.9 -37.83,30.88 -38.15,30.83 -38.44,30.76 -38.7,30.65 -40.8,29.6 -41.01,29.47 -41.17,29.32 -41.26,29.17 -41.3,29 -41.26,28.83 -41.17,28.68 -41.01,28.53 -40.8,28.4 -38.7,27.35 -38.44,27.24 -38.15,27.17 -37.83,27.12 -37.5,27.1 -37.17,27.12 -36.85,27.17 -36.56,27.24 -36.3,27.35"/>
      <polygon class="hln-phone-notification-l" points="-27.7,31.65 -27.49,31.78 -27.33,31.93 -27.24,32.08 -27.2,32.25 -27.24,32.42 -27.33,32.57 -27.49,32.72 -27.7,32.85 -29.8,33.9 -30.06,34.01 -30.35,34.08 -30.67,34.13 -31,34.15 -31.33,34.13 -31.65,34.08 -31.94,34.01 -32.2,33.9 -34.3,32.85 -34.51,32.72 -34.67,32.57 -34.76,32.42 -34.8,32.25 -34.76,32.08 -34.67,31.93 -34.51,31.78 -34.3,31.65 -32.2,30.6 -31.94,30.49 -31.65,30.42 -31.33,30.37 -31,30.35 -30.67,30.37 -30.35,30.42 -30.06,30.49 -29.8,30.6"/>
      <polygon class="hln-phone-notification-l" points="-21.2,34.9 -20.99,35.03 -20.83,35.18 -20.74,35.33 -20.7,35.5 -20.74,35.67 -20.83,35.82 -20.99,35.97 -21.2,36.1 -23.3,37.15 -23.56,37.26 -23.85,37.33 -24.17,37.38 -24.5,37.4 -24.83,37.38 -25.15,37.33 -25.44,37.26 -25.7,37.15 -27.8,36.1 -28.01,35.97 -28.17,35.82 -28.26,35.67 -28.3,35.5 -28.26,35.33 -28.17,35.18 -28.01,35.03 -27.8,34.9 -25.7,33.85 -25.44,33.74 -25.15,33.67 -24.83,33.62 -24.5,33.6 -24.17,33.62 -23.85,33.67 -23.56,33.74 -23.3,33.85"/>
      <line class="hln-phone-notification-l" x1="-47.5" y1="32.25" x2="-37.5" y2="37.25"/>
      <g class="hln-phone-notification-card"><g><polygon points="-15.54,0.5 -15.47,0.16 -15.27,-0.18 -14.94,-0.48 -14.5,-0.75 -8.5,-3.75 -7.96,-3.97 -7.35,-4.13 -6.69,-4.23 -6,-4.27 -5.31,-4.23 -4.65,-4.13 -4.04,-3.97 -3.5,-3.75 18.5,7.25 18.94,7.52 19.27,7.82 19.47,8.16 19.54,8.5 19.54,10.5 19.47,10.84 19.27,11.18 18.94,11.48 18.5,11.75 12.5,14.75 11.96,14.97 11.35,15.13 10.69,15.23 10,15.27 9.31,15.23 8.65,15.13 8.04,14.97 7.5,14.75 -14.5,3.75 -14.94,3.48 -15.27,3.18 -15.47,2.84 -15.54,2.5"/><polygon points="18.5,7.25 18.94,7.52 19.27,7.82 19.47,8.16 19.54,8.5 19.47,8.84 19.27,9.18 18.94,9.48 18.5,9.75 12.5,12.75 11.96,12.97 11.35,13.13 10.69,13.23 10,13.27 9.31,13.23 8.65,13.13 8.04,12.97 7.5,12.75 -14.5,1.75 -14.94,1.48 -15.27,1.18 -15.47,0.84 -15.54,0.5 -15.47,0.16 -15.27,-0.18 -14.94,-0.48 -14.5,-0.75 -8.5,-3.75 -7.96,-3.97 -7.35,-4.13 -6.69,-4.23 -6,-4.27 -5.31,-4.23 -4.65,-4.13 -4.04,-3.97 -3.5,-3.75"/></g><polygon class="hln-phone-notification-af" points="-3,-1 -2.82,-0.89 -2.69,-0.77 -2.61,-0.64 -2.59,-0.5 -2.61,-0.36 -2.69,-0.23 -2.82,-0.11 -3,0 -5,1 -5.21,1.09 -5.46,1.15 -5.72,1.19 -6,1.21 -6.28,1.19 -6.54,1.15 -6.79,1.09 -7,1 -9,0 -9.18,-0.11 -9.31,-0.23 -9.39,-0.36 -9.41,-0.5 -9.39,-0.64 -9.31,-0.77 -9.18,-0.89 -9,-1 -7,-2 -6.79,-2.09 -6.54,-2.15 -6.28,-2.19 -6,-2.21 -5.72,-2.19 -5.46,-2.15 -5.21,-2.09 -5,-2"/><line x1="-0.7" y1="1.35" x2="13.8" y2="8.6"/><line class="hln-phone-notification-l" x1="-3.3" y1="2.65" x2="7.2" y2="7.9"/><line class="hln-phone-notification-l" x1="-12.4" y1="0.7" x2="1.6" y2="7.7"/></g>
    </g>
  </svg>
</div>

.hln-phone-notification {
  --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-phone-notification svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-phone-notification svg * {
  vector-effect: non-scaling-stroke;
}
.hln-phone-notification .hln-phone-notification-l {
  stroke: #9a9ca3;
}
.hln-phone-notification .hln-phone-notification-af {
  fill: var(--c);
  stroke: var(--c);
}
.hln-phone-notification .hln-phone-notification-card {
  animation: hln-phone-notification-in 5s infinite;
}
@keyframes hln-phone-notification-in {
  0% { transform: matrix(1, 0, 0, 1, 14, -7); opacity: 0; }
  12% { transform: matrix(1, 0, 0, 1, 14, -7); opacity: 0; 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); }
  32% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; }
  78% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  90% { transform: matrix(1, 0, 0, 1, 14, -7); opacity: 0; }
  100% { transform: matrix(1, 0, 0, 1, 14, -7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-phone-notification * {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-phone-notification, .hln-phone-notification *, .hln-phone-notification::before, .hln-phone-notification::after, .hln-phone-notification *::before, .hln-phone-notification *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar hairline animations