Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Irregularities in Mandala SVG

See original GitHub issue

Summary

The header background (Mandala) on MDN Web Docs homepage caught my attention. But the SVG seems a bit irregular. Further lookup bought me to mandala/index.scss and mandala/index.tsx.

index.scss
- .mandala-container doesn’t include --mandala-accent-5
- .mandala-accent-4 > textPath > tspan { } doesn’t exist
index.tsx
- Due to line-brakes in L120-L140, the circles looks segmented in-between.
- mandala-accent-4 doesn’t have any <tspan></tspan> so animateColors won’t work on this circle
- MDN Plus product page Mandala’s 4th circle spin bug
  - https://github.com/mdn/yari/blob/e9bae54c292016d3f064c14aac6a5e253b6e9af6/client/src/ui/molecules/mandala/index.tsx#L95-L96

URL

Reproduction steps

Visit MDN Web Docs and MDN Plus
Inspect mandala-container via Developer Tools

Expected behavior

Resultant Mandala SVG should not have above mentioned irregularities.

Actual behavior

Resultant Mandala SVG has above mentioned irregularities.

Device

Desktop

Browser

Firefox

Browser version

Stable

Operating system

Linux

Screenshot

Screenshot from 2022-04-07 22-17-06

Anything else?

No response

Validations

I have read the Community Participation Guidelines.
I have verified that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

Issue Analytics

State:
Created a year ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

PROxZIMAcommented, Apr 26, 2022

Yep, we can close this issue. Thanks!!

0reactions

schalkneethlingcommented, Apr 26, 2022

@PROxZIMA looks like this was resolved by https://github.com/mdn/yari/pull/5941, correct?

Top Results From Across the Web

Layered 3D Mandala Puerto Rico SVG 5 layers - Etsy

DESCRIPTION: The image is a layered SVG containing 5 different layers, that you can put one on top of the other. You can...

Split Monogram SVG Half Mandala SVG File for Cricut WALL

Split Monogram SVG, Half Mandala SVG File For Cricut, WALL Decor Corner Mandala Svg, Boho, Bohemian svg, Mandala Moon ,Moon Mandala, Dream. $2.59...

FREE LAYERED ALPHA MANDALA SVG SET

Free instant download of layered mandala alphabet letters with pretty floral elements. Works perfectly with your Cricut or Silhouette to make a fun...

Layered Sunflower Mandala SVG Files and Tutorial - YouTube

Make easy and beautiful layered paper mandalas. Sunflower, pumpkin, fall leaf and turkey design. Be sure to click on "SHOW MORE" below for ......

Mandala Square SVG Design Instant Download

TRW's Mandala Square SVG design was created with the crafting process in mind. Each SVG, EPS, CDR, AI, PNG, PDF download file comes...