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
0
30

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
130
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
91
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
TIL that the future :has already begun
Avatar for Gunnar Bittersmann gunnarbittersmann
0
100
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
98
TIL about showModal (from small things big things one day come)
Avatar for Gunnar Bittersmann gunnarbittersmann
0
110
Inclusive Design 24 2022 – Gunnar’s picks
Avatar for Gunnar Bittersmann gunnarbittersmann
0
95
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
150
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
98

Other Decks in Programming

See All in Programming
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.3k
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
110
FindyにおけるTakumi活用と脆弱性管理のこれから
Avatar for adachi.ryo rvirus0817
0
140
AHC051解法紹介
Avatar for eijirou eijirou
0
640
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.4k
もうちょっといいRubyプロファイラを作りたい (2025)
Avatar for osyoyu osyoyu
0
180
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
Avatar for MinoDriven minodriven
24
9.2k
Nuances on Kubernetes - RubyConf Taiwan 2025
Avatar for Andrey Novikov envek
0
210
あのころの iPod を どうにか再生させたい
Avatar for orumin orumin
2
2.5k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
Avatar for technuma technuma
2
230
『リコリス・リコイル』に学ぶ！！ 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
Avatar for わんこ(Wanko_IT) wanko_it
1
610
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
240

Featured

See All Featured
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
The Language of Interfaces
Avatar for Des Traynor destraynor
160
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Visualization
Avatar for Eitan Lees eitanlees
147
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
110
20k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k

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