Lightning talk about masking in SVG
Photo by Flavio Gasperini on UnsplashTILaboutmasks
View Slide
!!#.w3.org/1999/xlink" viewBox="0 0 3000 630">!%symbol>
32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 00 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>stroke="#fff" stroke-width="20"!$
32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 00 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>stroke="#f5f4f4" stroke-width="20"!$
32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 00 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>stroke="var(!'background)" stroke-width="20"!$
32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 00 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>stroke="var(!'background, #fff)" stroke-width="20"!$
32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 00 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>style="stroke: var(!'background, #fff)" stroke-width="20"!$
32h-34v16l79 132h72l-24-3-77-132s27-5 38-22c9-12 13-26 13-41 00 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>style="stroke: #fff; stroke: var(!'background, #fff)" stroke-width="20"!$
!!#.w3.org/1999/xlink" viewBox="0 0 3000 630">!%mask>!%symbol>
!!#.w3.org/1999/xlink" viewBox="0 0 3000 630">fill="url(#d)" style="stroke: #fff; stroke: var(!'background,#fff)" stroke-width="20"!$!%mask>
!!#.w3.org/1999/xlink" viewBox="0 0 3000 630">fill="black" style="stroke: #fff; stroke: var(!'background,#fff)" stroke-width="20"!$!%mask>
!!#.w3.org/1999/xlink" viewBox="0 0 3000 630">fill="black" stroke="black" stroke-width="20"!$!%mask>
!!#.w3.org/1999/xlink" viewBox="0 0 3000 630">fill="black" stroke="none"!$!%mask>
!%symbol>!%defs>!$xlink:href="#b" !$!$xlink:href="#b" !$
120-21 21-52 18-52 18h-31v-20h32c9 0 23-16 25-491-35-5-66-25-67h-32v261l23 5h-92l23-6zm163-281h93l-23 5v276l217h-91l24-7V15l-24-5zm756 286h159v-65l-8 46h-82V16l23-5h-92l225v276l-22 4z" !$!$!%g>gradientTransform="matrix(10 0 0 10 -10822 -10055)"
0 2-57-13-73 1 0-8-9-20-12l-18-3H401l30 6v277l-23 3z" !$!%g>gradientTransform="matrix(10 0 0 10 -10822 -10055)"gradientUnits="userSpaceOnUse">!%radialGradient>stroke="none"!$
Photo by Flavio Gasperini on Unsplash