You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewMortgage Payment Breakdown — Free PITI Calculator with Real Amortization
Mortgage Payment Breakdown · Charts · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Mortgage Payment Breakdown — A Real PITI Donut Calculator
Most "mortgage calculator" widgets show a single monthly number and stop there. This one shows the four pieces that number is actually made of — principal, interest, taxes, and insurance (PITI) — on a donut chart that redraws live as home price, down payment, rate, and term change, using the real fixed-rate amortization formula rather than an approximation.
The actual amortization formula
The principal-and-interest portion comes from M = P × [r(1+r)^n] / [(1+r)^n - 1], where P is the loan principal (home price minus down payment), r is the monthly interest rate (annual rate ÷ 12), and n is the total number of monthly payments (years × 12). This is the standard closed-form fixed-rate mortgage payment formula — the same one a bank's own amortization schedule is built from, not a simplified stand-in.
Splitting one payment into principal and interest
A fixed monthly payment doesn't split evenly between principal and interest — early in the loan, interest dominates because the outstanding balance is largest. This snippet computes the first month's actual interest portion as principal × monthlyRate, then derives that month's principal portion as whatever's left of the payment. That's why, on a 30-year loan, the interest slice of the donut is often larger than the principal slice even though both come from the exact same fixed payment.
Tax and insurance, averaged monthly
Property tax and homeowner's insurance are typically billed annually or escrowed, so this snippet takes the annual figures you enter and divides each by 12 to get its monthly share — the same math a loan servicer uses to build a monthly escrow payment. Together with principal and interest, these four pieces sum to the full "PITI" payment shown in the center of the donut.
A donut driven by real dasharray math
The donut is four overlapping SVG circles sharing one center and radius, each using stroke-dasharray (visible arc length, visible-gap) and a stroke-dashoffset that accumulates from the previous segment's share — so the four arcs always tile the full circle exactly, with no gaps or overlaps, regardless of how the underlying dollar amounts shift.
Customizing it
Add PMI (private mortgage insurance, typically required below a 20% down payment) as a fifth slice, or swap the amortization formula for a variable-rate schedule. Pair it with mortgage calculator for a payment-only version, or property listing card for the listing this payment would apply to.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to walk through exactly how the fixed-rate amortization formula produces a constant monthly payment while the principal-versus-interest split still shifts every month, and why the first month's interest is computed directly from the loan principal rather than from the total payment. It's also useful for extending the demo — ask it to add a PMI slice for down payments under 20%, generate a full month-by-month amortization table showing the split over the entire loan term, or add a second donut comparing a 15-year versus 30-year term side by side. Use the conversation to build real intuition for how rate and term trade off against total interest paid before you rely on the numbers for a real decision.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a "mortgage payment breakdown" calculator in plain HTML, CSS, and JavaScript — no external libraries or CDNs — that splits the monthly payment into principal, interest, tax, and insurance on a live SVG donut chart.
Requirements:
- Input fields for home price, down payment, annual interest rate (%), loan term (a 15 or 30 year select), annual property tax, and annual homeowner's insurance, all wired to recalculate on every input/change event.
- Implement the real fixed-rate amortization formula for the monthly principal-and-interest payment: M = P * [r(1+r)^n] / [(1+r)^n - 1], where P is home price minus down payment, r is the annual rate divided by 12, and n is the term in years times 12 — handle the zero-interest-rate edge case by falling back to a simple division.
- Compute the first month's actual interest amount as the loan principal times the monthly rate, and derive that month's principal amount as the remainder of the fixed payment — do not split principal and interest evenly or arbitrarily.
- Divide the annual tax and annual insurance inputs by 12 to get their monthly contribution, and sum principal + interest + monthly tax + monthly insurance into a total monthly payment displayed prominently.
- Render a donut chart as four SVG circles sharing the same center and radius, each using stroke-dasharray and an accumulating stroke-dashoffset so the four arcs exactly tile the full circle in proportion to their dollar share of the total, with no gaps or overlaps, recalculating live as any input changes.
- Show a legend listing each of the four categories with its color swatch and exact dollar amount, matching the donut's colors.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA donut chart and input panel render with example values.
- 2Change the home price or down paymentThe loan principal and every slice recalculate.
- 3Adjust the interest rate or termWatch the principal/interest split shift accordingly.
- 4Edit tax or insuranceThose two slices grow or shrink independently of the loan math.
- 5Read the legendEach slice's exact monthly dollar amount is listed below the donut.
- 6Verify the totalThe center number is the sum of all four slices, PITI in full.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
It's the real, standard fixed-rate amortization formula used by lenders: M = P × [r(1+r)^n] / [(1+r)^n − 1], where P is the loan principal, r is the monthly interest rate, and n is the total number of monthly payments. It is not simplified or approximated.
Because a fixed-rate loan's interest is calculated on the outstanding balance each month, and that balance is largest at the very start of the loan. Early payments are interest-heavy by design — as the balance shrinks over the loan's life, later payments become principal-heavy, even though the total monthly payment stays the same.
PITI stands for Principal, Interest, Taxes, and Insurance — the four components that typically make up a homeowner's full monthly mortgage payment when property tax and insurance are escrowed by the lender. This snippet computes and displays all four as separate donut slices rather than one combined number.
Not by default — PMI is typically required when the down payment is below 20% of the home price and would be a fifth slice. Add it by computing a monthly PMI estimate (commonly 0.5-1% of the loan annually) and including it in the total and the donut's slice list.
Move monthlyPrincipalAndInterest() and the slice-splitting logic into pure functions that take the input values and return the four amounts, then bind those to your framework's state and re-render the SVG stroke-dasharray/dashoffset values reactively instead of writing to the DOM directly.