Take a break to make a snake!
ECMAScript 6 Javascript (399 401 431)

Has to be run in a browser supporting ECMAScript 6 due to the arrow functions. 

Here are fiddles which have been altered to run in any (common) browser by not using arrow functions. They also print to a textarea instead:


Normal
Animated


Golfed Version

i=prompt(),v=[],c=0,x=[0],y=[0],s='unshift',k='slice',t='sort',h=[0,-1,0,1,0]
while(c&lt;i.length){m='wasd'.indexOf(i[c++]);v[s]('^&lt;v&gt;'[m]);x[s](x[0]+h[m]);y[s](y[0]+h[m+1])}f=(a,b)=&gt;a-b
q=x[k]()[t](f)[0],e=x[k]()[t]((a,b)=&gt;b-a)[0],w=y[k]()[t](f)[0],o=[]
while((i=y.pop())!=null){i-=w;j=x.pop()-q;t=(o[i]||Array(e+1-q).join(" ")).split("");t.splice(j,1,v.pop()||"@");o[i]=t.join("")}alert(o.join("\n"))


Animated GIF:

One of the OP's examples:



The example from Stretch Maniac:



Ungolfed

Here is a (slightly) ungolfed version from sometime before I started really golfing it down:

var input = prompt(),
    values = [],
    c = 0,
    x = [0],
    y = [0],
    s = 'unshift';
while (c &lt; input.length) {
    var mapped = 'wasd'.indexOf(input[c++]);
    values[s]('^&lt;v&gt;'[mapped]);
    x[s](x[0]+[0, -1, 0, 1][mapped]);
    y[s](y[0]+[-1, 0, 1, 0][mapped]);
}

var minX = x.slice().sort(function (a,b){return a-b})[0];
var maxX = x.slice().sort(function (a,b){return b-a})[0];
var minY = y.slice().sort(function (a,b){return a-b})[0];

var output = [];
while((i=y.pop())!=null) {
    i-=minY;
    j=x.pop()-minX;
    t=(output[i]||Array(maxX+1-minX).join(" ")).split("");
    t.splice(j,1,values.pop()||"@");
    output[i]=t.join("");    
}

console.log(output.join("\n"));