css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. What's going on is that percentages and patterns suck. Avoid them, they never do anything useful.

    More specifically, what is going on is this:

    In your main SVG, you don't have a viewBox, so the meaning of 1% width or height will be based on the CSS width or height. Say your screen size is such that the CSS width is 500px. That means that 1% width (not inside a pattern, just when drawing a shape) would be equal to 5px. Which in SVG can also just be written as "5" without units (and is also known as SVG user units).

    Now, the pattern is set to use patternContentUnits = "objectBoundingBox". That means that all user coordinate values inside the pattern contents are scaled such that the entire width or height of the bounding box of the shape being filled by the pattern is equal to 1 user unit, which is equal to 1px in that scaled system. So if the inside your pattern had `width="1px"` and `height="1px"`, it would exactly match the size of the that the pattern is being applied to.

    But here's the thing (and the reason why patterns and percentages suck): the ratio of 1% width to 1px width doesn't change when you apply a scale. So if 1% width is 5px at the current SVG size, it will now be 5 times the width of the shape being filled with the pattern. Which also means that, at that scale, 0.1% width is 0.5 the width of the shape. The exact ratio changes as the overall size of the SVG changes (again, this is because you don't have a viewBox, so the amount of px in 1% in the main SVG changes depending on the SVG size.)

    What to do instead:

    Percentages don't do what you want, but you can use the objectBoundingBox units instead. Since the width of the bounding box is 1 unit, 1% of that width is just 0.01 units. No percentage sign, no problem.

  2. @AmeliaBR thank you so much! Very helpful : )

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.