The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Create An SVG Image Mask

TODO: Pull subtitle into page object html_start_default_section html_end_default_section

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Create An SVG Image Mask

This is the code that I'm using to make 
makes for images with SVG

-- html/
-- show: below

<svg width="547" height="300" 
      viewBox="0 0 547 300" 
      xmlns="http://www.w3.org/2000/svg">

  <mask id="main-mask">

    <rect 
      fill="white" 
      width="547" 
      height="300" 
      rx="20" 
      x="0" 
      y="0"
    />

    <rect 
      fill="black" 
      width="100" 
      height="100"
      rx="20" 
      x="30" 
      y="30"
    />
  </mask>

  <image 
    href="/images/examples/background.jpg" 
    width="100" 
    height="100" 
    x="30" 
    y="30" 
  /> 

  <image 
    href="/images/examples/foreground.jpg" 
    mask="url(#main-mask)" 
    width="547" 
    height="300" 
    x="0" 
    y="0"
  />

</svg>

-- /html


-- todo

[] show this with just a single image first




-- list

- This example shows how to make a transparent hole in one image to show an image below it

- The process is to make a mask with two rectangles in it. One white, one black.

- The white rectangle defines the area that will show. Anything that's black is transparent.

- Since the black comes after the white it's on top which means it makes the area transparent

- The background image is placed before the foreground in the code which means it's behind it

- By applying the mask to the foreground image with url(#main-mask) the background image shows through where the transparency is





-- categories
-- HTML
-- Design
-- WebDev

-- metadata
-- date: 2023-08-18 14:50:13
-- id: 2uaa0dac
-- site: aws
-- type: post
-- status: draft