A badge or seal: your text runs around a ring that turns slowly, with a centre label. The ring repeats your words three times and sizes them to close the circle.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1Text on a pathA follow-path modifier wraps the text around a circle.
- 2It always closes the ringThe text box is as wide as the circle and fits its font size, so short and long words both go all the way round.
- 3One rotationThe whole badge turns once every 12 seconds.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function CircleBadge() {
const { rive, RiveComponent } = useRive({
src: '/text-circle.riv',
artboard: 'Circle Badge',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('color').value = 0xFFFAFAF7;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: text, center, color, ring. All on the CircleText view model.