Fix blurry YC badge on mobile (#1770)

The badge SVG wrapped everything in a Figma drop-shadow filter, and WebKit rasterizes SVG filter regions in <img> at 1x, so the whole badge rendered low-res on iPhones. Strip the filter from the SVG and apply the shadow with CSS instead.

Rhys Sullivan committed 2 months ago

Commit 4c9e7551 parent 29b7a772 files · +5 −16Browse files

Unified · Split

2 files

apps/marketing/src/assets/yc-backed-by.svg +1 −15
apps/marketing/src/pages/index.astro +4 −1

apps/marketing/src/assets/yc-backed-by.svg+1−15

@@ -1,5 +1,4 @@
1	<svg width="358" height="133" viewBox="0 0 358 133" fill="none" xmlns="http://www.w3.org/2000/svg">	1	<svg width="350" height="125" viewBox="4 0 350 125" fill="none" xmlns="http://www.w3.org/2000/svg">
2	<g filter="url(#filter0_d_1_82)">
3	<rect x="4" width="350" height="125" rx="10" fill="#F6F6EF"/>	2	<rect x="4" width="350" height="125" rx="10" fill="#F6F6EF"/>
4	<path d="M130.178 31.768C131.474 31.096 132.266 29.944 132.266 28.36C132.266 25.672 130.01 23.68 127.034 23.68H120.026V40H127.322C130.298 40 132.53 37.984 132.53 35.296C132.53 33.592 131.618 32.416 130.178 31.768ZM127.034 26.08C128.738 26.08 129.746 27.04 129.746 28.36C129.746 29.656 128.714 30.64 127.034 30.64H122.546V26.08H127.034ZM127.322 37.6H122.546V33.04H127.322C129.002 33.04 130.01 33.976 130.01 35.296C130.01 36.616 129.002 37.6 127.322 37.6ZM140.55 27.736C138.75 27.736 136.878 28.744 135.846 30.256L137.79 31.624C138.366 30.64 139.542 29.92 140.742 29.92C142.206 29.92 142.926 30.952 143.118 32.08L139.374 32.8C137.262 33.208 135.414 34.312 135.414 36.616C135.414 38.92 137.238 40.24 139.35 40.24C141.03 40.24 142.446 39.4 143.166 38.344V40H145.566V32.68C145.566 29.704 143.55 27.736 140.55 27.736ZM139.926 38.032C138.702 38.032 137.814 37.408 137.814 36.52C137.814 35.584 138.798 35.08 139.83 34.84L143.166 34.168V35.032C143.166 36.88 141.63 38.032 139.926 38.032ZM158.123 36.208C157.379 37.312 156.155 37.96 154.883 37.96C152.771 37.96 151.235 36.208 151.235 33.976C151.235 31.744 152.771 29.992 154.883 29.992C156.155 29.992 157.379 30.64 158.123 31.744L160.139 30.568C158.987 28.84 157.043 27.712 154.859 27.712C151.379 27.712 148.835 30.496 148.835 33.976C148.835 37.456 151.379 40.24 154.859 40.24C157.043 40.24 158.987 39.112 160.139 37.384L158.123 36.208ZM174.088 28H170.92L165.688 33.448V23.2H163.288V40H165.688V36.448L167.608 34.504L171.28 40H174.088L169.36 32.752L174.088 28ZM186.545 32.968C186.137 29.296 183.617 27.76 181.049 27.76C177.569 27.76 175.265 30.544 175.265 34C175.265 37.456 177.569 40.24 181.049 40.24C183.233 40.24 185.297 39.112 186.329 37.384L184.313 36.208C183.737 37.24 182.465 37.96 181.025 37.96C179.249 37.96 178.097 36.904 177.785 35.104H186.545C186.617 34.336 186.617 33.616 186.545 32.968ZM180.977 30.04C182.465 30.04 184.073 30.88 184.145 32.944H177.761C178.073 31.144 179.153 30.04 180.977 30.04ZM198.459 23.2V29.728C197.787 28.6 196.515 27.76 194.787 27.76C191.715 27.76 189.387 30.352 189.363 34C189.339 37.72 191.715 40.24 194.763 40.24C196.587 40.24 197.835 39.328 198.459 38.128V40H200.859V23.2H198.459ZM195.171 37.96C193.083 37.96 191.763 36.256 191.763 34C191.763 31.744 193.083 30.04 195.171 30.04C197.259 30.04 198.579 31.744 198.579 34C198.579 36.256 197.259 37.96 195.171 37.96ZM224.47 34C224.446 30.352 222.118 27.76 219.046 27.76C217.318 27.76 216.046 28.6 215.374 29.728V23.2H212.974V40H215.374V38.128C215.998 39.328 217.246 40.24 219.07 40.24C222.118 40.24 224.494 37.72 224.47 34ZM218.662 37.96C216.574 37.96 215.254 36.256 215.254 34C215.254 31.744 216.574 30.04 218.662 30.04C220.75 30.04 222.07 31.744 222.07 34C222.07 36.256 220.75 37.96 218.662 37.96ZM236.419 28L232.915 36.424L229.171 28H226.531L231.643 39.448L229.411 44.8H231.955L238.891 28H236.419Z" fill="black"/>	3	<path d="M130.178 31.768C131.474 31.096 132.266 29.944 132.266 28.36C132.266 25.672 130.01 23.68 127.034 23.68H120.026V40H127.322C130.298 40 132.53 37.984 132.53 35.296C132.53 33.592 131.618 32.416 130.178 31.768ZM127.034 26.08C128.738 26.08 129.746 27.04 129.746 28.36C129.746 29.656 128.714 30.64 127.034 30.64H122.546V26.08H127.034ZM127.322 37.6H122.546V33.04H127.322C129.002 33.04 130.01 33.976 130.01 35.296C130.01 36.616 129.002 37.6 127.322 37.6ZM140.55 27.736C138.75 27.736 136.878 28.744 135.846 30.256L137.79 31.624C138.366 30.64 139.542 29.92 140.742 29.92C142.206 29.92 142.926 30.952 143.118 32.08L139.374 32.8C137.262 33.208 135.414 34.312 135.414 36.616C135.414 38.92 137.238 40.24 139.35 40.24C141.03 40.24 142.446 39.4 143.166 38.344V40H145.566V32.68C145.566 29.704 143.55 27.736 140.55 27.736ZM139.926 38.032C138.702 38.032 137.814 37.408 137.814 36.52C137.814 35.584 138.798 35.08 139.83 34.84L143.166 34.168V35.032C143.166 36.88 141.63 38.032 139.926 38.032ZM158.123 36.208C157.379 37.312 156.155 37.96 154.883 37.96C152.771 37.96 151.235 36.208 151.235 33.976C151.235 31.744 152.771 29.992 154.883 29.992C156.155 29.992 157.379 30.64 158.123 31.744L160.139 30.568C158.987 28.84 157.043 27.712 154.859 27.712C151.379 27.712 148.835 30.496 148.835 33.976C148.835 37.456 151.379 40.24 154.859 40.24C157.043 40.24 158.987 39.112 160.139 37.384L158.123 36.208ZM174.088 28H170.92L165.688 33.448V23.2H163.288V40H165.688V36.448L167.608 34.504L171.28 40H174.088L169.36 32.752L174.088 28ZM186.545 32.968C186.137 29.296 183.617 27.76 181.049 27.76C177.569 27.76 175.265 30.544 175.265 34C175.265 37.456 177.569 40.24 181.049 40.24C183.233 40.24 185.297 39.112 186.329 37.384L184.313 36.208C183.737 37.24 182.465 37.96 181.025 37.96C179.249 37.96 178.097 36.904 177.785 35.104H186.545C186.617 34.336 186.617 33.616 186.545 32.968ZM180.977 30.04C182.465 30.04 184.073 30.88 184.145 32.944H177.761C178.073 31.144 179.153 30.04 180.977 30.04ZM198.459 23.2V29.728C197.787 28.6 196.515 27.76 194.787 27.76C191.715 27.76 189.387 30.352 189.363 34C189.339 37.72 191.715 40.24 194.763 40.24C196.587 40.24 197.835 39.328 198.459 38.128V40H200.859V23.2H198.459ZM195.171 37.96C193.083 37.96 191.763 36.256 191.763 34C191.763 31.744 193.083 30.04 195.171 30.04C197.259 30.04 198.579 31.744 198.579 34C198.579 36.256 197.259 37.96 195.171 37.96ZM224.47 34C224.446 30.352 222.118 27.76 219.046 27.76C217.318 27.76 216.046 28.6 215.374 29.728V23.2H212.974V40H215.374V38.128C215.998 39.328 217.246 40.24 219.07 40.24C222.118 40.24 224.494 37.72 224.47 34ZM218.662 37.96C216.574 37.96 215.254 36.256 215.254 34C215.254 31.744 216.574 30.04 218.662 30.04C220.75 30.04 222.07 31.744 222.07 34C222.07 36.256 220.75 37.96 218.662 37.96ZM236.419 28L232.915 36.424L229.171 28H226.531L231.643 39.448L229.411 44.8H231.955L238.891 28H236.419Z" fill="black"/>
5	<path fill-rule="evenodd" clip-rule="evenodd" d="M35 109H92.2727V49H35V109Z" fill="#FB651E"/>	4	<path fill-rule="evenodd" clip-rule="evenodd" d="M35 109H92.2727V49H35V109Z" fill="#FB651E"/>
@@ -14,17 +13,4 @@ · 8 unmodified lines
14	<path fill-rule="evenodd" clip-rule="evenodd" d="M279.654 76.9407V85.9782C279.654 87.7407 280.388 88.5469 281.909 88.5469H284.486V93.6094H281.193C276.808 93.6094 274.642 91.3594 274.642 86.6344V76.9407H270.884V72.0657H274.463V66.7407L279.654 65.0719V72.0657H284.486V76.9407H279.654Z" fill="#231F20"/>	13	<path fill-rule="evenodd" clip-rule="evenodd" d="M279.654 76.9407V85.9782C279.654 87.7407 280.388 88.5469 281.909 88.5469H284.486V93.6094H281.193C276.808 93.6094 274.642 91.3594 274.642 86.6344V76.9407H270.884V72.0657H274.463V66.7407L279.654 65.0719V72.0657H284.486V76.9407H279.654Z" fill="#231F20"/>
15	<path fill-rule="evenodd" clip-rule="evenodd" d="M302.545 82.8282C302.545 79.3594 300.129 76.7344 297.015 76.7344C293.811 76.7344 291.395 79.3594 291.395 82.8282C291.395 86.2969 293.811 88.9219 297.015 88.9219C300.075 88.9219 302.545 86.2969 302.545 82.8282ZM286.186 82.8282C286.186 76.5657 290.983 71.5407 297.015 71.5407C302.957 71.5407 307.753 76.5657 307.753 82.8282C307.753 89.0907 302.957 94.1157 297.015 94.1157C290.983 94.1157 286.186 89.0907 286.186 82.8282Z" fill="#231F20"/>	14	<path fill-rule="evenodd" clip-rule="evenodd" d="M302.545 82.8282C302.545 79.3594 300.129 76.7344 297.015 76.7344C293.811 76.7344 291.395 79.3594 291.395 82.8282C291.395 86.2969 293.811 88.9219 297.015 88.9219C300.075 88.9219 302.545 86.2969 302.545 82.8282ZM286.186 82.8282C286.186 76.5657 290.983 71.5407 297.015 71.5407C302.957 71.5407 307.753 76.5657 307.753 82.8282C307.753 89.0907 302.957 94.1157 297.015 94.1157C290.983 94.1157 286.186 89.0907 286.186 82.8282Z" fill="#231F20"/>
16	<path fill-rule="evenodd" clip-rule="evenodd" d="M322.071 71.5969V76.8282C317.436 76.8282 315.449 79.1907 315.449 82.2844V93.6282H310.438V72.0657H315.449V74.7657C316.863 72.8344 319.136 71.5969 322.071 71.5969Z" fill="#231F20"/>	15	<path fill-rule="evenodd" clip-rule="evenodd" d="M322.071 71.5969V76.8282C317.436 76.8282 315.449 79.1907 315.449 82.2844V93.6282H310.438V72.0657H315.449V74.7657C316.863 72.8344 319.136 71.5969 322.071 71.5969Z" fill="#231F20"/>
17	</g>
18	<defs>
19	<filter id="filter0_d_1_82" x="0" y="0" width="358" height="133" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
20	<feFlood flood-opacity="0" result="BackgroundImageFix"/>
21	<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
22	<feOffset dy="4"/>
23	<feGaussianBlur stdDeviation="2"/>
24	<feComposite in2="hardAlpha" operator="out"/>
25	<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
26	<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1_82"/>
27	<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1_82" result="shape"/>
28	</filter>
29	</defs>
30	</svg>	16	</svg>

apps/marketing/src/pages/index.astro+4−1

               class="rise-4 mt-10 inline-flex"
               aria-label="Backed by Y Combinator"
             >
+              {/* Shadow lives here, not in the SVG: WebKit rasterizes SVG
+                  filter regions in <img> at 1x, blurring the badge on mobile. */}
               <img
                 src={ycBackedBy}
                 alt="Backed by Y Combinator"
                 width="140"
-                height="52"
+                height="50"
+                class="rounded-[4px] shadow-[0_1.6px_1.6px_rgba(0,0,0,0.25)]"
               />
             </a>
           </div>

Fix blurry YC badge on mobile (#1770)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code