TIL about masks

051dbe29a972707cde167602b38c9778?s=47 Gunnar Bittersmann
August 03, 2020
Programming
1
11

TIL about masks

Lightning talk about masking in SVG

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

August 03, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
20
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
12
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
19
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
45
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
37
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
38
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
19
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
27
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
230

Other Decks in Programming

See All in Programming
6d64a4d4ab6201f2ce57e3befc687785?s=48 yoshi0202
0
130
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
4
1.2k
4ce43cd2535d0afe50065a743af646e9?s=48 dianaarnos
0
290
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
0
100
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
150
2ee9db3a5b6c492acf66ec14c8a5d8dc?s=48 slsops
0
310
E387c487b4fea568909cf805f91afe92?s=48 yuta24
4
320
7c79a6c043825af5c538fb996430607c?s=48 peacemaker07
2
220
30682a28206e455a1bc57d7d85cd1e14?s=48 shomasegi
3
310
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
4
720
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
4
220
7d1521d950d9bc5697868830cb04ff2f?s=48 yimajo
3
450

Featured

See All Featured
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
100
5.7k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
78
3.2k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
52
1.8k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
28
3.2k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
320
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
582
200k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k
78b475797a14c84799063c7cd073962f?s=48 holman
459
270k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
330
29k

Transcript

  1. Photo by Flavio Gasperini on Unsplash TIL about masks

  2. None
  3. None
  4. None
  5. None

  6. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <defs> <symbol

    id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16 16H0v24h119v-24H88c-3-3-7-5-7-15 0-5 3-17 5-24l24-67h96l32 93c2 8-3 13-6 13h-32v23h162zM192 233l-78 1 42-117 36 116z" !$ !%symbol> <symbol id="i" viewBox="0 0 336 369"> <path d="M336 301c-2-2-14-37-14-37-2-6-6-6-11-5-7 2-7

  7. 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30

    6v277l-23 3z" !$ <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" stroke="#fff" stroke-width="20"!$ <clipPath id="e"> <ellipse cx="1510" cy="411" rx="200" ry="194" !$

  8. 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30

    6v277l-23 3z" !$ <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" stroke="#f5f4f4" stroke-width="20"!$ <clipPath id="e"> <ellipse cx="1510" cy="411" rx="200" ry="194" !$

  9. 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30

    6v277l-23 3z" !$ <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" stroke="var(!'background)" stroke-width="20"!$ <clipPath id="e"> <ellipse cx="1510" cy="411" rx="200" ry="194" !$

  10. 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30

    6v277l-23 3z" !$ <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" stroke="var(!'background, #fff)" stroke-width="20"!$ <clipPath id="e"> <ellipse cx="1510" cy="411" rx="200" ry="194" !$

  11. 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30

    6v277l-23 3z" !$ <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" style="stroke: var(!'background, #fff)" stroke-width="20"!$ <clipPath id="e"> <ellipse cx="1510" cy="411" rx="200" ry="194" !$

  12. 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30

    6v277l-23 3z" !$ <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" style="stroke: #fff; stroke: var(!'background, #fff)" stroke- width="20"!$ <clipPath id="e">

  13. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <defs> <mask

    id="x"> !%mask> <symbol id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16 16H0v24h119v-24H88c-3-3-7-5-7-15 0-5 3-17 5-24l24-67h96l32 93c2 8-3 13-6 13h-32v23h162zM192 233l-78 1 42-117 36 116z" !$ !%symbol>

  14. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <defs> <mask

    id="x"> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" style="stroke: #fff; stroke: var(!'background, #fff)" stroke-width="20"!$ !%mask> <symbol id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16

  15. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <defs> <mask

    id="x"> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="black" style="stroke: #fff; stroke: var(!'background, #fff)" stroke-width="20"!$ !%mask> <symbol id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16

  16. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <defs> <mask

    id="x"> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="black" stroke="black" stroke-width="20"!$ !%mask> <symbol id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16 16H0v24h119v-24H88c-3-3-7-5-7-15 0-5 3-17 5-24l24-67h96l32

  17. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <defs> <mask

    id="x"> <ellipse cx="1510" cy="411" rx="220" ry="214" fill="black" stroke="none"!$ !%mask> <symbol id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16 16H0v24h119v-24H88c-3-3-7-5-7-15 0-5 3-17 5-24l24-67h96l32

  18. <svg xmlns="http:!"!!#.w3.org/2000/svg" xmlns:xlink="http:!" !!#.w3.org/1999/xlink" viewBox="0 0 3000 630"> <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> <symbol id="j" viewBox="0 0 364 387"> <path d="M362 386v-23h-18c-11-3-17-13-24-30-11-24-81-261-84-267-3-7-5-16-5-2 4 0-4 3-11 8-16 6-4 6-6 2-17-2-6-7-10-9-9l-83 35c-2 1-7 5-5 9 3 4 4 17 4 28 0 16-43 127-45 132L44 347c-5 12-10 16-16

  19. !%symbol> !%defs> <g mask="url(#x)"> <use width="155" height="311" x="1543" xlink:href="#a" !$

    <use width="149" height="286" x="230" y="10" xlink:href="#b" !$ <use width="149" height="286" x="1365" y="10" xlink:href="#b" !$ <use width="255" height="297" x="1083" y="3" xlink:href="#c" !$ <path d="M719 90V10h182v80l-8-60h-59v261l23 4h-91l23-4V30h-62l-8 60zm165 206h46l-11-2 48-203 26 113h-53l-5 19h64l17 70-16 3h83l-15-3-76-283h-24l-71 282-13 4z" !$ <use width="149" height="286" x="2188" y="10" xlink:href="#b" !$

  20. 120-21 21-52 18-52 18h-31v-20h32c9 0 23-16 25-49 1-35-5-66-25-67h-32v261l23 5h-92l23-6zm163-281h93l-23 5v276l21

    7h-91l24-7V15l-24-5zm756 286h159v-65l-8 46h-82V16l23-5h-92l22 5v276l-22 4z" !$ <use width="255" height="297" x="2368" y="3" xlink:href="#c" !$ <path d="M69 296h69s45-5 57-52c12-46 28-206-42-232l-12-1H1l22 4v276l-23 5h69V30h49s7 1 13 7c23 20 26 85 26 120s-1 71-14 94c-13 24-21 24-31 26H69v19zm339 0h93l-24-4V30h38s10 2 16 14c7 15 7 57 2 72-5 11-13 30-22 32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 0 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$ !%g> <radialGradient id="d" cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)"

  21. 0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$ !%g> <radialGradient id="d"

    cx="1232" cy="1042" r="21" gradientTransform="matrix(10 0 0 10 -10822 -10055)" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#fff" !$ <stop offset=".2" stop-color="#fff" !$ <stop offset=".5" stop-color="#dadada" !$ <stop offset=".8" stop-color="#b5b5b5" !$ !%radialGradient> <ellipse cx="1510" cy="411" rx="210" ry="204" fill="url(#d)" stroke="none"!$ <clipPath id="e"> <ellipse cx="1510" cy="411" rx="200" ry="194" !$

  22. Photo by Flavio Gasperini on Unsplash