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

TIL about clipping

Avatar for Gunnar Bittersmann Gunnar Bittersmann
March 29, 2021
Programming
36
0

TIL about clipping

Avatar for Gunnar Bittersmann

Gunnar Bittersmann

March 29, 2021

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
Responsive typography 2
Avatar for Gunnar Bittersmann gunnarbittersmann
0
170
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
190
TIL that the future :has already begun
Avatar for Gunnar Bittersmann gunnarbittersmann
0
130
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
120
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
130
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
190
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110

Other Decks in Programming

See All in Programming
ハーネスエンジニアリングとは？
Avatar for kinopee kinopeee
13
6.6k
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
330
GoogleCloudとterraform完全に理解した
Avatar for Terisuke terisuke
1
180
2026年のソフトウェア開発を考える（2026/05版） / Software Engineering Scrum Fest Niigata 2026 Edition
Avatar for Takuto Wada twada
PRO
19
9.9k
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
810
AIと共に生きる技術選定 2026
Avatar for Sugar Sato sgash708
0
120
2026_04_15_量子計算をパズルとして解く
Avatar for HideakiTakechi hideakitakechi
0
130
Claude Codeをカスタムして自分だけのClaude Codeを作ろう
Avatar for Terisuke terisuke
0
160
Liberating Ruby's Parser from Lexer Hacks
Avatar for ydah ydah
2
2.5k
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
330
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
520
属人化しないコード品質の作り方_2026.04.07.pdf
Avatar for Masaki Murano muraaano
0
300

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
6
620
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
730
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
140
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
180
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
330

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. “

  7. <defs> <clipPath id="x"> <path d="................................................................ ................................................................"!" !#clipPath> !#defs> <g clip-path="url(#x)">

  8. Photo by Flavio Gasperini on Unsplash