How to make a new shape with morphSVH shape

[GroundZero]

Hi guys,

I am learning this stuff before I purchase it for multiple websites, but I am kinda stuck at the moment.

If you look at my codepen code, you will see that it is working perfectly.

 

But the problem now is, I want to change the shape (the smaller ball that comes out, should turn counterwise 45 degrees) but I have no clue how to make a new shape.

 

I know how to use illustrator and so, but how do I turn my image into the code that is needed? My current code here:

	<div class="blob1">
        <div class="left-text">
        	Binnen <br />één minuut geregeld!
        </div>
        <div class="right-text">
        	<i class="fa fa-angle-double-right" aria-hidden="true"></i>
        </div>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="200px" viewBox="0 0 300 200" style="enable-background:new 0 0 800 400;" xml:space="preserve">
            <path id="circle" class="path" d="M94,188 C145.914766,188 188,145.914766 188,94 C188,42.0852335 145.914766,0 94,0 C42.0852335,0 0,42.0852335 0,94 C0,145.914766 42.0852335,188 94,188 Z"/>
        </svg>
    </div>

<script>
TweenLite.set("#circle, #circle2", {scale: 0.1, transformOrigin: "center center"});
TweenLite.to("#circle, #circle2", 1, {scale: 1});
setTimeout(function(){
  TweenLite.to("#circle, #circle2", 1, {morphSVG:{shape:"M110.471,116.507 C136.143,89.207 148.064,71.207 166.737,71.207 C185.335,71.207 190.511,82.099 204.721,97.207 C211.714994,104.845596 221.595662,109.195499 231.9525,109.195499 C242.309338,109.195499 252.190006,104.845596 259.184,97.207 C274.217907,80.8327544 274.212258,55.6744929 259.171,39.307 C252.183736,31.663125 242.304691,27.3090796 231.9485,27.3090796 C221.592309,27.3090796 211.713264,31.663125 204.726,39.307 C190.655,54.255 185.32,65.592 166.565,65.592 C148.079,65.592 136.182,47.362 110.458,20.009 C98.8104224,7.27175885 82.3453776,0.0169090374 65.0855,0.0169090374 C47.8256224,0.0169090374 31.3605776,7.27175885 19.713,20.009 C7.53155605,33.1110573 0.808302952,50.3673354 0.915,68.257 C0.806447888,86.1426132 7.52773912,103.39543 19.707,116.494 C31.3932892,129.167947 47.8227515,136.412777 65.062,136.494 C82.355667,136.41735 98.7843648,129.177088 110.471,116.507 Z", shapeIndex:14}});
}, 1000);
</script>

I think I need to change the javascript bit {morphSVG:{shape:""}} if I am right no? tried to find some tutorials but I really dont understand them, certainly because my English is quite poor i.e. understanding what I read so I was hoping someone on this board could help me out on how to make new shapes and turn them into the code so I can make shapes with them

See the Pen aZmKrd by WilbertE (@WilbertE) on CodePen

[ohem]

Your example works, but it's cleaner just to keep the paths all inside one SVG.  Like this:

 

See the Pen MejzoY by ohem (@ohem) on CodePen

[GroundZero]

Thank you for your reply but that is not what I meant. I want to change the shape but I dont really know how.

 

I made a new shape in illustrator, and when I choose "save as" and then "show SVG code" I get this code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<g>
	<path class="st0" d="M69.5,242.5c137.6,0,275.3,0,412.9,0c0,68.3,0,136.6,0,205c-137.6,0-275.3,0-412.9,0
		C69.5,379.1,69.5,310.8,69.5,242.5z M366.2,421.4c6.8-1.3,13.9-1.8,20.3-4c36.6-12.6,54.7-56.7,38.8-93.4
		c-10.3-23.7-33.1-42-62.4-40.4c-17.6,0.9-32,8.7-44,21.6c-10.7,11.6-21.4,23.4-32.9,34.1c-14.4,13.5-31.8,12.4-45.6-1.9
		c-4.3-4.4-8.2-9.2-12.4-13.7c-10.9-11.3-23.8-16.1-39.4-11.4c-21.7,6.6-33.5,31.6-25.7,54.2c9.3,27.2,40.8,35.8,62.1,16.6
		c6.3-5.6,11.5-12.5,17.5-18.5c10.9-10.9,25.3-12.4,38.2-4c4,2.6,7.8,5.8,11.1,9.2c9.5,9.8,18.6,20,27.9,30
		C332.2,413.3,347.3,421.1,366.2,421.4z"/>
	<path d="M366.2,421.4c-19-0.3-34-8.1-46.5-21.5c-9.3-10-18.5-20.1-27.9-30c-3.3-3.4-7.1-6.6-11.1-9.2c-12.8-8.4-27.2-6.9-38.2,4
		c-6,6-11.2,12.9-17.5,18.5c-21.3,19.1-52.7,10.6-62.1-16.6c-7.8-22.6,4-47.6,25.7-54.2c15.5-4.7,28.5,0.1,39.4,11.4
		c4.3,4.4,8.2,9.2,12.4,13.7c13.8,14.3,31.1,15.4,45.6,1.9c11.5-10.8,22.2-22.6,32.9-34.1c12-12.9,26.4-20.7,44-21.6
		c29.4-1.6,52.2,16.7,62.4,40.4c15.9,36.7-2.2,80.8-38.8,93.4C380.1,419.6,373,420.1,366.2,421.4z"/>
