Design

Anyone understand why the SVG version of the arch logo breaks at small pixel sizes on web? It gets "ghost lines".

Anyone understand why the SVG version of the arch logo breaks at small pixel sizes on web? It gets "ghost lines".

https://www.figma.com/file/jvfG3WFpdCrNnAZaQg85Yt/Arch?type=design&node-id=0%3A1&mode=design&t=a2y77YW4g9bJ60Tm-1

Duped and made a flattened version here: https://www.figma.com/file/xjrQvPAffFUn8zw9xA3vZD/Arch-(ZL-Copy)?type=design&node-id=1%3A33&mode=design&t=Q6dao5jQpHuX23VG-1

Are you able to duplicate the file and quickly edit?

Combining any underlying shapes and flattening the vector before exporting from Figma might help. Hard to tell what the issue is without edit access.

the logo is made of many independent shapes, you need to combine these into one shape/one path

It's because the SVG itself has a width and height, but that doesn't always correlate to the width and height of some of its elements

Solution here in the repo for the new(wip) Farcaster Kit docs:

^ the SVG in that logo.tsx file is the Farcaster logo, but set-up to resize properly when you pass the component the width and height as props

It's because the SVG itself has a width and height, but that doesn't always correlate to the width and height of some of its elements

Solution here in the repo for the new(wip) Farcaster Kit docs:

https://github.com/dylsteck/farcasterkit-site/blob/main/components/logo/logo.tsx

Computational biologist, data scientist, digital artist | 
https://clauswilke.art/links | Hosting /ai-art & /clauswilke

Not in Figma. In Google Chrome on a normal webpage.

Works fine on Brave. Maybe a broken SVG rendering implementation on your system?

Pixel 💜 | Artist | On-chain advocate filter8.xyz | /filter8 | building /mintbay