Skip to content

Instantly share code, notes, and snippets.

@jack126guy

jack126guy/gradient-test.svg

Last active March 24, 2019 19:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jack126guy/f7b6c7f08242e1436c690b1d0288aa0d to your computer and use it in GitHub Desktop.
Save jack126guy/f7b6c7f08242e1436c690b1d0288aa0d to your computer and use it in GitHub Desktop.
Download ZIP
Test of support for "currentColor" in SVG gradients
Display the source blob
Display the rendered blob
Raw
gradient-test.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256">
<defs>
<radialGradient id="test-gradient" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="currentColor" stop-opacity="0"/>
</radialGradient>
</defs>
<rect x="0" y="0" width="256" height="256" color="#000"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(30 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(60 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(90 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(120 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(150 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(180 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(210 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(240 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(270 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(300 128 128)"/>
<circle cx="128" cy="32" r="16" fill="url(#test-gradient)" color="#00f" transform="rotate(330 128 128)"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment