chrome/browser/resources/welcome/shared/onboarding_background.html

<style>
  :host {
    --welcome-grey: rgb(218, 220, 224);
    --welcome-blue: rgb(57, 130, 248);
    --welcome-blue-tinted: rgb(138, 180, 248);
    --welcome-green: rgb(52, 168, 83);
    --welcome-green-tinted: rgb(129, 201, 149);
    --welcome-red: rgb(219, 68, 55);
    --welcome-yellow: rgb(251, 188, 4);
    --welcome-yellow-tinted: rgb(253, 214, 99);

    display: flex;
    justify-content: center;
    max-width: 100%;
    position: relative;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --welcome-grey: rgb(95, 99, 104);
      --welcome-blue: rgb(57, 130, 248);
      --welcome-blue-tinted: rgb(26, 115, 232);
      --welcome-green: rgb(52, 168, 83);
      --welcome-green-tinted: rgb(30, 142, 62);
      --welcome-red: rgb(234, 66, 52);
      --welcome-yellow: rgb(251, 188, 4);
      --welcome-yellow-tinted: rgb(249, 171, 0);
    }
  }

  #container {
    align-items: center;
    display: flex;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #canvas {
    min-height: 878px;
    min-width: 2728px;
    position: relative;
  }

  #logo {
    background: url(../images/background_svgs/logo.svg);
    background-size: contain;
    border-radius: 50%;
    height: 250px;
    left: 50%;
    top: 50%;
    width: 250px;
  }

  .line-container {
    border-radius: 8px;
    height: 6px;
    overflow: hidden;
    position: absolute;
    transform-origin: center left;
  }

  .line {
    border-radius: 8px;
    height: 100%;
    overflow: hidden;
    position: absolute;
    transform-origin: center left;
    width: 100%;
  }

  .line-fill {
    background-color: var(--line-color);
    border-radius: 8px;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
  }

  #blue-line {
    --line-color: var(--welcome-blue);
    left: 1225px;
    top: 278px;
    transform: rotate(225deg);
    width: 60px;
  }

  #green-line {
    --line-color: var(--welcome-green);
    left: 1170px;
    top: 517px;
    transform: rotate(-203deg);
    width: 68px;
  }

  #red-line {
    --line-color: var(--welcome-red);
    left: 1574px;
    top: 339px;
    transform: rotate(-24deg);
    width: 45px;
  }

  #grey-line {
    --line-color: var(--welcome-grey);
    left: 1403px;
    top: 235px;
    transform: rotate(280deg);
    width: 68px;
  }

  #yellow-line {
    --line-color: var(--welcome-yellow);
    left: 1308px;
    top: 655px;
    transform: rotate(104deg);
    width: 49px;
  }

  .shape {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 400px;
  }

  .dotted-line {
    -webkit-mask: url(../images/background_svgs/streamer_line.svg);
    -webkit-mask-position: 3px 0;
    -webkit-mask-size: 153px 6px;
    animation: dotted-line 1s infinite linear;
    background-color: var(--welcome-grey);
    height: 6px;
    left: 50%;
    top: 50%;
    transform-origin: center left;
  }

  @keyframes dotted-line {
    to { -webkit-mask-position: 23px 0; }
  }

  #dotted-line-1 {
    left: 1136px;
    top: 378px;
    transform: rotate(194deg);
    width: 106px;
  }

  #dotted-line-2 {
    left: 1493px;
    top: 271px;
    transform: rotate(-50deg);
    width: 126px;
  }

  #dotted-line-3 {
    left: 1545px;
    top: 525px;
    transform: rotate(25deg);
    width: 100px;
  }

  #dotted-line-4 {
    left: 1219px;
    top: 626px;
    transform: rotate(128deg);
    width: 113px;
  }

  .circle {
    background-color: var(--welcome-grey);
    border-radius: 50%;
    height: 64px;
    width: 64px;
  }

  .connectagon {
    --connectagon-shape-size: 64.77px;

    display: block;
    height: var(--connectagon-shape-size);
    left: 50%;
    position: absolute;
    top: 50%;
  }

  .connectagon .circle {
    background-color: var(--connectagon-shape-color);
    border-radius: 50%;
    float: left;
    height: var(--connectagon-shape-size);
    position: relative;
    width: var(--connectagon-shape-size);
    z-index: 1;
  }

  .connectagon .square {
    background-color: var(--connectagon-connector-color);
    float: left;
    height: var(--connectagon-shape-size);
    margin-inline-start: calc(var(--connectagon-shape-size)/-2);
    position: relative;
    width: 59px;
  }

  .connectagon .hexagon {
    -webkit-mask: url(../images/background_svgs/hexagon.svg) no-repeat top left;
    background-color: var(--connectagon-shape-color);
    float: left;
    height: var(--connectagon-shape-size);
    position: relative;
    width: 72.78px;
    z-index: 1;
  }

  :host-context([dir='rtl']) .connectagon :is(.circle, .square, .hexagon) {
    float: right;
  }

  .connectagon .circle+.square+.hexagon,
  .connectagon .circle+.square+.circle {
    margin-inline-start: -27.39px;
  }

  .connectagon .hexagon+.square+.hexagon {
    margin-inline-start: -26.39px;
  }

  #yellow-connectagon {
    --connectagon-shape-color: var(--welcome-yellow);
    --connectagon-connector-color: var(--welcome-yellow-tinted);
    animation: yellow-connectagon 4s alternate infinite linear;
    left: 549px;
    top: 156px;
    transform: translate(-50%, -50%) rotate(51deg);
  }

  @keyframes yellow-connectagon {
    to {
      transform: translate(calc(-50% - 62px), calc(-50% - 36px)) rotate(411deg);
    }
  }

  #green-triangle {
    -webkit-mask: url(../images/background_svgs/triangle.svg);
    animation: green-triangle 3s infinite cubic-bezier(.63,.03,.41,.98);
    background-color: var(--welcome-green);
    left: 1813px;
    top: 0;
    transform: translate(-50%, -50%) rotate(-10deg);
    transform-origin: 200px 300px;
  }

  @keyframes green-triangle {
    to {
      transform: translate(-50%, -50%) rotate(350deg);
    }
  }

  #blue-connectagon {
    --connectagon-shape-color: var(--welcome-blue);
    --connectagon-connector-color: var(--welcome-blue-tinted);
    animation: blue-connectagon 4s alternate infinite linear;
    left: 2157px;
    top: 249px;
    transform: translate(-50%, -50%) rotate(152deg);
  }

  @keyframes blue-connectagon {
    50% {
      transform: translate(calc(-50% + 10px), calc(-50% + 20px)) rotate(152deg);
    }

    100% {
      transform: translate(calc(-50%), calc(-50% + 40px)) rotate(152deg);
    }
  }

  #green-connectagon {
    --connectagon-shape-color: var(--welcome-green);
    --connectagon-connector-color: var(--welcome-green-tinted);
    animation: green-connectagon 6s alternate infinite linear;
    left: 851px;
    top: 766px;
    transform: translate(-50%, -50%) rotate(139deg);
  }

  @keyframes green-connectagon {
    50% {
      transform: translate(calc(-50% + 40px), calc(-50% + 10px)) rotate(499deg);
    }

    100% {
      transform: translate(calc(-50% + 80px), calc(-50% + 20px)) rotate(139deg);
    }
  }

  #square {
    -webkit-mask: url(../images/background_svgs/square.svg);
    animation: square 4s infinite linear;
    background-color: var(--welcome-yellow);
    left: 1822px;
    top: 716px;
    transform: translate(-50%, -50%) rotate(29deg);
  }

  @keyframes square {
    to {
      transform: translate(-50%, -50%) rotate(389deg);
    }
  }

  #grey-triangle {
    -webkit-mask: url(../images/background_svgs/triangle.svg);
    background-color: var(--welcome-grey);
    left: 726px;
    top: 414px;
    transform: translate(-50%, -50%) rotate(-16deg);
  }

  #grey-circle-1 {
    left: 380px;
    top: 600px;
    transform: translate(-50%, -50%);
  }

  #grey-circle-2 {
    left: 1526px;
    top: 739px;
    transform: translate(-50%, -50%);
  }

  #grey-lozenge {
    -webkit-mask: url(../images/background_svgs/lozenge.svg) no-repeat top left;
    background-color: var(--welcome-grey);
    left: 2351px;
    top: 491px;
    transform: translate(-50%, -50%) rotate(-32deg);
  }

  #password-field {
    -webkit-mask: url(../images/background_svgs/password_field.svg);
    background-color: var(--welcome-grey);
    left: 860px;
    top: 210px;
    transform: translate(-50%, -50%) rotate(-11deg);
  }

  #password-field-input {
    -webkit-mask: url(../images/background_svgs/password.svg);
    -webkit-mask-position: top left;
    -webkit-mask-size: 400px 400px;
    animation: password-field-input 4s steps(1) infinite;
    background-color: var(--welcome-green);
    left: 604px;
    top: 78px;
    transform: rotate(-11deg);
    transform-origin: top left;
  }

  @keyframes password-field-input {
    0% { width: 150px; }
    15% { width: 182px; }
    30% { width: 218px; }
    45% { width: 249px; }
    60% { width: 400px; }
    100% { width: 400px; }
  }

  #bookmarks-background {
    -webkit-mask: url(../images/background_svgs/bookmarks_background.svg)
        no-repeat top left;
    background-color: var(--welcome-grey);
    left: 937px;
    top: 570px;
    transform: translate(-50%, -50%) rotate(10deg);
  }

  #bookmarks-foreground {
    -webkit-mask: url(../images/background_svgs/bookmarks_foreground.svg)
        no-repeat top left;
    background-color: var(--welcome-blue);
    left: 937px;
    top: 568px;
    transform: translate(-50%, -50%) rotate(10deg);
  }

  #devices {
    -webkit-mask: url(../images/background_svgs/devices.svg);
    background-color: var(--welcome-grey);
    left: 1885px;
    top: 446px;
    transform: translate(-50%, -50%) rotate(-9deg);
  }

  #devices-check {
    -webkit-mask: url(../images/background_svgs/devices_check.svg);
    background-color: var(--welcome-blue);
    left: 1885px;
    top: 446px;
    transform: translate(-50%, -50%) rotate(-9deg);
  }

  #devices-circle {
    /* Clip the top-left and bottom-right quadrants. */
    clip-path: polygon(
        48% 0, 100% 0, 100% 50%, 50% 50%, 52% 100%, 0 100%, 0 50%, 50% 47%);
    left: 1832px;
    top: 456px;
    transform: translate(-50%, -50%) rotate(-9deg);
  }

  #devices-circle-image {
    -webkit-mask: url(../images/background_svgs/streamer_circle.svg);
    animation: devices-circle 11s infinite linear;
    background-color: var(--welcome-green);
    height: 100%;
    width: 100%;
  }

  @keyframes devices-circle {
    to { transform: rotate(-360deg); }
  }
