Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL about clipping

TIL about clipping

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

March 29, 2021
Tweet

Transcript

  1. TIL about clipping

  2. Photo by Flavio Gasperini on Unsplash

  3. None
  4. <defs> <mask id="x"> <rect width="3000" height="630" fill="white"!" <ellipse cx="1510" cy="411"

    rx="220" ry="214" fill="black" stroke="none"!" !#mask> !#defs> <g mask="url(#x)">
  5. <defs> <clipPath id="x"> <rect width="3000" height="630" fill="white"!" <ellipse cx="1510" cy="411"

    rx="220" ry="214" fill="black" stroke="none"!" !#clipPath> !#defs> <g clip path="url(#x)">
  6. <defs> <clipPath id="x"> <path d="................................................................ ................................................................"!" !#clipPath> !#defs> <g clip-path="url(#x)">

  7. Photo by Flavio Gasperini on Unsplash