liefdesbrieven

<!doctype html><meta charset="utf-8">
<style>
  body{margin:0;padding:40px;background:#ddd;font:14px system-ui;display:grid;grid-template-columns:auto auto;gap:40px;align-items:start}
  .row{display:flex;gap:24px;align-items:flex-end}
  img{display:block}
  .mask{width:192px;height:192px;border-radius:50%;overflow:hidden;position:relative;background:#1F2C55}
  .mask img{position:absolute;inset:0;width:100%;height:100%}
  .sq{border-radius:22%;overflow:hidden}
  figure{margin:0}figcaption{margin-top:6px;color:#333}
</style>
<figure><div class="row">
  <img class="sq" src="icon-only.svg" width="192">
  <img class="sq" src="icon-only.svg" width="96">
  <img class="sq" src="icon-only.svg" width="48">
  <img class="sq" src="icon-only.svg" width="24">
</div><figcaption>icon-only (afgerond zoals iOS/launchers dat doen)</figcaption></figure>
<figure><div class="row">
  <div class="mask"><img src="icon-background.svg"><img src="icon-foreground.svg"></div>
  <img src="../icon-only.png" width="96" style="border-radius:22%">
  <img src="favicon.svg" width="32">
  <img src="favicon.svg" width="16">
</div><figcaption>adaptive (cirkelmasker) · icon-only.png · favicon 32/16</figcaption></figure>
<figure><img src="../splash.png" width="420" style="border-radius:24px"><figcaption>splash.png</figcaption></figure>
<figure><img src="../splash-dark.png" width="420" style="border-radius:24px"><figcaption>splash-dark.png</figcaption></figure>