Partage IA

Créez un fichier html avec des classes bootstrap 4 contenant un SVG représentant deux cercles positionnés horizontalement avec une distance spécifique (S) entre leurs centres.
 Le SVG doit avoir une propriété hauteur et largeur de 100% Chaque cercle doit avoir un rayon (R1,R2) ainsi qu'un espacement (S) modifiable.
 Un bouton calculer lance le calcul et génère le dessin. Voici les étapes pour positionner les 2 cercles 

1. Définir la position des cercles :
- Le premier cercle à une position fixe (x_1, y_1)
- Le deuxième cercle à une position fixe (x_2, y_2) où x2 = x_1 + S
- tracer en noir les cercles. Utiliser un trait contour 1px uniquement.

2. Voici les étapes détaillées pour positionner 2 lignes tangentes externes aux cecles :
- Calculer 4 les points de tangence entre les 2 cercles
 - Déterminer les coordonnées des points de tangence sur chaque cercle.
- Associer la tangente supérieure aux 2 points de tangence supérieurs.
 - Tracer la tangente supérieure et la tangente inférieure en vert.
 - Inclure une ligne rouge reliant les centres des cercles (S) Dimensionner le viewbox :
- Le viewBox du SVG est calculé en fonction des positions des cercles, de leurs rayons et des tangentes.