Here is the approximate effect I'm describing.

enter image description here

It's a linear gradient that has been "circlized". I have Photoshop, Inkscape, or can just notepad some raw svg.

Even just knowing what term to Google for would be useful.

  • 1
    The terms to google: Angle Gradient, or Conical Gradient. It's not supported in the SVG format. In Inkscape you'd have to rasterize a gradient mesh instead (gradient meshes are not currently supported in SVG either). See related question here. – Billy Kerr Feb 20 at 11:42

This effect can be achieved by many different ways like masking and etc but I'll use photoshop's Angle Gradient effect to achieve this one.

  1. Create circle shape via shape tool.
  2. Remove fill and border.
  3. Apply Gradient Effect on circle layer.
  4. Change gradient to single color via removing all extra color nodes (down pins in gradient editor)
  5. Drag opacity controls (upper pins in gradient editor) closer and create one more node with 0% opacity and press OK.
  6. Change gradient style to Angle and customize as you like. Your effect is ready!

Watch below video tutorial if you feels stuck!

Angle Gradient


This is for Inkscape

  1. Begin with a circle

  2. Select the gradient mesh tool, in the tool controls bar hit the Conical gradient button, set 8 rows and 8 columns, and click and drag on the circle to apply a mesh.

  3. Click and drag to select all stops on the gradient, and change the colour to green

  4. Select other stops, and change to white

  5. Click and drag the arc controls on the circle so you have just one small segment visible.

enter image description here

Note that gradient meshes aren't supported in SVGs at present. A workaround for this would be to rasterize the mesh object, and place it inside a clipping mask.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.