</g>
</svg>

But where and which code do I place where? I want my circle to END in the above shape. My current code now is:

 

    <div class="blob2">
    	<div class="left-text">
        	
        </div>
        <div class="right-text">
        	
        </div>
        <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="200px" viewBox="0 0 300 200" style="enable-background:new 0 0 800 400;" xml:space="preserve">
            <path id="circle2" class="path2" d="M94,188 C145.914766,188 188,145.914766 188,94 C188,42.0852335 145.914766,0 94,0 C42.0852335,0 0,42.0852335 0,94 C0,145.914766 42.0852335,188 94,188 Z"/>
        </svg>
    </div>


<script>
TweenLite.set("#circle, #circle2", {scale: 0.1, transformOrigin: "center center"});
TweenLite.to("#circle, #circle2", 1, {scale: 1});
setTimeout(function(){
  TweenLite.to("#circle, #circle2", 1, {morphSVG:{shape:"M110.471,116.507 C136.143,89.207 148.064,71.207 166.737,71.207 C185.335,71.207 190.511,82.099 204.721,97.207 C211.714994,104.845596 221.595662,109.195499 231.9525,109.195499 C242.309338,109.195499 252.190006,104.845596 259.184,97.207 C274.217907,80.8327544 274.212258,55.6744929 259.171,39.307 C252.183736,31.663125 242.304691,27.3090796 231.9485,27.3090796 C221.592309,27.3090796 211.713264,31.663125 204.726,39.307 C190.655,54.255 185.32,65.592 166.565,65.592 C148.079,65.592 136.182,47.362 110.458,20.009 C98.8104224,7.27175885 82.3453776,0.0169090374 65.0855,0.0169090374 C47.8256224,0.0169090374 31.3605776,7.27175885 19.713,20.009 C7.53155605,33.1110573 0.808302952,50.3673354 0.915,68.257 C0.806447888,86.1426132 7.52773912,103.39543 19.707,116.494 C31.3932892,129.167947 47.8227515,136.412777 65.062,136.494 C82.355667,136.41735 98.7843648,129.177088 110.471,116.507 Z", shapeIndex:14}});
}, 1000);
</script>

I made a new one and put the code in, but nothing happens when I do that The code that I get (you can save it as .svg and open with Illustrator) is this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<g>
	<path class="st0" d="M94,188c51.9,0,94-42.1,94-94S145.9,0,94,0S0,42.1,0,94S42.1,188,94,188z"/>
	<path d="M110.5,116.5c25.7-27.3,37.6-45.3,56.3-45.3c18.6,0,23.8,10.9,38,26c7,7.6,16.9,12,27.2,12s20.2-4.3,27.2-12
		c15-16.4,15-41.5,0-57.9c-7-7.6-16.9-12-27.2-12s-20.2,4.4-27.2,12c-14.1,14.9-19.4,26.3-38.2,26.3c-18.5,0-30.4-18.2-56.1-45.6
		C98.8,7.3,82.3,0,65.1,0S31.4,7.3,19.7,20C7.5,33.1,0.8,50.4,0.9,68.2c-0.1,17.9,6.6,35.1,18.8,48.2c11.7,12.7,28.1,19.9,45.4,20
		C82.4,136.4,98.8,129.2,110.5,116.5z"/>
</g>
</svg>