Cutout Component

General Information

• Cutouts are generated through a svelte Cutout component, which can be imported by including the following line in the file's script tag:
  import Cutout from '$lib/components/Cutout.svelte';
• The cutouts are applied by adding a composite mask to the target container. The mask itself is an url-encoded SVG image which gets generated automatically by the Cutout component based on the desired parameters, including its corresponding mask size, position and composition values.
• Cutouts can be applied to all four corners of the target container. Said corners are referred to as the topLeft, topRight, bottomLeft and bottomRight corners.
• The Cutout component has three parameters through which the cutout can be configured.
  1. config: An object that defines the cutouts that are to be applied. A cutout definition can be provided for one of the four corners of the container by using its name as the key in the object. Furthermore, each object can have multiple cutouts defined as long as they are on different corners. A cutout definition is defined as follows:
     1. Value 'small' applies a cutout that corresponds to a half by half-block circle.
     2. Value 'button' renders a cutout that fits a default-sized button.
     3. An object can be provided to generate a cutout with custom sizing. The object will need to provide the width and height of the cutout in half-blocks (excluding padding). Optionally, the radiusStart, radiusInner, radiusEnd and padding of the cutout can be defined in half-blocks as well. Note that radiusStart is the radius of the curve connected to the horizontal border and radiusEnd is the radius of the curve bordering the vertical border.
  2. useGrid: Defines whether the cutout should be placed by grid rows/columns or through absolute positioning (default true). Additionally, the cutout element will copy its parent's grid layout if set to true. Note that an explicit height needs to be set through height or grid-template-columns for the grid positioning to work correctly. The inclusion of position relative is required on the parent node in case no grid is used.
  3. excludeInMobile: Specifies whether the cutout should be disabled in mobile mode (default false) by setting all mask properties to initial.
• The cutout defined through the Cutout component will be applied to all elements contained within its tags. Therefore, an element needs to be placed outside of the Cutout tags if you need said element to appear over a cutout area.