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
92
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
110
TIL how to clear floats
Avatar for Gunnar Bittersmann gunnarbittersmann
0
99
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
160
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
98

Other Decks in Programming

See All in Programming
CJK and Unicode From a PHP Committer
Avatar for てきめん tekimen youkidearitai
PRO
0
110
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
560
AIでLINEスタンプを作ってみた
Avatar for kmuto eycjur
1
230
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
1.3k
Processing Gem ベースの、2D レトロゲームエンジンの開発
Avatar for tokujiros tokujiros
2
130
ぬるぬる動かせ！ Riveでアニメーション実装🐾
Avatar for Kuno Ayana kno3a87
1
230
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
Avatar for teamLab teamlab
PRO
1
150
Improving my own Ruby thereafter
Avatar for monochrome sisshiki1969
1
160
Ruby Parser progress report 2025
Avatar for yui-knk yui_knk
1
450
もうちょっといいRubyプロファイラを作りたい (2025)
Avatar for osyoyu osyoyu
1
450
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
Avatar for Naoki Kishida kishida
22
5.9k
Oracle Database Technology Night 92 Database Connection control FAN-AC
Avatar for oracle4engineer oracle4engineer
PRO
1
470

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
513
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

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