</style>
<div id="container">
  <div id="canvas">
    <div class="shape" id="logo"></div>

    <!-- Lines surrounding logo. -->
    <div class="line-container" id="blue-line">
      <div class="line"><div class="line-fill"></div></div>
    </div>
    <div class="line-container" id="green-line">
      <div class="line"><div class="line-fill"></div></div>
    </div>
    <div class="line-container" id="red-line">
      <div class="line"><div class="line-fill"></div></div>
    </div>
    <div class="line-container" id="grey-line">
      <div class="line"><div class="line-fill"></div></div>
    </div>
    <div class="line-container" id="yellow-line">
      <div class="line"><div class="line-fill"></div></div>
    </div>

    <!-- Grey dotted lines surrounding logo. -->
    <div class="shape dotted-line" id="dotted-line-1"></div>
    <div class="shape dotted-line" id="dotted-line-2"></div>
    <div class="shape dotted-line" id="dotted-line-3"></div>
    <div class="shape dotted-line" id="dotted-line-4"></div>

    <!-- Connectagons. -->
    <div class="connectagon" id="yellow-connectagon">
      <div class="circle"></div>
      <div class="square"></div>
      <div class="hexagon"></div>
    </div>
    <div class="connectagon" id="blue-connectagon">
      <div class="hexagon"></div>
      <div class="square"></div>
      <div class="hexagon"></div>
    </div>
    <div class="connectagon" id="green-connectagon">
      <div class="circle"></div>
      <div class="square"></div>
      <div class="circle"></div>
    </div>

    <!-- Colored shapes. -->
    <div class="shape" id="green-triangle"></div>
    <div class="shape" id="square"></div>

    <!-- Grey shapes. -->
    <div class="shape" id="grey-triangle"></div>
    <div class="shape circle" id="grey-circle-1"></div>
    <div class="shape circle" id="grey-circle-2"></div>
    <div class="shape" id="grey-lozenge"></div>

    <!-- Password field image. -->
    <div class="shape" id="password-field"></div>
    <div class="shape" id="password-field-input"></div>

    <!-- Bookmarks image. -->
    <div class="shape" id="bookmarks-background"></div>
    <div class="shape" id="bookmarks-foreground"></div>

    <!-- Connected devices image. -->
    <div class="shape" id="devices"></div>
    <div class="shape" id="devices-check"></div>
    <div class="shape" id="devices-circle">
      <div id="devices-circle-image"></div>
    </div>

    <!-- Temp: Overlay of graphic -->
    <div id="overlay"></div>
  </div>
</div>