star.scss

@use './utils';

:root {
  --bespoke-marp-transition-star-mask: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20951.1%22%3E%3Cpath%20d%3D%22m500%200%20118%20363.3h382L691%20587.8l118%20363.3-309-224.6-309%20224.6%20118-363.3L0%20363.3h382L500%200z%22%2F%3E%3C%2Fsvg%3E');
}

@mixin star-mask {
  mask-image: var(--bespoke-marp-transition-star-mask);
  mask-position: center center;
  mask-repeat: no-repeat;

  @content;
}

@keyframes marp-incoming-transition-__builtin__star {
  from {
    @include star-mask {
      mask-size: 0 0;
    }
  }

  to {
    @include star-mask {
      mask-size: 270vmax 270vmax;
    }
  }
}

@keyframes marp-outgoing-transition-backward-__builtin__star {
  from {
    @include star-mask {
      mask-size: 270vmax 270vmax;
    }
  }

  to {
    @include star-mask {
      mask-size: 0 0;
    }
  }
}

@keyframes marp-incoming-transition-backward-__builtin__star {
  @include utils.send-backward;
}