engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add animated SVG donut charts to commission comparison

Browse source 
Marketplace donut: 70% you (green), 3.5% processing (yellow),
26.5% marketplace (red). MPS donut: 96.5% you (green), 3.5%
processing (yellow). Segments fade in staggered when scrolled
into view. Color legends below each chart.
This commit is contained in:
russell@unturf.com 2026-03-04 17:39:04 -05:00
parent 976a168f97
commit 2dd24f8a2e
1 changed files with 89 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

91
index.html
View file

@ -171,20 +171,107 @@ Open source & public domain — no moat, no castle, just infrastructure
Marketplaces charge 15&#8211;40% commission on every sale. That adds up fast. On a $20 sale at a 30% marketplace, you walk away with $14. On Make Post Sell, you keep <b>$19.12</b> after <a href="https://stripe.com/pricing" target="_blank">payment processing</a>.
<div class="mps-comparison">
<div class="mps-comparison-card marketplace">
<!-- Marketplace donut: 70% you, 3.5% processing, 26.5% marketplace -->
<div class="mps-comparison-card marketplace" style="padding-bottom: 30px;">
<svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200" style="display: block; margin: 0 auto 16px;">
<!-- You: 70% = 252° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#678731" stroke-width="30"
stroke-dasharray="307.8 131.9" stroke-dashoffset="110"
transform="rotate(-90 100 100)" />
<!-- Payment Processing: 3.5% = 12.6° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#d4a843" stroke-width="30"
stroke-dasharray="15.4 424.3" stroke-dashoffset="-197.8"
transform="rotate(-90 100 100)" />
<!-- Marketplace: 26.5% = 95.4° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#c77765" stroke-width="30"
stroke-dasharray="116.5 323.2" stroke-dashoffset="-213.2"
transform="rotate(-90 100 100)" />
<!-- Center hole -->
<circle cx="100" cy="100" r="55" fill="#f8d7da" />
</svg>
<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
<span style="font-size: 12px;"><span style="color: #678731;">&#9632;</span> You 70%</span>
<span style="font-size: 12px;"><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span>
<span style="font-size: 12px;"><span style="color: #c77765;">&#9632;</span> Marketplace 26.5%</span>
</div>
<span class="mps-comparison-amount" style="color: #c77765;">$14.00</span>
<span class="mps-comparison-label">Marketplace (30% commission)</span>
</div>
<div class="mps-comparison-card mps">
<!-- MPS donut: 96.5% you, 3.5% processing -->
<div class="mps-comparison-card mps" style="padding-bottom: 30px;">
<svg class="donut-chart" viewBox="0 0 200 200" width="200" height="200" style="display: block; margin: 0 auto 16px;">
<!-- You: 96.5% = 347.4° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#678731" stroke-width="30"
stroke-dasharray="424.3 15.4" stroke-dashoffset="110"
transform="rotate(-90 100 100)" />
<!-- Payment Processing: 3.5% = 12.6° -->
<circle class="donut-segment donut-animate" cx="100" cy="100" r="70" fill="none"
stroke="#d4a843" stroke-width="30"
stroke-dasharray="15.4 424.3" stroke-dashoffset="-314.3"
transform="rotate(-90 100 100)" />
<!-- Center hole -->
<circle cx="100" cy="100" r="55" fill="#e8f5d4" />
</svg>
<div style="display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
<span style="font-size: 12px;"><span style="color: #678731;">&#9632;</span> You 96.5%</span>
<span style="font-size: 12px;"><span style="color: #d4a843;">&#9632;</span> Processing 3.5%</span>
</div>
<span class="mps-comparison-amount" style="color: #678731;">$19.12</span>
<span class="mps-comparison-label">Make Post Sell (0% commission)</span>
</div>
</div>
That gap compounds. Run <a target="_blank" href="https://docs.google.com/spreadsheets/d/138fW3wlNowTv09nKeIe_TZrWsLIHVoD7PdlI2HXGmLs/copy?usp=sharing">your own numbers</a> to see how much commission-free saves over a year.
</section>
<script>
// Animate donut charts when they scroll into view
(function() {
var animated = false;
var segments = document.querySelectorAll('.donut-animate');
// Set initial state: all segments start with no visible stroke
segments.forEach(function(seg) {
seg.style.opacity = '0';
seg.style.transition = 'stroke-dasharray 1.2s ease-out, opacity 0.4s ease';
});
function animateDonuts() {
if (animated) return;
var charts = document.querySelectorAll('.donut-chart');
for (var i = 0; i < charts.length; i++) {
var rect = charts[i].getBoundingClientRect();
if (rect.top < window.innerHeight * 0.85) {
animated = true;
segments.forEach(function(seg, idx) {
setTimeout(function() {
seg.style.opacity = '1';
}, idx * 150);
});
window.removeEventListener('scroll', animateDonuts);
break;
}
}
}
window.addEventListener('scroll', animateDonuts);
// Also check on load in case already visible
animateDonuts();
})();
</script>
<hr class="mps-section-divider"/>
<!-- ======== PROTECTION ======== -->