mkdocs-material/.github/assets/logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>

        @keyframes logo {
          0%, 100% {
            opacity: 0;
            transform: scale(.9);
          }
          20%, 80% {
            opacity: 1;
            transform: scale(1.1);
          }
          50% {
            opacity: 1;
            transform: scale(1);
          }
        }

				.container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 320px;
          height: 320px;
					font-family:
						system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
						sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
          letter-spacing: -1px;
				}

        .logo {
          position: relative;
          width: 40%;
        }

        .logo svg {
          position: relative;
          display: block;
          margin: 20%;
          fill: white;
        }

        .backdrop {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 100%;
          background-image: linear-gradient(#1A1A1A, #5E5E5E);
          animation: logo infinite both 10s 1s ease-in-out;
        }

        h1 {
          margin: 24px 0 4px;
          color: #1A1A1A;
          font-size: 24px;
          font-weight: bold;
        }

        h2 {
          margin: 4px 0;
          color: #5E5E5E;
          font-size: 14px;
        }

        [data-color-mode=dark] h1 {
          color: #E5E5E5;
        }

			</style>
			<div class="container">
        <div class="logo">
          <div class="backdrop"></div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 89">

            <polygon>
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="1s;a2.end+1s" id="a1"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  3.136 17.387, 3.136 60.319,  3.136 60.319, 3.136 60.319;
                  3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387
                "
              />
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="a1.end+5s" id="a2"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  3.136 17.387, 3.136 60.319, 46.068 81.786, 3.136 17.387;
                  3.136 17.387, 3.136 60.319,  3.136 60.319, 3.136 60.319
                "
              />
            </polygon>

            <polygon style="fill-opacity: 0.5;">
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="1s;b2.end+1s" id="b1"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  21.910 50.932, 21.910 50.932,  3.136 60.319, 3.136 60.319;
                  21.910  8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387
                "
              />
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="b1.end+5s" id="b2"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  21.910  8.000, 64.843 72.398, 46.068 81.786, 3.136 17.387;
                  21.910 50.932, 21.910 50.932,  3.136 60.319, 3.136 60.319
                "
              />
            </polygon>

            <clipPath id="clip">
              <polygon>
                <animate
                  attributeName="points" calcMode="spline" fill="freeze"
                  dur="2s" begin="1s;c2.end+1s" id="c1"
                  keyTimes="0;1" keySplines="0.87 0 0.13 1"
                  values="
                    21.910 50.932, 21.910 50.932, 89 89, 89 0;
                    21.910  8.000, 64.843 72.398, 89 89, 89 0
                  "
                />
                <animate
                  attributeName="points" calcMode="spline" fill="freeze"
                  dur="2s" begin="c1.end+5s" id="c2"
                  keyTimes="0;1" keySplines="0.87 0 0.13 1"
                  values="
                    21.910  8.000, 64.843 72.398, 89 89, 89 0;
                    21.910 50.932, 21.910 50.932, 89 89, 89 0
                  "
                />
              </polygon>
            </clipPath>

            <polygon clip-path="url(#clip)">
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="1.125s;d2.end+1s" id="d1"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052;
                  67.535 17.387, 21.509  48.04, 62.151 68.361, 67.535 71.052
                "
              />
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="d1.end+5s" id="d2"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  67.535 17.387, 21.509  48.04, 62.151 68.361, 67.535 71.052;
                  67.535 71.052, 67.535 71.052, 62.151 68.361, 67.535 71.052
                "
              />
            </polygon>

            <polygon clip-path="url(#clip)" style="fill-opacity: 0.25;">
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="1.125s;e2.end+1s" id="e1"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053;
                  67.535 71.053, 86.309 61.665, 86.309  8.000, 67.535 17.387
                "
              />
              <animate
                attributeName="points" calcMode="spline" fill="freeze"
                dur="2s" begin="e1.end+5s" id="e2"
                keyTimes="0;1" keySplines="0.87 0 0.13 1"
                values="
                  67.535 71.053, 86.309 61.665, 86.309  8.000, 67.535 17.387;
                  67.535 71.053, 86.309 61.665, 86.309 61.665, 67.535 71.053
                "
              />
            </polygon>
          </svg>
        </div>
        <h1>Material for MkDocs</h1>
				<h2>Technical documentation that just works</h2>
			</div>
		</div>
	</foreignObject>
</svg>