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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment