Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { text-transform: uppercase; font-weight: bold; } .cake { background: url("/uploads/media/default/0001/03/97433bc96f2a9917e0ed141a28b6903d32f0211e.jpeg"); background-size: cover; padding: 20% 0; } svg { display: block; } </style> </head> <body> <div class="cake"> <svg viewBox="0 0 200 25"> <rect fill="#000" x="0" y="0" width="200" height="100" fill-opacity=".9" mask="url(#text)" /> <mask id="text"> <rect fill="#fff" x="0" y="0" width="200" height="100"></rect> <text y="20" fill="#000" text-anchor="middle" x="100" font-size="25"> Buy Cakes </text> </mask> </svg> </div> </body> </html>