CodePen Embed - SVG double border with SVG gradients

<h1>With gradients</h1>

<svg width="100" height="100" viewBox="0 0 100 100" overflow="visible" class="gradients">
<defs>
    <radialGradient id="grad">
      <stop offset="97%" stop-color="red"/>
      <stop offset="97%" stop-color="var(--bg)"/>
      <stop offset="100%" stop-color="var(--bg)"/>
      <stop offset="100%" stop-color="red"/>
    </radialGradient>
  </defs>
  <polygon points="50 0, 100 20, 100 80, 50 100, 0 80, 0 20z" fill="pink" stroke="url(#grad)" />
  <rect x="200" width="100" height="100" fill="pink" stroke="url(#grad)" />
  <circle stroke="url(#grad)" cx="50" cy="50" r="50" transform="translate(400)" />
</svg>


:root {
  --bg: antiquewhite;  
} 

body { background-color: antiquewhite; font-family: 'Roboto', 'Helvetica', sans-serif; }
svg { margin: 1rem }


.gradients {
  fill: pink;
  stroke-width: 6;
}

This Pen is owned by Mariana Beldi on CodePen.

See more by @marianab on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.