# Is this shape possible to make as a vector?

**URL:** <https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399>\
**Category:** design\
**Created:** [June 25, 2008, 7:36pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399 "2008-06-25T19:36:40Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 25, 2008, 7:36pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/1 "2008-06-25T19:36:40Z")

</div>

Sorry if this is ridiculously easy for you vector peeps, I’m just a lowly dev : )

If it IS possible, I’d like to know how. (note, not from black to white but from black to transparent)

👼

---

<div class="post-metadata">

**Author:** ![Syous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Syous](https://forum.kirupa.com/u/Syous)\
**Post date:** [June 25, 2008, 7:44pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/2 "2008-06-25T19:44:58Z")

</div>

Image isn’t loading for me.

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 7:53pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/3 "2008-06-25T19:53:03Z")

</div>

Is that a “loading image” loop or is that the actual image you want to vectorize? 😛

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 25, 2008, 8:58pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/4 "2008-06-25T20:58:26Z")

</div>

nah just the shape… Ignore the spinning ; )

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 9:00pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/5 "2008-06-25T21:00:20Z")

</div>

So you want, essentially, a doughnut that goes from black to transparent?

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 25, 2008, 9:01pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/6 "2008-06-25T21:01:42Z")

</div>

pretty much yeah.

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 9:07pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/7 "2008-06-25T21:07:07Z")

</div>

Well, you could make two circles and use the small one to clip the big one to make the donut. Then use a gradient on the donut. I don’t think you could use transparency in the gradient though - I can’t remember. You might have to get fancy with masks to do that.

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 25, 2008, 9:12pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/8 "2008-06-25T21:12:19Z")

</div>

But you have to remember that the gradient on the doughnut will be linear (from one point to another) and not ‘following the circle’ so to speak…

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 9:28pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/9 "2008-06-25T21:28:42Z")

</div>

You can make a linear or circular gradient on a shape (circle).

---

<div class="post-metadata">

**Author:** ![snickelfritz](https://avatars.discourse-cdn.com/v4/letter/s/7ea924/32.png) [@snickelfritz](https://forum.kirupa.com/u/snickelfritz)\
**Post date:** [June 25, 2008, 9:38pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/10 "2008-06-25T21:38:25Z")

</div>

Use the primitive oval tool.  
Set the inner radius to create the donut.  
Not sure about the gradient.

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 25, 2008, 9:46pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/11 "2008-06-25T21:46:32Z")

</div>

Lunatic, afaik the circular (radient) gradient does it from the core out. Not from “0-360 degrees”? 😕

---

<div class="post-metadata">

**Author:** ![lunatic](https://avatars.discourse-cdn.com/v4/letter/l/73ab20/32.png) [@lunatic](https://forum.kirupa.com/u/lunatic)\
**Post date:** [June 25, 2008, 10:00pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/12 "2008-06-25T22:00:12Z")

</div>

Really? I thought you could mess with the properties on that? I’ll have to check sometime (don’t have it at work and going river rafting tomorrow!).

I’ll have to check back with you about that one.

---

<div class="post-metadata">

**Author:** ![Stratification](https://avatars.discourse-cdn.com/v4/letter/s/bc8723/32.png) [@Stratification](https://forum.kirupa.com/u/Stratification)\
**Post date:** [June 25, 2008, 10:20pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/13 "2008-06-25T22:20:53Z")

</div>

Any reason it has to be vector? The gradient with transparency would be dead easy in photoshop. Not sure how to do that bit in a vector program.

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 26, 2008, 12:04am UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/14 "2008-06-26T00:04:43Z")

</div>

Not a huge reason, but it’s gonna be scaled. Hence the topic is it possible to make as a vector.

A bitmap is no problem, I’m aware of that.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 26, 2008, 1:08am UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/15 "2008-06-26T01:08:52Z")

</div>

if its going to be scaled just make a really really big version in PS 😛

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [June 26, 2008, 9:24am UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/16 "2008-06-26T09:24:47Z")

</div>

