Use inlined SVG to remove jank. (#228)

The wordmark logos can be janky when animating while `invert`ed in SVG. This just switches to standard fills by inlining the SVG.
vercel · Oct 24, 2022 · 5fc28e5 · 5fc28e5
1 parent eccb85d
commit 5fc28e5
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 74 deletions.
diff --git a/docs/components/logos/PackLogo.tsx b/docs/components/logos/PackLogo.tsx
@@ -0,0 +1,21 @@
+const PackLogo = (props) => <svg {...props} viewBox="0 0 485 49" xmlns="http://www.w3.org/2000/svg">
+  <path d="M51.1928 12.1277V1.56075H0.267822V12.1277H19.492V47.2659H31.9686V12.1277H51.1928Z" />
+  <path
+      d="M79.966 47.9662C95.6254 47.9662 104.219 40.0091 104.219 26.8959V1.56075H91.7424V25.6865C91.7424 33.0069 87.923 37.1446 79.966 37.1446C72.0089 37.1446 68.1895 33.0069 68.1895 25.6865V1.56075H55.7129V26.8959C55.7129 40.0091 64.3065 47.9662 79.966 47.9662Z" />
+  <path
+      d="M123.318 32.1157H135.731L145.534 47.2659H159.857L148.78 30.779C155.019 28.551 158.838 23.5858 158.838 16.8382C158.838 7.03519 151.518 1.56075 140.378 1.56075H110.841V47.2659H123.318V32.1157ZM123.318 22.249V12.0004H139.741C144.133 12.0004 146.552 13.9101 146.552 17.1565C146.552 20.212 144.133 22.249 139.741 22.249H123.318Z" />
+  <path
+      d="M164.643 47.2659H197.299C207.484 47.2659 213.34 42.4281 213.34 34.3437C213.34 28.9329 209.903 25.2409 205.829 23.5858C208.63 22.249 212.067 19.0662 212.067 14.0374C212.067 5.95303 206.338 1.56075 196.217 1.56075H164.643V47.2659ZM176.611 19.4482V11.6821H194.944C198.381 11.6821 200.291 13.0189 200.291 15.5651C200.291 18.1114 198.381 19.4482 194.944 19.4482H176.611ZM176.611 28.8056H196.089C199.463 28.8056 201.309 30.4607 201.309 32.9433C201.309 35.4259 199.463 37.0809 196.089 37.0809H176.611V28.8056Z" />
+  <path
+      d="M243.845 0.796875C227.868 0.796875 216.346 10.7909 216.346 24.4133C216.346 38.0358 227.868 48.0298 243.845 48.0298C259.823 48.0298 271.281 38.0358 271.281 24.4133C271.281 10.7909 259.823 0.796875 243.845 0.796875ZM243.845 11.6184C252.248 11.6184 258.55 16.5836 258.55 24.4133C258.55 32.2431 252.248 37.2083 243.845 37.2083C235.443 37.2083 229.141 32.2431 229.141 24.4133C229.141 16.5836 235.443 11.6184 243.845 11.6184Z" />
+  <path
+      d="M289.262 32.6887H305.876C317.016 32.6887 324.336 27.3415 324.336 17.1565C324.336 6.90788 317.016 1.56075 305.876 1.56075H276.785V47.2659H289.262V32.6887ZM289.262 22.3127V12.0004H305.176C309.632 12.0004 312.051 13.9101 312.051 17.1565C312.051 20.3393 309.632 22.3127 305.176 22.3127H289.262Z" />
+  <path
+      d="M341.036 1.56075L318.565 47.2659H331.806L335.943 38.6723H359.942L364.079 47.2659H377.765L355.358 1.56075H341.036ZM348.038 13.7827L355.167 28.6783H340.845L348.038 13.7827Z" />
+  <path
+      d="M375.141 24.4133C375.141 38.0358 386.535 48.0298 402.45 48.0298C415.181 48.0298 424.029 42.3007 427.53 33.0706L416.136 27.9781C414.353 33.3252 409.706 37.2083 402.45 37.2083C394.302 37.2083 387.872 32.2431 387.872 24.4133C387.872 16.5836 394.302 11.6184 402.45 11.6184C409.706 11.6184 414.353 15.5015 416.136 20.8486L427.53 15.7561C424.029 6.52594 415.181 0.796875 402.45 0.796875C386.535 0.796875 375.141 10.7909 375.141 24.4133Z" />
+  <path
+      d="M444.513 1.56075H432.037V47.2659H444.513V35.8715L452.661 28.551L468.512 47.2659H484.362L461.637 20.5303L482.771 1.56075H465.775L444.513 20.8486V1.56075Z" />
+</svg>
+
+export default PackLogo;
diff --git a/docs/components/logos/RepoLogo.tsx b/docs/components/logos/RepoLogo.tsx
@@ -0,0 +1,21 @@
+const RepoLogo = (props) => <svg {...props} viewBox="0 0 506 50" xmlns="http://www.w3.org/2000/svg">
+  <path d="M53.7187 12.0038V1.05332H0.945312V12.0038H20.8673V48.4175H33.7968V12.0038H53.7187Z" />
+  <path
+      d="M83.5362 49.1431C99.764 49.1431 108.67 40.8972 108.67 27.3081V1.05332H95.7401V26.0547C95.7401 33.6409 91.7821 37.9287 83.5362 37.9287C75.2904 37.9287 71.3324 33.6409 71.3324 26.0547V1.05332H58.4029V27.3081C58.4029 40.8972 67.3084 49.1431 83.5362 49.1431Z" />
+  <path
+      d="M128.462 32.7174H141.325L151.484 48.4175H166.327L154.848 31.3321C161.313 29.0232 165.271 23.8778 165.271 16.8853C165.271 6.72646 157.685 1.05332 146.141 1.05332H115.532V48.4175H128.462V32.7174ZM128.462 22.4925V11.8719H145.481C150.033 11.8719 152.54 13.8509 152.54 17.2152C152.54 20.3816 150.033 22.4925 145.481 22.4925H128.462Z" />
+  <path
+      d="M171.287 48.4175H205.128C215.683 48.4175 221.752 43.404 221.752 35.0262C221.752 29.419 218.189 25.593 213.967 23.8778C216.87 22.4925 220.432 19.1942 220.432 13.9828C220.432 5.60502 214.495 1.05332 204.006 1.05332H171.287V48.4175ZM183.689 19.59V11.542H202.687C206.249 11.542 208.228 12.9273 208.228 15.566C208.228 18.2047 206.249 19.59 202.687 19.59H183.689ZM183.689 29.2871H203.875C207.371 29.2871 209.284 31.0022 209.284 33.5749C209.284 36.1476 207.371 37.8628 203.875 37.8628H183.689V29.2871Z" />
+  <path
+      d="M253.364 0.261719C236.806 0.261719 224.866 10.6185 224.866 24.7354C224.866 38.8523 236.806 49.2091 253.364 49.2091C269.922 49.2091 281.796 38.8523 281.796 24.7354C281.796 10.6185 269.922 0.261719 253.364 0.261719ZM253.364 11.4761C262.072 11.4761 268.602 16.6215 268.602 24.7354C268.602 32.8493 262.072 37.9947 253.364 37.9947C244.656 37.9947 238.126 32.8493 238.126 24.7354C238.126 16.6215 244.656 11.4761 253.364 11.4761Z" />
+  <path
+      d="M300.429 32.7174H313.292L323.451 48.4175H338.294L326.815 31.3321C333.28 29.0232 337.238 23.8778 337.238 16.8853C337.238 6.72646 329.652 1.05332 318.108 1.05332H287.499V48.4175H300.429V32.7174ZM300.429 22.4925V11.8719H317.448C322 11.8719 324.507 13.8509 324.507 17.2152C324.507 20.3816 322 22.4925 317.448 22.4925H300.429Z" />
+  <path
+      d="M343.254 1.05332V48.4175H389.299V37.467H355.92V29.7489H385.539V19.0622H355.92V12.0038H389.299V1.05332H343.254Z" />
+  <path
+      d="M408.46 33.3111H425.677C437.221 33.3111 444.807 27.7699 444.807 17.2152C444.807 6.59453 437.221 1.05332 425.677 1.05332H395.53V48.4175H408.46V33.3111ZM408.46 22.5585V11.8719H424.951C429.569 11.8719 432.076 13.8509 432.076 17.2152C432.076 20.5135 429.569 22.5585 424.951 22.5585H408.46Z" />
+  <path
+      d="M476.899 0.261719C460.341 0.261719 448.401 10.6185 448.401 24.7354C448.401 38.8523 460.341 49.2091 476.899 49.2091C493.456 49.2091 505.33 38.8523 505.33 24.7354C505.33 10.6185 493.456 0.261719 476.899 0.261719ZM476.899 11.4761C485.606 11.4761 492.137 16.6215 492.137 24.7354C492.137 32.8493 485.606 37.9947 476.899 37.9947C468.191 37.9947 461.66 32.8493 461.66 24.7354C461.66 16.6215 468.191 11.4761 476.899 11.4761Z" />
+</svg>
+
+export default RepoLogo;
diff --git a/docs/components/pages/landing/index.tsx b/docs/components/pages/landing/index.tsx
@@ -11,7 +11,8 @@ import { Turbopack } from "./Turbopack";
 import { FadeIn } from "../home-shared/FadeIn";
 import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
 import styles from "./index.module.css";
-import Image from "next/future/image";
+import PackLogo from '../../logos/PackLogo'
+import RepoLogo from '../../logos/RepoLogo'
 
 function Background() {
   return (
@@ -92,13 +93,10 @@ function Card({
           </div>
 
           <div className="flex-1 flex flex-col items-center">
-            <Image
-              alt={alt}
-              src={`/images/docs/${title}/${title}-type-logo.svg`}
-              width={220}
-              height={22}
-              className="w-[160px] md:w-[220px] mb-3 invert dark:invert-0"
-            />
+            {title == 'pack' ?
+              <PackLogo alt={alt} className="w-[160px] md:w-[220px] mb-3 fill-black dark:fill-white" /> :
+              <RepoLogo alt={alt} className="w-[160px] md:w-[220px] mb-3 fill-black dark:fill-white" />
+            }
             {children}
           </div>
         </div>

diff --git a/docs/components/pages/pack-home/PackHero.tsx b/docs/components/pages/pack-home/PackHero.tsx
@@ -8,6 +8,7 @@ import { HeroText, SectionSubtext } from "../home-shared/Headings";
 import { Gradient } from "../home-shared/Gradient";
 import { FadeIn } from "../home-shared/FadeIn";
 import { CTAButton } from "../home-shared/CTAButton";
+import PackLogo from '../../logos/PackLogo'
 
 export function PackHero() {
   return (
@@ -68,12 +69,10 @@ export function PackHero() {
           delay={0.15}
           className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6"
         >
-          <Image
-            alt=""
-            src="/images/docs/pack/pack-type-logo.svg"
-            width={200}
-            height={100}
-            className="w-[160px] md:w-[200px] invert dark:invert-0"
+          <PackLogo
+            alt="Turbopack"
+            width="200"
+            className="w-[160px] md:w-[200px] fill-black dark:fill-white"
           />
           <HeroText h1>The Rust-based successor to Webpack</HeroText>
           <SectionSubtext hero>

diff --git a/docs/components/pages/repo-home/RepoHero.tsx b/docs/components/pages/repo-home/RepoHero.tsx
@@ -6,6 +6,7 @@ import { HeroText, SectionSubtext } from "../home-shared/Headings";
 import { Gradient } from "../home-shared/Gradient";
 import { FadeIn } from "../home-shared/FadeIn";
 import { CTAButton } from "../home-shared/CTAButton";
+import RepoLogo from '../../logos/RepoLogo'
 
 export function RepoHero() {
   return (
@@ -67,12 +68,10 @@ export function RepoHero() {
           delay={0.15}
           className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6"
         >
-          <Image
-            alt=""
-            src="/images/docs/repo/repo-type-logo.svg"
-            width={200}
-            height={100}
-            className="w-[160px] md:w-[200px] invert dark:invert-0"
+          <RepoLogo
+            alt="Turborepo"
+            width="200"
+            className="w-[160px] md:w-[200px] fill-black dark:fill-white"
           />
           <HeroText h1>
             The build system that

diff --git a/docs/public/images/docs/pack/pack-type-logo.svg b/docs/public/images/docs/pack/pack-type-logo.svg
diff --git a/docs/public/images/docs/repo/repo-type-logo.svg b/docs/public/images/docs/repo/repo-type-logo.svg