58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
|
|
// Scallop radius for the flower-like outer border
|
|
const SCALLOP_R = (R, n) => R * Math.sin(Math.PI / n);
|
|
|
|
function scallopPath(cx, cy, R, n) {
|
|
const r = SCALLOP_R(R, n);
|
|
const pts = [];
|
|
for (let i = 0; i < n; i++) {
|
|
const a = (i / n) * 2 * Math.PI - Math.PI / 2;
|
|
pts.push([cx + R * Math.cos(a), cy + R * Math.sin(a)]);
|
|
}
|
|
let d = `M ${pts[0][0].toFixed(2)} ${pts[0][1].toFixed(2)} `;
|
|
for (let i = 0; i < n; i++) {
|
|
const p2 = pts[(i + 1) % n];
|
|
d += `A ${r.toFixed(2)} ${r.toFixed(2)} 0 0 0 ${p2[0].toFixed(2)} ${p2[1].toFixed(2)} `;
|
|
}
|
|
return d + 'Z';
|
|
}
|
|
|
|
function starPath(cx, cy, outer, inner, points = 5) {
|
|
let d = '';
|
|
for (let i = 0; i < points * 2; i++) {
|
|
const r = i % 2 === 0 ? outer : inner;
|
|
const a = (i / (points * 2)) * 2 * Math.PI - Math.PI / 2;
|
|
const x = cx + r * Math.cos(a);
|
|
const y = cy + r * Math.sin(a);
|
|
d += `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)} `;
|
|
}
|
|
return d + 'Z';
|
|
}
|
|
|
|
export default function VerifiedStamp({ size = 26, className = '' }) {
|
|
const cx = 50, cy = 50, R = 44, n = 12;
|
|
const green = '#9FD34E';
|
|
const textPath = `M ${cx} ${cy - 36} A 36 36 0 1 1 ${cx - 0.01} ${cy - 36}`;
|
|
const label = 'VERIFIED \u2022 VERIFIED \u2022 VERIFIED \u2022';
|
|
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 100 100"
|
|
className={className}
|
|
role="img"
|
|
aria-label="Verified identity"
|
|
>
|
|
<path d={scallopPath(cx, cy, R, n)} fill={green} />
|
|
<circle cx={cx} cy={cy} r={36} fill="#FFFFFF" />
|
|
<circle cx={cx} cy={cy} r={36} fill="none" stroke={green} strokeWidth="1.5" />
|
|
<path id="verified-stamp-arc" d={textPath} fill="none" />
|
|
<text fontSize="6.5" fontWeight="700" fill={green} letterSpacing="0.5" fontFamily="Sora, sans-serif">
|
|
<textPath href="#verified-stamp-arc" startOffset="0%">{label}</textPath>
|
|
</text>
|
|
<path d={starPath(cx, cy + 1, 13, 5.5)} fill={green} />
|
|
</svg>
|
|
);
|
|
} |