Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nayalsaurav/resume-analyzer/llms.txt

Use this file to discover all available pages before exploring further.

ScoreCircle is a pure SVG component that renders a circular progress indicator with a pink-to-blue gradient arc and a centered score label. It translates a numeric score (0–100) into a visual arc that fills proportionally, giving users an at-a-glance sense of their overall resume strength without needing to read a number first.

​
Signature

const ScoreCircle = ({ score = 75 }: { score: number }) => { ... };
export default ScoreCircle;

​
Props

​
score
number
default:75
The score value to visualize, expected in the range 0–100. Determines how much of the circular arc is filled. Defaults to 75 when omitted.

​
Usage

import ScoreCircle from "@/components/ScoreCircle";

<ScoreCircle score={82} />

​
Implementation Details

​
Container & SVG Setup

The component renders inside a fixed-size 100 × 100 px <div> with position: relative. The inner <svg> fills the container completely using height="100%" and width="100%" with a viewBox="0 0 100 100". The SVG is rotated −90° via a Tailwind transform -rotate-90 class so that the arc begins at the 12 o’clock position rather than the default 3 o’clock position.

​
Geometry

Arc dimensions are derived from two constants: 
const radius           = 40;   // outer radius of the arc path
const stroke           = 8;    // stroke width in SVG units
const normalizedRadius = radius - stroke / 2; // = 36 — center of the stroke ring
const circumference    = 2 * Math.PI * normalizedRadius; // full arc length
The filled portion is controlled via strokeDashoffset: 
const progress         = score / 100;
const strokeDashoffset = circumference * (1 - progress);
A strokeDashoffset of 0 means the arc is completely filled; an offset equal to the full circumference means it is completely empty.

​
Background Ring

A static grey circle forms the unfilled track behind the progress arc: 
<circle
  cx="50" cy="50"
  r={normalizedRadius}
  stroke="#e5e7eb"
  strokeWidth={stroke}
  fill="transparent"
/>

​
Gradient Arc

The progress arc uses a <linearGradient> defined in <defs> to paint a pink-to-blue color sweep: 
<defs>
  <linearGradient id="grad" x1="1" y1="0" x2="0" y2="1">
    <stop offset="0%"   stopColor="#FF97AD" />  {/* pink */}
    <stop offset="100%" stopColor="#5171FF" />  {/* blue */}
  </linearGradient>
</defs>

<circle
  cx="50" cy="50"
  r={normalizedRadius}
  stroke="url(#grad)"
  strokeWidth={stroke}
  fill="transparent"
  strokeDasharray={circumference}
  strokeDashoffset={strokeDashoffset}
  strokeLinecap="round"
/>
strokeLinecap="round" gives the arc a rounded tip at the leading edge for a polished appearance.

​
Centered Label

A absolutely-positioned overlay renders the score text centered over the SVG: 
<div className="absolute inset-0 flex flex-col items-center justify-center">
  <span className="font-semibold text-sm">{`${score}/100`}</span>
</div>
The label is placed in a separate <div> layered on top of the SVG rather than inside it, which keeps the text crisp and avoids SVG text rendering inconsistencies across browsers.
ScoreCircle is not animated — the arc renders at its final position immediately on mount. If you need an animated entry (e.g., the arc drawing in from 0% to the target score), wrap the component in a CSS transition or a Framer Motion animate block that interpolates the score prop from 0 to the real value.

Build docs developers (and LLMs) love

Get started for freeTalk to us