SVG - How Can I Draw A Brush Stain?
I'm working with paperjs's library, and I need to draw a little brush stain with svg path's directions. Is there any way to do that?
Solution 1:
I have made an Path animation with javascript (also running on IE) You can also animate your image in this way.
For the rotation of your brush stain, take the next points of the path and rotate your brush stain with transform:rotate(degree,x,y)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nürburgring Animation</title>
<meta name="author" content="Frank Wisniewski">
<meta name="publisher" content="Frank Wisniewski">
<meta name="copyright" content="Frank Wisniewski">
<meta name="description" content="Auf dieser Seite wird eine kleine Animation des Nürburgrings um Adenau dargestellt. Die Animation wurde komplett in Javascript und SVG erstellt.">
<meta name="keywords" content="SVG, Animation, Webdesign, Adenau, Nürburgring, Eifel, Frank, Wisniewski, Programmierung, Grafik, Gestaltung, Kunst">
<meta name="page-topic" content="Forschung Technik">
<meta name="page-type" content="Karte Plan">
<meta name="audience" content="Alle, Erwachsene, Fans"><meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">
<meta name="DC.Creator" content="Frank Wisniewski">
<meta name="DC.Publisher" content="Frank Wisniewski">
<meta name="DC.Rights" content="Frank Wisniewski">
<meta name="DC.Description" content="Auf dieser Seite wird eine kleine Animation des Nürburgrings um Adenau dargestellt. Die Animation wurde komplett in Javascript und SVG rtstellt.">
<meta name="DC.Language" content="de">
<style>
body{font-family:"Calibri", "Helvetica", sans-serif;}
.content{width:300px;margin-left:auto;margin-right:auto;}
#svgG{width:200px;margin-left:auto;margin-right:auto;}
svg{width:200px;height:200px;overflow:hidden;}
h1,p{text-align:center;}
p{font-size:8px;}
.p10{font-size:14px;font-weight:bold;}
</style>
</head>
<body>
<div class="content">
<div id="svgG"></div>
<hr>
<p>(c) Frank Wisniewski<br>Lohmühlenstraße 2</br>53518 Adenau</p>
</div>
<script>
/* Programm und Grafiken sind geistiges Eigentum von Frank Wisniewski, Lohmühlenstraße 2, 53518 Adenau und dürfen ohne Genehemigung nicht genutzt werden */
var carCount = 8;
var i;
var colors = ["Black", "Navy", "Blue", "BlueViolet", "CornFlowerBlue","Red", "LimeGreen", "IndianRed", "Sienna"];
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var _create = function (type){return document.createElementNS("http://www.w3.org/2000/svg", type);}
var _set = function (el,par){for (key in par) {el.setAttribute(key.replace('X','-'),par[key]);}svg.appendChild(el);}
with(svg){
setAttribute('width', '250');
setAttribute('height', '250');
setAttribute("viewBox", "0 0 250 250");
setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
}
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svgG.appendChild(svg);
var adenaubullet = _create("circle");
_set(adenaubullet,{r:7,fill:'#f00',stroke:'#f00',cx:110,cy:8,strokeXwidth:1});
var pfad = _create("path");
pfad.setAttribute("d","M23.748,97.732c-4.235-2.956-3.875-3.774,0.149-6.424c4.415-2.912,9.246-4.657,13.445-7.991c3.775-2.997,6.616-6.559,8.157-11.154c0.658-1.969,0.469-3.708,0.928-5.656c0.49-2.073,2.818-3.084,2.289-5.231c-1.943-7.859,12.718-12.905,15.122-20.157c3.09-9.145-16.734-9.687-5.879-15.675c3.809-2.103,3.375-6.84,6.656-9.057c4.651-3.144,8.367,1.576,11.515,4.158c3.215,2.642,3.816-0.669,7.024-1.456c3.189-0.786,10.073,3.112,11.988-0.465c1.826-3.412,1.65-7.33,6.191-8.478c4.341-1.098,8.877-0.364,12.739-3.081c1.894-1.331,6.225-6.532,8.439-2.986c2.437,3.904-0.348,10.177,0.854,14.706c2.772,10.454,17.172,9.7,25.21,10.781c9.04,1.215,17.95,12.277,26.751,6.006c3.794-2.695,4.927-5.525,10.095-6.125c1.264-0.15,7.907-1.917,7.61,0.729c-0.316,2.853-6.305,5.333-8.338,6.711c-4.479,3.022-0.753,6.298,1.884,2.81c3.211-4.251,8.561-3.146,12.597-5.729c3.836-2.448,4.706-5.857,5.413-9.774c1.985-10.859,17.365-0.166,21.786,3.753c4.462,3.959,0.835,6.313,1.039,10.839c0.191,3.879,3.526,1.893,5.27,4.377c1.404,1.99,0.811,7.445-1.462,8.753c-3.792,2.168-6.586-2.64-9.273,2.805c-1.183,2.4-3.285,4.19-3.92,6.858c-0.735,3.091,1.969,7.785-0.122,10.477c-1.086,0.723-2.258,1.257-3.517,1.6c-1.907,1.228-3.592,3.089-5.258,4.608c-2.656,2.422-4.04,5.798-6.476,8.439c-3.986,4.336-10.271,6.805-16.063,7.526c-1.563,0.396-3.123,0.396-4.681,0c-2.271-0.944-1.521-3.241-4.827-2.771c-2.364,0.319-6.657,3.103-4.31,5.873c3.164,3.744,14.496,4.718,10.232,11.852c-4.087,6.844-13.375,9.795-19.857,13.7c-7.564,4.557-15.104,9.15-22.606,13.8c-7.321,4.53-16.081,8.639-22.572,14.298c-4.59,4.036-7.287,12.104-12.4,15.145c-2.264,1.35-1.265,4.361-4.132,5.722c-2.816,1.335-5.621-0.041-7.605-2.184c-0.949-1.027-2.493-4.413-4.188-2.536c-2.399,2.652-5.102,5.234-8.833,5.743c-3.432,0.466-6.206-1.944-9.507-1.572c-3.674,0.413-5.729-0.104-7.561-3.373c-1.255-2.242-3.559-3.075-5.613-4.396c-3.346-2.152-5.549-4.272-8.34-7.002c-5.066-4.96-13.847-9.133-14.34-17.222c-0.215-3.656,2.038-7.426,2.341-11.079c0.397-4.697-0.287-9.311-1.945-13.715c-1.431-3.801-3.489-7.284-4.994-11.039C29.209,99.368,26.926,99.928,23.748,97.732");
_set(pfad,{fill:'none',stroke:'#666',strokeXwidth:6});
var bordstein=pfad.cloneNode(true);
_set(bordstein,{stroke:'#ddd',strokeXwidth:4});
var grandprix = _create("path");
grandprix.setAttribute("d","M32.246,245.125c-2.99-2.644,4.779-6.693,6.57-8.077c3.212-2.479,6.842-4.163,5.87-8.961c-0.891-4.404,1.944-8.48,3.929-12.302c1.225-2.359,2.457-4.719,3.468-7.177c1.085-2.64,0.846-3.498-1.781-4.92c-2.916-1.579-8.019-3.264-4.406-7.271c3.643-4.035,7.452-7.957,11.752-11.297c3.277-2.547,7.475-2.651,11.457-3.249c1.722-0.26,13.399-0.733,13.39-2.918c-0.015-3.294,6.497-2.777,8.654-3.153c1.517-0.266,5.267-1.056,5.688,1.308c0.445,2.497-1.268,3.257-2.928,4.664c-7.362,6.223-15.047,12.292-22.803,18.019c-0.534,0.395-8.754,5.805-8.457,3.525c0.423-3.213,5.225-8.695,1.275-11.084c-2.188-1.332-4.133-0.486-6.367,0.376c-1.574,0.607-5.299,1.734-6.084,3.411c-0.74,1.58,0.625,3.774,2.29,3.882c1.022,0.069,3.515-1.991,3.427,0.323c-0.094,2.511,0.521,5.18-0.138,7.646c-0.792,2.955-2.661,5.646-4.08,8.322c-0.9,1.696-3.023,4.913-2.296,7.02c0.89,2.563,4.673,2.549,5.777,4.88c1.078,2.279-4.431,3.46-5.976,4.184c-2.971,1.387-5.743,2.851-8.27,4.98c-1.822,1.534-3.684,3.438-5.079,5.381C35.841,244.419,34.963,247.523,32.246,245.125");
_set(grandprix,{fill:'none', stroke:'#000', strokeXwidth:4});
var grandprixbordstein=grandprix.cloneNode(true);
_set(grandprixbordstein,{stroke:'#f00',strokeXwidth:3});
var myText=_create("text");
with (myText){
setAttribute("font-family", "Arial, sans-serif");
setAttribute("font-weight", "bold");
setAttribute("font-style", "italic");
setAttribute("text-anchor", "middle");
}
var myTextNode = document.createTextNode("");
myText.appendChild(myTextNode);
var nordschleife=myText.cloneNode(true);
_set(nordschleife,{x:120,y:77,fontXsize:16});
nordschleife.textContent="NORDSCHLEIFE";
var grandprixtext=nordschleife.cloneNode(true);
_set(grandprixtext,{x:110,y:220,fontXsize:16});
grandprixtext.textContent="GRAND-PRIX";
var grandprixtext1=nordschleife.cloneNode(true);
_set(grandprixtext1,{x:110,y:240,fontXsize:16});
grandprixtext1.textContent="STRECKE";
var adenautext=nordschleife.cloneNode(true);
_set(adenautext,{x:165,y:14,fontXsize:16});
adenautext.textContent="ADENAU";
var roundSquare=[];
var mySquare=_create("rect");
var roundBullet=[];
var roundBulletText=[];
for (i=1;i <= carCount;i++){
roundBullet[i]=adenaubullet.cloneNode(true);
_set(roundBullet[i],{r:5,strokeXwidth:0,fill:colors[i],stroke:colors[i],cx:180,cy:120+i*5*3});
roundSquare[i]=mySquare.cloneNode(true);
_set(roundSquare[i],{x:203,y:113+i*5*3,fill:'#ddd',stroke:'none',height:13,width:30});
roundBulletText[i]=adenautext.cloneNode(true);
_set(roundBulletText[i],{x:210,y:125+i*5*3,fontXsize:14,fontXstyle:'normal'});
roundBulletText[i].textContent="0";
}
var lapsText=nordschleife.cloneNode(true);
_set(lapsText,{x:217,y:122,fontXsize:14,fontXstyle:'normal'});
lapsText.textContent="LAPS";
var cars = [];
var step=[];
var laps=[];
var len = pfad.getTotalLength();
var speed = 1.5;
var pos = [];
var pt;
var repeater;
var lapPos = [];
var carProto = _create("circle");
with (carProto){
setAttribute("r", 3);
setAttribute("stroke-width", "1");
}
for(i = 1; i <= carCount; i++){
cars[i]=carProto.cloneNode(true);
pos[i]=i*5+750;
laps[i]=0;
lapPos[i]=750;
pt=pfad.getPointAtLength(len/1000*pos[i])
_set(cars[i],{cx:pt.x,cy:pt.y,stroke:colors[i],fill:colors[i]});
step[i]=speed+Math.random()/1;
}
var animate=function(){
for(i = 1; i <= carCount; i++){
pos[i]+=step[i];
lapPos[i]+=step[i];
if(pos[i]>1000){
pos[i]=1;
step[i]=speed+Math.random()/2;
}
if (lapPos[i]>1750){
lapPos[i]=750;
laps[i]++;
roundBulletText[i].textContent=laps[i];
}
pt=pfad.getPointAtLength(len/1000*pos[i])
cars[i].setAttribute("cx", pt.x);
cars[i].setAttribute("cy", pt.y);
}
//repeater = requestAnimationFrame(animate);
repeater = setTimeout(animate,1000/60);
}
animate();
</script>
</body>
</html>
Post a Comment for "SVG - How Can I Draw A Brush Stain?"