Created
April 28, 2026 10:36
-
-
Save TotallyInformation/93072d118c228d073a5a4bed81ab9760 to your computer and use it in GitHub Desktop.
SVG CSS Var Examples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #svgImg { | |
| --uib-world-fill: green; | |
| width: 50%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="./style.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pen</title> | |
| </head> | |
| <body> | |
| <div id="svgImg"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="var(--uib-world-fill, #3B88C3)" d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0M2.05 19h3.983c.092 2.506.522 4.871 1.229 7H4.158a15.9 15.9 0 0 1-2.108-7M19 8V2.081c2.747.436 5.162 2.655 6.799 5.919zm7.651 2c.754 2.083 1.219 4.46 1.317 7H19v-7zM17 2.081V8h-6.799C11.837 4.736 14.253 2.517 17 2.081M17 10v7H8.032c.098-2.54.563-4.917 1.317-7zM6.034 17H2.05a15.9 15.9 0 0 1 2.107-7h3.104c-.705 2.129-1.135 4.495-1.227 7m1.998 2H17v7H9.349c-.754-2.083-1.219-4.459-1.317-7M17 28v5.919c-2.747-.437-5.163-2.655-6.799-5.919zm2 5.919V28h6.8c-1.637 3.264-4.053 5.482-6.8 5.919M19 26v-7h8.969c-.099 2.541-.563 4.917-1.317 7zm10.967-7h3.982a15.9 15.9 0 0 1-2.107 7h-3.104c.706-2.129 1.136-4.494 1.229-7m0-2c-.093-2.505-.523-4.871-1.229-7h3.104a15.9 15.9 0 0 1 2.107 7zm.512-9h-2.503c-.717-1.604-1.606-3.015-2.619-4.199A16 16 0 0 1 30.479 8M10.643 3.801C9.629 4.985 8.74 6.396 8.023 8H5.521a16.05 16.05 0 0 1 5.122-4.199M5.521 28h2.503c.716 1.604 1.605 3.015 2.619 4.198A16 16 0 0 1 5.521 28m19.836 4.198c1.014-1.184 1.902-2.594 2.619-4.198h2.503a16 16 0 0 1-5.122 4.198"/></svg> | |
| </div> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <mask id="mask0_4297_23167" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32"> | |
| <path d="M15.2554 2.79248C15.6162 2.02838 16.7034 2.02821 17.064 2.79248L20.7739 10.6558L29.1626 11.9312C29.9686 12.0539 30.297 13.0375 29.7261 13.6196L23.6274 19.8364L25.0581 28.5591C25.1928 29.3818 24.3201 29.9985 23.5894 29.5972L16.1597 25.5122L8.72998 29.5972C7.99913 29.999 7.12637 29.3821 7.26123 28.5591L8.69092 19.8364L2.59229 13.6196C2.02141 13.0375 2.34973 12.0539 3.15576 11.9312L11.5444 10.6558L15.2554 2.79248ZM15.7065 7.25244L13.0571 12.8687L7.14209 13.7671L6.17627 13.9136L6.86084 14.6118L11.1528 18.9878L10.1382 25.1733L9.97217 26.187L10.8726 25.6919L16.1587 22.7856L21.4438 25.6919L22.3452 26.187L22.1782 25.1733L21.1646 18.9878L25.4565 14.6118L26.1411 13.9136L25.1743 13.7671L19.2603 12.8687L16.6118 7.25244L16.1587 6.29346L15.7065 7.25244ZM13.397 13.3228L7.21729 14.2612L13.396 13.3228L16.1587 7.46533L13.397 13.3228ZM5.79346 4.32568C6.30714 3.88061 7.06444 3.89745 7.55713 4.34033L7.67432 4.46045L10.1743 7.34619C10.6565 7.90266 10.5969 8.74482 10.0405 9.22705C9.52688 9.67209 8.76955 9.65521 8.27686 9.2124L8.15967 9.09229L5.65869 6.20654C5.17662 5.65001 5.23697 4.80785 5.79346 4.32568ZM24.6763 4.34033C25.1689 3.89738 25.9262 3.88073 26.4399 4.32568C26.9965 4.80788 27.0569 5.65 26.5747 6.20654L24.0747 9.09229L23.9565 9.2124C23.4639 9.65501 22.7074 9.6719 22.1938 9.22705C21.6373 8.74485 21.5769 7.90273 22.0591 7.34619L24.5591 4.46045L24.6763 4.34033Z" fill="black"/> | |
| </mask> | |
| <g mask="url(#mask0_4297_23167)"> | |
| <rect width="32" height="32" fill="black"/> | |
| </g> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <mask id="mask0_4297_23167" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32"> | |
| <path d="M15.2554 2.79248C15.6162 2.02838 16.7034 2.02821 17.064 2.79248L20.7739 10.6558L29.1626 11.9312C29.9686 12.0539 30.297 13.0375 29.7261 13.6196L23.6274 19.8364L25.0581 28.5591C25.1928 29.3818 24.3201 29.9985 23.5894 29.5972L16.1597 25.5122L8.72998 29.5972C7.99913 29.999 7.12637 29.3821 7.26123 28.5591L8.69092 19.8364L2.59229 13.6196C2.02141 13.0375 2.34973 12.0539 3.15576 11.9312L11.5444 10.6558L15.2554 2.79248ZM15.7065 7.25244L13.0571 12.8687L7.14209 13.7671L6.17627 13.9136L6.86084 14.6118L11.1528 18.9878L10.1382 25.1733L9.97217 26.187L10.8726 25.6919L16.1587 22.7856L21.4438 25.6919L22.3452 26.187L22.1782 25.1733L21.1646 18.9878L25.4565 14.6118L26.1411 13.9136L25.1743 13.7671L19.2603 12.8687L16.6118 7.25244L16.1587 6.29346L15.7065 7.25244ZM13.397 13.3228L7.21729 14.2612L13.396 13.3228L16.1587 7.46533L13.397 13.3228ZM5.79346 4.32568C6.30714 3.88061 7.06444 3.89745 7.55713 4.34033L7.67432 4.46045L10.1743 7.34619C10.6565 7.90266 10.5969 8.74482 10.0405 9.22705C9.52688 9.67209 8.76955 9.65521 8.27686 9.2124L8.15967 9.09229L5.65869 6.20654C5.17662 5.65001 5.23697 4.80785 5.79346 4.32568ZM24.6763 4.34033C25.1689 3.89738 25.9262 3.88073 26.4399 4.32568C26.9965 4.80788 27.0569 5.65 26.5747 6.20654L24.0747 9.09229L23.9565 9.2124C23.4639 9.65501 22.7074 9.6719 22.1938 9.22705C21.6373 8.74485 21.5769 7.90273 22.0591 7.34619L24.5591 4.46045L24.6763 4.34033Z" fill="black"/> | |
| </mask> | |
| <g mask="url(#mask0_4297_23167)"> | |
| <rect width="32" height="32" fill="black"/> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment