Component
Blinking Dot Logos in Framer
These are some logos in Framer that have this nice blinking dot background. It's inspired by the effect seen on the whop.com or even the vercel.com website. Feel free to remix the project to see how it's built, or copy the component to your project.
About the resource
This demo leverages the shimmer dot component I created for Framer. It's an easy to use, highly customizable component that can be used to create these amazing-looking shimmer dot backgrounds.
The tricky part is: how do we make sure the dots are only visible on the area of the logo?
Well, we first get our logo in an SVG format. We need that because we are going to apply this SVG as a mask to our shimmer dot component.
About the resource
This demo leverages the shimmer dot component I created for Framer. It's an easy to use, highly customizable component that can be used to create these amazing-looking shimmer dot backgrounds.
The tricky part is: how do we make sure the dots are only visible on the area of the logo?
Well, we first get our logo in an SVG format. We need that because we are going to apply this SVG as a mask to our shimmer dot component.
About the resource
This demo leverages the shimmer dot component I created for Framer. It's an easy to use, highly customizable component that can be used to create these amazing-looking shimmer dot backgrounds.
The tricky part is: how do we make sure the dots are only visible on the area of the logo?
Well, we first get our logo in an SVG format. We need that because we are going to apply this SVG as a mask to our shimmer dot component.
Masking the component in Framer.
Masking the component in Framer.
Masking the component in Framer.
As you can see in the image above, as soon as we apply the SVG as a mask to the component, the dots will only be visible on the area of the SVG mask.
Quick tip: apply the mask by going to the right panel, clicking the plus button next to styles, and selecting mask.
You can increase the visibility of the logo by adding a little outline with a separate SVG element, that you just drag and drop on top of the masked component.
As you can see in the image above, as soon as we apply the SVG as a mask to the component, the dots will only be visible on the area of the SVG mask.
Quick tip: apply the mask by going to the right panel, clicking the plus button next to styles, and selecting mask.
You can increase the visibility of the logo by adding a little outline with a separate SVG element, that you just drag and drop on top of the masked component.
As you can see in the image above, as soon as we apply the SVG as a mask to the component, the dots will only be visible on the area of the SVG mask.
Quick tip: apply the mask by going to the right panel, clicking the plus button next to styles, and selecting mask.
You can increase the visibility of the logo by adding a little outline with a separate SVG element, that you just drag and drop on top of the masked component.
