Annotated Seal Awards Block for React

The test run sits at the top of the file: CASES, PASSED, TESTED_ON, VALID_MONTHS and SERIAL. The grade comes from gradeOf (A at 95% or more of cases passed, B at 85%, C at 70%, otherwise D), the ribbon year from TESTED_ON, and the last day from the test day plus VALID_MONTHS. The list text in LEADERS reads those values, so the seal, the list and the dates always agree.

RING_TEXT runs along a circle drawn in the same SVG (an SVG text path) and is stretched to fill it, so a longer or shorter name still closes the ring. The path has a fixed id, vellumby-seal-ring; if you put two seals on one page, give each its own id.

Each entry in LEADERS has the dot on the seal (dotX, dotY) and the chip's centre (chipX, chipY), both in a 480 by 300 box that holds the seal in its middle 300 by 300. The line and the chip are both drawn from those numbers, so changing one entry moves both ends.

The whole drawing, the ring text, the grade, the ribbon and the serial overlay are hidden from assistive technology, and the numbered list carries everything they show. The list is named "How to read the seal", each mark is a heading with a sentence, and the test and last days are real time elements.

No. The lab, the guild and the serial are made up, and the seal is drawn by the block, not copied from any testing body. If you show a real seal, use its official artwork only if its rules allow it, and keep the explanation in text.

Below md the seal stands alone at 256 pixels with its grade, ribbon year and serial, the chips and leaders are hidden, and the list sits under it with its own numbers. From md the figure widens and the leaders appear; from lg the figure moves to the end beside the list. In a right-to-left layout the drawing stays as drawn, because a seal is symmetric artwork.