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
140
Go home, Prettifier, you’re drunk!!
Avatar for Gunnar Bittersmann gunnarbittersmann
0
95
3 Fehler sind zu finden
Avatar for Gunnar Bittersmann gunnarbittersmann
0
170
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
100
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
96
The color rebeccapurple
Avatar for Gunnar Bittersmann gunnarbittersmann
0
160
Mehrsprachige Websites
Avatar for Gunnar Bittersmann gunnarbittersmann
0
100

Other Decks in Programming

See All in Programming
登壇は dynamic! な営みである / speech is dynamic
Avatar for Daichi KUDO da1chi
0
350
O Que É e Como Funciona o PHP-FPM?
Avatar for Marcel dos Santos marcelgsantos
0
140
NixOS + Kubernetesで構築する自宅サーバーのすべて
Avatar for ichi-h ichi_h3
0
1.1k
CSC305 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
220
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
410
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
Avatar for CARTA Engineering carta_engineering
0
400
釣り地図SNSにおける有料機能の実装
Avatar for nokonoko1203 nokonoko1203
0
190
モテるデスク環境
Avatar for mozumasu mozumasu
3
830
技術的負債の正体を知って向き合う
Avatar for irof irof
0
220
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
Avatar for shogogg shogogg
1
320
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
330
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
Avatar for 入井 啓太 iriikeita
0
320

Featured

See All Featured
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.7k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.8k
Done Done
Avatar for chrislema chrislema
185
16k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k

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