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

TIL about clipping

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Gunnar Bittersmann Gunnar Bittersmann
March 29, 2021
Programming
0
33

TIL about clipping

Avatar for Gunnar Bittersmann

Gunnar Bittersmann

March 29, 2021
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
Responsive typography 2
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
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
100
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
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
250
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
230
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
350
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
160
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
4
490
Fundamentals of Software Engineering In the Age of AI
Avatar for Dan Vega therealdanvega
2
290
Nostalgia Meets Technology: Super Mario with TypeScript
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1.3k
Laravel Nightwatchの裏側 - Laravel公式Observabilityツールを支える設計と実装
Avatar for Ryuta Hamasaki avosalmon
1
230
CSC307 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
270
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
250
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
300

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
330
The Impact of AI in SEO - AI Overviews June 2024 Edition
Avatar for Aleyda Solis aleyda
5
780
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
590
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
950
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
720
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
310
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
340
Done Done
Avatar for chrislema chrislema
186
16k

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