Prevent hero overflowing sibling hero during transition

I'm creating a hero animation using Flutter. I have positioned svg circles inside a card and the circles overflow the card borders and the overflowing parts are hidden when it's not transitioning which is how I want it to be during the animation as well.

I was looking for a way to nest heroes to keep the circles inside the card but it seems they have removed support for that.

The circle overflows the card borders during the animation as you can see on the link:

Animation

Is it somehow possible to clip the circles so they don't overflow the card?

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

...

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.red,
    body: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [SizedBox(height: 100), MyCard()],
      ),
    ),
  );
}

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double cardWidth = MediaQuery.of(context).size.width - 40;
    double cardHeight = cardWidth * 0.629;
    double circleWidth = cardWidth * 0.495;

    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          PageRouteBuilder(
            transitionDuration: Duration(milliseconds: 400),
            pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
              return MyCardFullpage();
            },
            transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
              return Align(
                child: FadeTransition(
                  opacity: new CurvedAnimation(parent: animation, curve: Curves.easeOut),
                  child: GestureDetector(
                      onTapDown: (details) {
                        Navigator.pop(context);
                      },
                      child: child),
                ),
              );
            },
          ),
        );
      },
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [BoxShadow(color: Color(0x16000000), offset: Offset(0, 4), blurRadius: 6)],
        ),
        child: Stack(
          children: [
            Hero(
              tag: 'mycard-background',
              transitionOnUserGestures: true,
              child: Container(
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.blueGrey), width: cardWidth, height: cardHeight),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: -0.092 * cardWidth,
              top: -0.215 * cardHeight,
              child: Hero(tag: 'mycard-circle1', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: 0.685 * cardWidth,
              top: -0.220 * cardHeight,
              child: Hero(tag: 'mycard-circle2', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: 0.600 * cardWidth,
              top: 0.344 * cardHeight,
              child: Hero(tag: 'mycard-circle3', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
          ],
        ),
      ),
    );
  }
}

class MyCardFullpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double fullWidth = MediaQuery.of(context).size.width;
    double fullHeight = MediaQuery.of(context).size.height;
    double circleWidth = fullHeight * 0.495;

    return Scaffold(
      body: Stack(
        children: [
          Hero(
            tag: 'mycard-background',
            child: Container(
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.blueGrey), width: fullWidth, height: fullHeight),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: -0.592 * fullWidth,
            top: -0.215 * fullHeight,
            child: Hero(tag: 'mycard-circle1', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: 0.785 * fullWidth,
            top: -0.25 * fullHeight,
            child: Hero(tag: 'mycard-circle2', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: 0.500 * fullWidth,
            top: 0.644 * fullHeight,
            child: Hero(tag: 'mycard-circle3', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
        ],
      ),
    );
  }
}