SVG (With Cone-Gradient ) Shows Up in CSS Code Via Google Chrome Inspection Tool, But Not In My Code Otherwise

SVG (With Cone-Gradient ) Shows Up in CSS Code Via Google Chrome Inspection Tool, But Not In My Code Otherwise
0.0 0

#1

Hi folks,
I’m having a weird, and super-annoying issue. When I put my code into the editor in Code Pen, everything works/shows. However, when I copy the code into my own desktop-based editor, Sublime, the same image does not show up in the browser. I have no idea why this. When I inspected my code with Google Chrome Dev Tool, I see this in the CSS:

url(data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="htt…2f7C2euRUKAJiWVtwNBxZivrPg4f/z8bY9et0p9gAAAABJRU5ErkJggg==" /></svg></svg>)

My question is why I’m I seeing this when I use the Google Chrome inspection tool, even though this is not in my original code?

See my Code Pen here:

Here is the code from my Codepen that I input into my desktop editor

HTML code:
`

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Chrome Border Test.css">
<script type="text/javascript">href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/conic-gradient.js"></script> 
<script type="text/javascript"> href="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
</head>
<body>
  <button></button>
</body>
</html>

`

CSS code:

/* control diameter */ /* border-width */ /* perforation diameter */ /* perforation radius */ body { overflow: hidden; margin: 0; display: flex; justify-content: center; height: 100vh; background: #252525; } button { align-self: center; box-sizing: border-box; border: solid 1.5em transparent; padding: 1.5em; width: 27em; height: 27em; border-radius: 5%; /*CHANGED FROM 50%*/ box-shadow: 0 -1px 1px #eee, 0 2px 2px #1d1d1d, inset 0 0 1px #666, inset 0 1px 0.125em #8b8b8b, inset 0 2px 0.25em #a4a2a3, inset 0 -1px 0.125em #8b8b8b, inset 0 -2px 0.25em #a4a2a3, inset 0 0 0 0.375em #cdcdcd; background: repeating-radial-gradient(rgba(228, 228, 228, 0) 23px, rgba(228, 228, 228, .05) 25px, rgba(228, 228, 228, 0) 27px) content-box, repeating-radial-gradient(rgba(166, 166, 166, 0) 13px, rgba(166, 166, 166, .05) 15px, rgba(166, 166, 166, 0) 17px) content-box, repeating-radial-gradient(rgba(139, 139, 139, 0) 19px, rgba(139, 139, 139, .05) 21px, rgba(139, 139, 139, 0) 23px) content-box, conic-gradient(#cdcdcd, #9d9d9d, #808080, #bcbcbc, #c4c4c4, #e6e6e6, #ddd, #a1a1a1, #7f7f7f, #8b8b8b, #bfbfbf, #e3e3e3, #d2d2d2, #a6a6a6, #858585, #8d8d8d, #c0c0c0, #e5e5e5, #d6d6d6, #9e9e9e, #828282, #8f8f8f, #bdbdbd, #e3e3e3, #cdcdcd) content-box, radial-gradient(#00d7ff 53%, transparent 65%, transparent 70%, #8b8b8b 70%) padding-box, radial-gradient(#272727 20%, transparent 25%) 0 0 / 1.25em 1.25em padding-box, radial-gradient(#272727 20%, transparent 25%) 0.625em 0.625em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, transparent 28%) 0 0.125em / 1.25em 1.25em padding-box, radial-gradient(#444 20%, #3d3d3d 28%) 0.625em 0.75em / 1.25em 1.25em padding-box, conic-gradient(#b5b5b5, #8d8d8d, #838383, #ababab, #d7d7d7, #e3e3e3, #aeaeae, #8f8f8f, #878787, #acacac, #d7d7d7, #ddd, #b8b8b8, #8e8e8e, #848484, #a6a6a6, #d8d8d8, #e3e3e3, #8e8e8e, #868686, #a8a8a8, #d5d5d5, #dedede, #b5b5b5) border-box; /* ======= content-box ======= */ /* circular lines - 13, 19, 23 being prime numbers */ /* conic reflections */ /* ======= padding-box ======= */ /* cyan glow */ /* holes */ /* ======= border-box ======= */ /* ring */ }