---
title: "Draw Circle Text — Free Framer component · Best of Framer"
description: "Free Framer component · by Shahnawaz Karatela · Text. Animated circle highlight for text"
canonical: "https://framer.elliotli.dev/component/draw-circle-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Draw Circle Text

# Draw Circle Text

Animated circle highlight for text

[View on Framer](https://framer.com/marketplace/components/draw-circle-text/?via=elliot-li)

![Draw Circle Text preview image 1](https://framer.elliotli.dev/og/component/draw-circle-text/38b6d2504e274c5f/1600x1200.jpg)

## Summary

Animated circle highlight for text

## Description

Highlight Circle Text is a modern text enhancement component that draws an animated circle around important words, making your message stand out instantly.

Perfect for landing pages and marketing websites, it helps guide user attention and emphasize key phrases with a clean, hand-drawn style.

## ✨ Key Features

-   Animated circle drawing effect
    
-   Highlight specific words dynamically
    
-   Smooth and clean motion
    
-   Fully customizable colors and stroke width
    
-   Adjustable draw speed
    
-   Flexible text structure (before, highlight, after)
    
-   Responsive and lightweight
    

## 🎛 Controls

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-9xvrjwqz-KqUJ1gQpCTJv3ENoNYJlbNIpCmFVsJ)

Customize everything easily:

-   Before text
    
-   Highlighted text
    
-   After text
    
-   Circle color
    
-   Circle stroke width
    
-   Draw speed
    
-   Text color & background
    
-   Font size, family & weight
    
-   Max width & spacing
    

## 🚀 Use Cases

-   Landing page headlines
    
-   Marketing websites
    
-   SaaS hero sections
    
-   Product highlights
    
-   Conversion-focused UI
    

## ⚡ Instructions

1.  Add the component to your canvas
    
2.  Enter your text (before, highlight, after)
    
3.  Customize styles and animation
    
4.  Adjust speed and colors
    
5.  Preview and publish
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1354

## Details

- **Author**: Shahnawaz Karatela
- **Published**: 2026-04-21
- **Updated**: 2026-04-21
- **Added**: 2026-04-05
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos