Skip to content

Instantly share code, notes, and snippets.

@alexmwalker
Created October 8, 2023 07:06
Show Gist options
  • Select an option

  • Save alexmwalker/c29eec18fbf6e81932125119c184295c to your computer and use it in GitHub Desktop.

Select an option

Save alexmwalker/c29eec18fbf6e81932125119c184295c to your computer and use it in GitHub Desktop.
A simple SVG lens flare / star to be referenced in other prototypes
Display the source blob
Display the rendered blob
Raw
<svg class="pop" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="25" cy="25" r="25" id="gradient-0" gradientTransform="matrix(-1, 0, 0, -0.154, 50, 29)">
<stop offset="0" stop-color="rgb(255, 255, 255)"></stop>
<stop offset="0.5" stop-color="rgb(255, 255, 255)"></stop>
<stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="25" cy="25" r="12" id="gradient-2">
<stop offset="0" stop-color="rgb(255, 255, 255)"></stop>
<stop offset="1" stop-color="rgba(255, 255, 255, 0)"></stop>
</radialGradient>
</defs>
<ellipse style="fill: url(#gradient-0);" cx="25" cy="25" rx="25" ry="4.63"></ellipse>
<ellipse style="fill: url(#gradient-0);transform-origin: 50% 50%;transform:rotate(90deg)" cx="25" cy="25" rx="25" ry="4.63"></ellipse>
<ellipse style="fill: url(#gradient-2);" cx="25" cy="25" rx="11.03" ry="12"></ellipse>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment