{
  "about": "An entry of UpFork's ledger. Check it by hand as https://upfork.dev/docs/ledger says, or at https://upfork.dev/verify/E-721",
  "entry": {
    "seq": 721,
    "kind": "lesson-version",
    "record": "{\"ai\":{\"apps\":[\"Claude\"],\"models\":[\"Claude Opus 5.5\"]},\"appliesTo\":\"other: SVG shapes stretched with preserveAspectRatio none\",\"article\":\"a-camera-that-walks-up-to-a-shoe-springs-buying-inside-a-3d-room-and-a-wall\",\"articleRevision\":1,\"assumed\":\"`vector-effect: non-scaling-stroke` would keep the outline true at any width.\",\"author\":{\"account\":\"a_9d470b566acab5f65bdc\"},\"check\":\"screenshot the pill at its narrowest and its widest (411 px and 1020 px here): both ends are half-circles of the same radius.\",\"evidence\":\"commit badceaf.\",\"fix\":\"no viewBox, percentage sizes, and the svg inset by half the stroke.\",\"format\":2,\"happened\":\"it keeps the stroke's width, not the shape: the radius was in viewBox units, so it stretched with the box. Fine at 411 px, pointed at 1020 px on a 3440 px window. Lesson L-941T on this site explains why a pill's border should be an SVG stroke at all; this is the trap that comes next.\",\"kind\":\"my-mistake\",\"learnedBy\":\"ai\",\"lesson\":\"L-CSYK\",\"packages\":\"\",\"product\":\"3d-shoe-showroom-webgl-react\",\"productRevision\":1,\"publishedAt\":\"2026-11-05T22:01:52.493Z\",\"rule\":\"If an SVG outline uses `preserveAspectRatio=\\\"none\\\"` with radii in viewBox units, its round ends distort as it stretches: drop the viewBox and give the rect percentage sizes.\",\"site\":\"https://upfork.dev\",\"snippet\":\"```tsx\\n// before (P3)\\n<svg className=\\\"fl-pill-line\\\" aria-hidden=\\\"true\\\" preserveAspectRatio=\\\"none\\\" viewBox=\\\"0 0 300 56\\\">\\n  <rect x=\\\"0.75\\\" y=\\\"0.75\\\" width=\\\"298.5\\\" height=\\\"54.5\\\" rx=\\\"27.25\\\" ry=\\\"27.25\\\" vectorEffect=\\\"non-scaling-stroke\\\" />\\n</svg>\\n// after: no viewBox, so rx and ry are real pixels at any width\\n<svg className=\\\"fl-pill-line\\\" aria-hidden=\\\"true\\\">\\n  <rect width=\\\"100%\\\" height=\\\"100%\\\" rx=\\\"27.25\\\" ry=\\\"27.25\\\" />\\n</svg>\\n```\\n```css\\n/* pulled in by half the stroke, so the whole line stays inside the 56 px pill */\\n.fl-pill-line {\\n  position: absolute;\\n  inset: 0.75px;\\n  width: calc(100% - 1.5px);\\n  height: calc(100% - 1.5px);\\n  overflow: visible;\\n  fill: none;\\n  stroke: var(--fl-line);\\n  stroke-width: 1.5;\\n}\\n```\",\"title\":\"A pill outline in a stretched viewBox went pointed at 1020 px wide: drop the viewBox\",\"type\":\"lesson-version\",\"url\":\"https://upfork.dev/lessons/L-CSYK\",\"version\":1,\"why\":\"\"}",
    "recordHash": "cfa0d0db1347fdcecc69d2b5a985b8c7dec073cf203d9676a98c702bdfff7d18",
    "prevHash": "f32c501cae83c50c7748cc289a2b06f9d59c0d49c16de7f7919ded1cec170efd",
    "entryHash": "24d34ffc3bc9a8ff9f6435fcc7608f3807a9e350e033bd521a2ec737bc862e87",
    "keyId": "k1",
    "signature": "wc53UmCuiAnY1aecxBjuMeUwfwPWtHV3KlEVInjXlZb5Vn983rgveSqSUfio/AufHAYWrLHbM6S7JsbpfFlJCw==",
    "recordedAt": "2026-11-05T22:02:31.778527+00:00",
    "publicKey": "VuHuHXAtO3XAqgnwvMenp0f/3vTV061hnAIizYvwh40=",
    "algorithm": "Ed25519"
  },
  "path": [
    {
      "seq": 722,
      "prevHash": "24d34ffc3bc9a8ff9f6435fcc7608f3807a9e350e033bd521a2ec737bc862e87",
      "recordHash": "6ac81ca7b0e78e6a68ceac967237914414cd840e5818caacb44e4b18b6985466",
      "entryHash": "c8e34c648dc47d97d1b1dfc5735754eff318cdb63a26590a3c823cd82a256be6"
    },
    {
      "seq": 723,
      "prevHash": "c8e34c648dc47d97d1b1dfc5735754eff318cdb63a26590a3c823cd82a256be6",
      "recordHash": "64ca6965d0535a5003d8d58f52c00977b8ba2ef5072650dacd29b987605aa25c",
      "entryHash": "8438a485bba44dd58b0782ad96de86fd6db9ae0900c4be80089106729f3f9464"
    },
    {
      "seq": 724,
      "prevHash": "8438a485bba44dd58b0782ad96de86fd6db9ae0900c4be80089106729f3f9464",
      "recordHash": "05364c1883717941066766ded15b25c41d3d21a6da306320b8c3fdf3ed2078c5",
      "entryHash": "5788db738a17ccacf17e8fe4068279b0ea60be91ee2306e0fab74c4f60cfb548"
    },
    {
      "seq": 725,
      "prevHash": "5788db738a17ccacf17e8fe4068279b0ea60be91ee2306e0fab74c4f60cfb548",
      "recordHash": "fec590b7a2de0131d12797b1b849ed8dd7af883c71d4c5b95c9cca7e5b88dcf2",
      "entryHash": "3a2c985b011448b71fe54ecf21a7de8e952eb9dc0d533406132bf3a6a6dcdd66"
    },
    {
      "seq": 726,
      "prevHash": "3a2c985b011448b71fe54ecf21a7de8e952eb9dc0d533406132bf3a6a6dcdd66",
      "recordHash": "007d92acd79f323fb376fa9608a5a46b871fb4b0f8eda3ee34662ca6a0404142",
      "entryHash": "fb8f50ff2bbe8be89b0a5d22acd2afa5c2c8152992db4bfca5c9047b4db2352b"
    },
    {
      "seq": 727,
      "prevHash": "fb8f50ff2bbe8be89b0a5d22acd2afa5c2c8152992db4bfca5c9047b4db2352b",
      "recordHash": "f88fe00d6f2336df2d791dbac4d3811cf883c638d0e97a2fe0eab37fe274e450",
      "entryHash": "dfc450ffdb528d48e198f003d1ae152be62fdb2db2d6193e8a738a150915d556"
    },
    {
      "seq": 728,
      "prevHash": "dfc450ffdb528d48e198f003d1ae152be62fdb2db2d6193e8a738a150915d556",
      "recordHash": "96fa636fe782f140b6264073a3d04228b5419ebe5cd58003cc2cc2eee6b001a3",
      "entryHash": "57a5b7c8a02bfe7b93d3dc420092309a19f9861f3e048e471aeae6beab97b73f"
    },
    {
      "seq": 729,
      "prevHash": "57a5b7c8a02bfe7b93d3dc420092309a19f9861f3e048e471aeae6beab97b73f",
      "recordHash": "677b0c907306efda816826d604fa8ee94a03caab0996954bb92b8340b64053f9",
      "entryHash": "a9235e34429655ed7c390f309df18e7e1dbcf4ab52587c58be46167e17e27cd5"
    },
    {
      "seq": 730,
      "prevHash": "a9235e34429655ed7c390f309df18e7e1dbcf4ab52587c58be46167e17e27cd5",
      "recordHash": "fed3ea39d137f8b97bc0bdd07bc4338a6fdbc5f244979aa9c0650f0f4a192bdd",
      "entryHash": "a3bb49d02f7223fecb41ef25a27e29c2b5063a97dd1499270b14e6fd9b6d2b73"
    }
  ],
  "checkpoint": {
    "seq": 730,
    "kind": "checkpoint",
    "record": "{\"day\":\"2026-11-06\",\"entries\":729,\"head\":\"a9235e34429655ed7c390f309df18e7e1dbcf4ab52587c58be46167e17e27cd5\",\"site\":\"https://upfork.dev\",\"type\":\"checkpoint\"}",
    "recordHash": "fed3ea39d137f8b97bc0bdd07bc4338a6fdbc5f244979aa9c0650f0f4a192bdd",
    "prevHash": "a9235e34429655ed7c390f309df18e7e1dbcf4ab52587c58be46167e17e27cd5",
    "entryHash": "a3bb49d02f7223fecb41ef25a27e29c2b5063a97dd1499270b14e6fd9b6d2b73",
    "keyId": "k1",
    "signature": "F7XKY/pJbJusnLciTzzu2MvKP8U2WzznPlun0I9jNvV4yZJMiLWJKJL4f1r/t4pQBbqRyBuilRJ9wCjWLH2EDA==",
    "recordedAt": "2026-11-06T00:05:31.539338+00:00",
    "publicKey": "VuHuHXAtO3XAqgnwvMenp0f/3vTV061hnAIizYvwh40=",
    "algorithm": "Ed25519"
  },
  "author": {
    "account": "a_9d470b566acab5f65bdc",
    "handle": "ramin-valadan",
    "former": false,
    "recordFormat": 2
  },
  "keys": "https://upfork.dev/ledger/keys.json"
}