If you can’t figure out how to make it with Illustrator, or whatever, you could try making a fake-ish one: [http://reclipse.net/kirupa/circleAlphaTwirlBig.html](http://reclipse.net/kirupa/circleAlphaTwirlBig.html)

---

<div class="post-metadata">

**Author:** ![sekasi](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@sekasi](https://forum.kirupa.com/u/sekasi)\
**Post date:** [June 26, 2008, 2:34pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/17 "2008-06-26T14:34:22Z")

</div>

Heh, mind sharing the source for that? : )

---

<div class="post-metadata">

**Author:** ![emanorez](https://avatars.discourse-cdn.com/v4/letter/e/b2d939/32.png) [@emanorez](https://forum.kirupa.com/u/emanorez)\
**Post date:** [June 26, 2008, 5:07pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/18 "2008-06-26T17:07:58Z")

</div>

You can make that shape in Illustrator using blends as opacity mask.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [June 26, 2008, 8:57pm UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/19 "2008-06-26T20:57:05Z")

</div>

[QUOTE=sekasi;2349601]Heh, mind sharing the source for that? : )[/QUOTE]  
I made this several years ago, so the source is kind of messy, but here it is:

```auto
var numCircles:Number = 95;
var centerX:Number = 250;
var centerY:Number = 250;
var radius:Number = 180;
var angle:Number = numCircles/180;
var radians:Number = (360/numCircles)*Math.PI/180;
var count:Number = 1;
for (i=0; i<numCircles; i++) {
	this.createEmptyMovieClip("circle"+i, i);
	drawCircle(this["circle"+i], 35, 0x99FF00, 100);
	this["circle"+i]._x = centerX+Math.sin(radians*i)*radius;
	this["circle"+i]._y = centerY+Math.cos(radians*i)*radius;
	this["circle"+i]._alpha = i*(100/numCircles);
	trace(this["circle"+i]._alpha);
}
this.onEnterFrame = function() {
	for (i=0; i<numCircles; i++) {
		if (this["circle"+i]._alpha<=0) {
			this["circle"+i]._alpha = 100;
		}
		this["circle"+i]._alpha -= 2;
	}
};
function drawCircle(target_mc:MovieClip, radius:Number, fillColor:Number, fillAlpha:Number):Void {
	var x:Number = radius;
	var y:Number = radius;
	with (target_mc) {
		beginFill(fillColor, fillAlpha);
		moveTo(x+radius, y);
		curveTo(radius+x, Math.tan(Math.PI/8)*radius+y, Math.sin(Math.PI/4)*radius+x, Math.sin(Math.PI/4)*radius+y);
		curveTo(Math.tan(Math.PI/8)*radius+x, radius+y, x, radius+y);
		curveTo(-Math.tan(Math.PI/8)*radius+x, radius+y, -Math.sin(Math.PI/4)*radius+x, Math.sin(Math.PI/4)*radius+y);
		curveTo(-radius+x, Math.tan(Math.PI/8)*radius+y, -radius+x, y);
		curveTo(-radius+x, -Math.tan(Math.PI/8)*radius+y, -Math.sin(Math.PI/4)*radius+x, -Math.sin(Math.PI/4)*radius+y);
		curveTo(-Math.tan(Math.PI/8)*radius+x, -radius+y, x, -radius+y);
		curveTo(Math.tan(Math.PI/8)*radius+x, -radius+y, Math.sin(Math.PI/4)*radius+x, -Math.sin(Math.PI/4)*radius+y);
		curveTo(radius+x, -Math.tan(Math.PI/8)*radius+y, radius+x, y);
		endFill();
	}
}

```

---

<div class="post-metadata">

**Author:** ![soulty](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/soulty/32/105_2.png) [@soulty](https://forum.kirupa.com/u/soulty)\
**Post date:** [June 27, 2008, 1:37am UTC](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399/20 "2008-06-27T01:37:52Z")

</div>

if you just want the static graphic with that gradient, try gradients blend methods (3 point gradient) or maybe easiest option is to create two shapes… one as a solid colour and then a cut shape at the edge with the gradient.

actually even easier than that… develop a normal straight shape, apply the gradient then apply a envelope warp to make it a circle.

[Next page](https://forum.kirupa.com/t/is-this-shape-possible-to-make-as-a-vector/264399.md?page=2)