Tutorial by Examples

A green rect with a round hole in the middle showing the image background underneth. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <mask id="myMask"> <rect x="0&quot...

A green rect with a complex mask applied to it showing the background image. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <mask id="myMask0"> <circle cx="50" c...

a green rect (again...) with 4 holes created using 4 greyscale values resulting in 4 different opacities. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <mask id="myMask"> &l...

A green rect with a hole in the middle, with soft edges. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <radialGradient id="rg"> <stop offset="0" stop-color="...