Rotating SVG with CSS from bottom of group - html

I am trying create some kind of gauge animation. I added two simple gauges inside a rectangel . When I try to rotate a needle it doesn't rotate around its bottom part. Instead it rotates around another point even though I state to rotate around bottom center. What should I do to rotate the needle from bottom? Thanks.
EDIT:
Here is the animation I am trying to achieve
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
#Gaugaetip2 {
animation: dance 2s infinite alternate;
}
#keyframes dance {
100% {
transform-origin: bottom center;
transform: rotate(-25deg);
}
}
</style>
</head>
<body>
<svg width="135px" height="135px" viewBox="0 0 135 135" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>test</title>
<defs>
<path d="M17.6298701,13.9630295 L17.6298701,4.43831169 L15.6298701,4.43831169 L15.6298701,13.9630295 C14.6733943,14.3565661 14,15.2976952 14,16.3961039 C14,17.8485411 15.177433,19.025974 16.6298701,19.025974 C18.0823073,19.025974 19.2597403,17.8485411 19.2597403,16.3961039 C19.2597403,15.2976952 18.5863459,14.3565661 17.6298701,13.9630295 L17.6298701,13.9630295 Z" id="path-1"></path>
<path d="M18.91403,13.9099151 L18.91403,4.38519729 L16.91403,4.38519729 L16.91403,13.9099151 C15.9575542,14.3034517 15.2841598,15.2445808 15.2841598,16.3429895 C15.2841598,17.7954267 16.4615928,18.9728596 17.91403,18.9728596 C19.3664671,18.9728596 20.5439001,17.7954267 20.5439001,16.3429895 C20.5439001,15.2445808 19.8705058,14.3034517 18.91403,13.9099151 L18.91403,13.9099151 Z" id="path-3"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="test" transform="translate(-30.000000, -30.000000)">
<g transform="translate(30.000000, 30.000000)">
<rect id="background" fill="#4BBCE9" x="0" y="0" width="135" height="135" rx="8"></rect>
<g id="Gauge" transform="translate(5.136364, 8.642857)">
<g id="Group-3" transform="translate(0.149351, 0.383117)">
<ellipse id="Oval-3" stroke="#D8D8D8" fill="#FFFFFF" cx="16.6298701" cy="16.3961039" rx="15.7792208" ry="15.7792208"></ellipse>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Gaugaetip2" fill="#D8D8D8" xlink:href="#path-1"></use>
</g>
</g>
<g id="Gauge-Copy-3" transform="translate(95.551948, 9.642857)">
<ellipse id="Oval-3" stroke="#D8D8D8" fill="#FFFFFF" cx="15.7792208" cy="15.7792208" rx="15.7792208" ry="15.7792208"></ellipse>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Gaugetip" fill="#D8D8D8" transform="translate(17.914030, 11.679028) rotate(25.000000) translate(-17.914030, -11.679028) " xlink:href="#path-3"></use>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>


Try adding the transform-origin to the element itself. As this is a fixed property that does not change over time, it shouldn't be part of the keyframes.
#Gaugaetip2 {
animation: dance 2s infinite alternate;
transform-origin: center 84%;
transform-box: fill-box;
}
#keyframes dance {
100% {
transform: rotate(-25deg);
}
}
I also adjusted the origin position a little to stay centered on the round part.
Result: https://jsfiddle.net/dowm6eff/

Related

How can I make the SVG animation seamless and smooth?

I have animated the SVG, to give a handwriting effect, I want to make the animation more seamless, as the letter "W" appears in the animation, it makes the other part of the letter appear as well, and I can't decrease the stroke-width as the rest of the part of the letter will not appear completely, please guide me along on what can be done.
As I cant upload the code here its SVG and exceeding more than 35,000 characters, so please do check the CodePen.
HTML Code
<defs>
<clipPath id="clip-path" transform="translate(0 0)">
<path id="w" d="M47.205,44.721c-.1.062-.191.119-.262.169a1.172,1.172,0,0,0-.192.17,1.237,1.237,0,0,0-.155.208,1.71,1.71,0,0,0-.13.285L42.677,55.6q-.354-.956-.708-1.9-.307-.8-.655-1.694t-.623-1.6L38.8,55.6Q37.7,52.9,36.825,50.73q-.37-.925-.739-1.818c-.247-.6-.467-1.134-.662-1.618s-.357-.883-.485-1.2-.2-.508-.223-.57a1.835,1.835,0,0,0-.293-.47,1.326,1.326,0,0,0-.539-.332H36.7a.519.519,0,0,0-.355.4.832.832,0,0,0,.093.539l2.836,7.18,1.077-3.3q-.215-.57-.493-1.247t-.532-1.279c-.17-.4-.313-.747-.432-1.04s-.187-.464-.208-.516a1.529,1.529,0,0,0-.223-.409,1.143,1.143,0,0,0-.532-.332h2.711a.5.5,0,0,0-.315.4,1.016,1.016,0,0,0,.07.539l.817,2.033.8-2.2a.886.886,0,0,0,.068-.479q-.039-.2-.347-.293h1.633a2.841,2.841,0,0,0-.254.17,1.007,1.007,0,0,0-.169.161,1.148,1.148,0,0,0-.124.185,2.582,2.582,0,0,0-.116.254l-1.155,3.034,1.556,4.313L45.652,45.6a1.01,1.01,0,0,0,.062-.533.513.513,0,0,0-.355-.346h1.849Z" style="fill: none" />
</clipPath>
</defs>
<g id="w-grp">
<g style="clip-path: url(#clip-path)">
<polyline class="logo-path m-1" id="w-path" points="35.084 43.989 39.663 55.599 38.796 55.599 38.609 55.136 42.916 43.989 38.968 43.989 43.484 55.599 42.677 55.597 42.474 55.101 46.67 43.989" style="fill: none;stroke: #191717;stroke-miterlimit: 10;stroke-width: 3px" />
</g>
</g>
CodePen: https://codepen.io/ToxifiedM/pen/MWKeERr
Linked Question 1: A JQuery Function For SVG, To Execute 2nd Animation As Soon As, 1st Animation Completes?
Linked Question 2: To Control SVG CSS Based Animation Using Jquery?
Linked Question 3: To Control The Speed Of Multiple SVG Elements Using Jquery?

This is how I would do it:
I'm using a polyline element that I am clipping with a V like path. In order to make the W I'm using the clipped polyline twice. I am animating the stroke-dashoffset of the use elements, the second element with a 1s delay
svg{width:300px;border:solid}
use{
stroke-dasharray: 255;
stroke-dashoffset: 255;
animation: dash 1s linear forwards;
}
use:nth-of-type(2){
animation-delay:1s
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="30 80 250 150">
<defs>
<clipPath id="clip">
<path id="V" xmlns="http://www.w3.org/2000/svg" d="M52,90L103,210 110,210 160,90 152,90 110,190 66,90 52,90" stroke="black" fill="none" />
</clipPath>
<polyline id="poly" points="58,85 107,203 156,85" stroke="red" fill="none" stroke-width="19" clip-path="url(#clip)" />
</defs>
<use xlink:href="#poly" x="0" />
<use xlink:href="#poly" x="50" />
</svg>

Flexible rotating centered SVG

I need flexible rotating centered SVG.
Problem is if use
<svg width="100%">
with rotation, browser window start resizing itself on svg rotation.
If i delete "width="100%"", than SVG will svg will not shrink on horizontal window resize.
Any ideas how to fix it?
Codesandbox example.

Putting the animation inside the svg is a solution.
<svg
viewBox="0 0 29.892 29.892"
width="100%"
height="100vh"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g>
<path
d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
opacity=".2"
/>
<path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z"/>
<animateTransform repeatCount="indefinite" begin="0s" dur="5s" attributeName="transform" type="rotate" from="0 14.946 14.946" to="360 14.946 14.946" />
</g>
</svg>
If you want css to control the animation, you'd still have to group the paths within the svg. You can then target the group in css like below.
#circle {
animation: rotate 2s linear infinite;
transform-origin: 50% 50%
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<svg
viewBox="0 0 29.892 29.892"
width="100%"
height="100vh"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="circle">
<path
d="m14.946 0c-8.254 0-14.946 6.692-14.946 14.946 0 8.255 6.692 14.946 14.946 14.946s14.946-6.691 14.946-14.946c-1e-3 -8.254-6.692-14.946-14.946-14.946zm0 26.58c-6.425 0-11.634-5.208-11.634-11.634 0-6.425 5.209-11.634 11.634-11.634s11.633 5.209 11.633 11.634c0 6.426-5.208 11.634-11.633 11.634z"
opacity=".2"
/>
<path d="m20.758 4.878 1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012v3.312c2.119 0 4.1 0.576 5.812 1.566z" />
</g>
</svg>

Change SVG fill="none" to fill="#FFF" when Hover?

This SVG have 2 fill one is NONE and secound is color RED.
How I do so when it's not hover one stay in NONE, then when it's hover it change to color?
By the way it's right now, it only change the one that is red of the
.icon{
fill: red;
transition: all 200ms ease-out;
}
.icon:hover{
fill: blue;
}
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="22" viewBox="0 0 24 22">
<path fill="none" d="M17.73,3c-3.26,0-5,3.47-5.73,5-.75-1.54-2.48-5-5.72-5A4.05,4.05,0,0,0,2,7.19c0,3.44,4.74,7.85,10,13,5.26-5.15,10-9.56,10-13A4.06,4.06,0,0,0,17.73,3Z" transform="translate(0 -1)" />
<path fill="#ff0000" d="M17.73,1A6.53,6.53,0,0,0,12,4.25,6.51,6.51,0,0,0,6.28,1,6,6,0,0,0,0,7.19C0,11.85,5.57,16.62,12,23c6.43-6.38,12-11.15,12-15.81A6,6,0,0,0,17.73,1ZM12,20.19C6.74,15,2,10.63,2,7.19A4.05,4.05,0,0,1,6.28,3c3.24,0,5,3.49,5.72,5,.75-1.55,2.47-5,5.73-5A4.06,4.06,0,0,1,22,7.19C22,10.63,17.26,15,12,20.19Z" transform="translate(0 -1)"/>
</svg>

Try adding a wrapper class and giving css fill to the svg path. This is a sample code. Hope it helps
.svg-wrapper svg path{
fill: red;
transition: all 200ms ease-out;
}
.svg-wrapper svg path:hover{
fill: blue;
}
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 22">
<path fill="none" d="M17.73,3c-3.26,0-5,3.47-5.73,5-.75-1.54-2.48-5-5.72-5A4.05,4.05,0,0,0,2,7.19c0,3.44,4.74,7.85,10,13,5.26-5.15,10-9.56,10-13A4.06,4.06,0,0,0,17.73,3Z" transform="translate(0 -1)" />
<path fill="#ff0000" d="M17.73,1A6.53,6.53,0,0,0,12,4.25,6.51,6.51,0,0,0,6.28,1,6,6,0,0,0,0,7.19C0,11.85,5.57,16.62,12,23c6.43-6.38,12-11.15,12-15.81A6,6,0,0,0,17.73,1ZM12,20.19C6.74,15,2,10.63,2,7.19A4.05,4.05,0,0,1,6.28,3c3.24,0,5,3.49,5.72,5,.75-1.55,2.47-5,5.73-5A4.06,4.06,0,0,1,22,7.19C22,10.63,17.26,15,12,20.19Z" transform="translate(0 -1)"/>
</svg>
</div>

You can animate it with an SVG tag. Here is how you would animate the fill property back and forth with an hover effect on a square:
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill='#000000'>
<animate attributeType="XML" attributeName="fill" from="#000000" to="#ff0000"
dur="0.5s" repeatCount="1" begin='mouseover' fill='freeze'/>
<animate attributeType="XML" attributeName="fill" from="#ff0000" to="#000000"
dur="0.5s" repeatCount="1" begin='mouseout' fill='freeze'/>
</rect>
</svg>
When this SVG is placed on a page it will turn red when you rollover it and go back to black when rolling out.

Trying to animate this specific svg

I got this svg exported from Adobe Illustrator.
<?xml-stylesheet href="star.css" type="text/css"?>
<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"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g id="star">
<path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7
c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7
C36.9,28.7,37.6,28.5,37.9,27.9z"/>
<path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8
L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6
L71.3,31.8z"/>
<path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1
c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7
c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/>
<path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1
l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1
C46,80.7,45.3,80.5,44.7,80.9z"/>
<path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6
c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z
"/>
</g>
</svg>
Here is what i'm trying to accomplish, it should just simply draw from point A to point B, starting from 1 and ends with 5.
And this is what my css looks like:
#star{
fill-opacity: 0;
stroke: #37475B;
stroke-width: 1;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw-star 10s linear forwards;
}
#keyframes draw-star {
to {
stroke-dashoffset: 0;
}
}
I am pretty much new to SVG animation, or even SVG itself. To be honest I have no idea what i'm doing, i tried looking up for some tutorials but its pretty hard and confusing to create my own points, I have bunch of icons from Illustrator to export but it seems exporting it gave me something like fill not a simple point to point line.
Is the exported SVG possible to do the animation above? If so, can anyone help me with a CSS snipit or if the SVG needs to be edited in some way, so i can have a base to learn? Thanks!

You can use the animate on each of the paths of the start:
svg {
width: 200px;
padding: 5px;
}
#star{
fill-opacity: 0;
stroke: #37475B;
stroke-width: 1;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
<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"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g id="star">
<path id="star-1" class="st0" d="M37.9,27.9L49.3,5c0.3-0.6,0.8-0.6,1.1,0l11.3,22.9c0.3,0.6,1.1,0.9,1.7,0.7
c0.7-0.2,0.9-0.8,0.6-1.5L52,2.7c-0.5-1-1.3-1.6-2.2-1.6c-0.9,0-1.7,0.6-2.2,1.6L35.9,26.6c-0.3,0.6-0.1,1.4,0.5,1.7
C36.9,28.7,37.6,28.5,37.9,27.9z"/>
<path id="star-2" class="st0" d="M71.3,31.8c-0.7-0.1-1.2,0.1-1.3,0.5c0,0.2-0.1,0.4-0.1,0.6c-0.2,0.7,0.1,1.2,0.7,1.3l26.2,3.8
L77.9,56.7c-0.5,0.5-0.4,1.1,0.1,1.6c0.5,0.5,1.1,0.7,1.6,0.2l19.1-18.6c0.8-0.8,1.1-1.8,0.9-2.6c-0.3-0.9-1.1-1.4-2.2-1.6
L71.3,31.8z"/>
<path id="star-3" class="st0" d="M76.9,66.8c-0.1-0.7-0.8-1.2-1.4-1.1c0,0,0,0,0,0c-0.7,0.1-1.1,0.7-1,1.4l4.5,26.3L55.4,81.1
c-0.6-0.3-1.4-0.1-1.6,0.6c0,0,0,0,0,0c-0.3,0.6,0,1.4,0.6,1.7l23.4,12.3c0.5,0.3,1,0.4,1.5,0.4c0.7,0,1.2-0.3,1.6-0.7
c0.3-0.4,0.7-1.1,0.5-2.3L76.9,66.8z"/>
<path id="star-4" class="st0" d="M44.7,80.9l-24,12.6l4.5-26.3c0.1-0.7-0.3-1.3-1-1.5c0,0,0,0,0,0c-0.7-0.1-1.3,0.3-1.4,1
l-4.5,26.4c-0.2,1.2,0.2,1.9,0.5,2.3c0.7,0.8,1.9,1,3.1,0.3l23.7-12.5c0.6-0.3,1-1.1,0.7-1.7c0,0,0-0.1,0-0.1
C46,80.7,45.3,80.5,44.7,80.9z"/>
<path id="star-5" class="st0" d="M21.9,56.8L2.7,38.1l26.5-3.8c0.7-0.1,1.2-0.7,1-1.4c-0.2-0.6-0.8-1.1-1.5-1L2.3,35.6
c-1.1,0.2-1.9,0.8-2.2,1.6c-0.3,0.9,0,1.8,0.9,2.6l19.4,18.9c0.5,0.5,1.2,0.4,1.7-0.1c0,0,0,0,0,0C22.5,58.1,22.4,57.3,21.9,56.8z
"/>
</g>
<animate xlink:href="#star-1" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-1-anim" />
<animate xlink:href="#star-2" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-2-anim" begin="+1.5s"/>
<animate xlink:href="#star-3" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-3-anim" begin="+3s"/>
<animate xlink:href="#star-4" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-4-anim" begin="+4.5s"/>
<animate xlink:href="#star-5" attributeName="stroke-dashoffset" from="1000" to="0" dur="10s" fill="freeze" d="star-5-anim" begin="+6s"/>
</svg>
Hope it's what you were looking for.

You will have to fix a couple of things if you want this to work.
Firstly for the CSS line animation trick to work, you will need to change your triangle shapes to use a single stroke (ie. two lines) instead of an outline around the outside. See my answer on this other question for an explanation of that.
Secondly, you've got five separate shapes. If you want them to animate in sequence, one after the other, then you will have to time the animations. The animations for paths 2-5 will need to have a delay applied. You can do that with the animation-delay rule.
Demo
#star path {
fill: none;
stroke: #37475B;
stroke-width: 1;
stroke-dasharray: 190;
stroke-dashoffset: 190;
animation-name: draw-star;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes draw-star {
to {
stroke-dashoffset: 0;
}
}
#star-2 {
animation-delay: 2s;
}
#star-3 {
animation-delay: 4s;
}
#star-4 {
animation-delay: 6s;
}
<svg width="300px" height="300px">
<g id="star">
<path id="star-1" d="M 100,90 L150,10 L 200,90" />
<path id="star-2" d="M 210,100 L 290,150 L 210,200" />
<path id="star-3" d="M 200,210 L150,290 L 100,210" />
<path id="star-4" d="M 90,200 L 10,150 L 90,100" />
</g>
</svg>

How do I animate my name in SVG?

I want to write my name out in cursive SVG
So far I've gotten it partially working. But i want it to go from being blank to writing out my name. So far it just rewrites overtop of it. Also, is there a way to change the font family?
Fiddle
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>practice</title>
<script type="text/javascript" src="script.js">
</script>
<link href="test.scss" rel="stylesheet" />
<link href="svg.css" rel="stylesheet" />
</head>
<body>
<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z" />
<text class="path" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="65" id="svg_1" y="330" x="528" stroke-width="2" stroke="#000000" fill="#000000">joshua</text>
</svg>
</body>
</html>
CSS
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear alternate infinite;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

But i want it to go from being blank to writing out my name. So far it
just rewrites overtop of it.
Change fill="#000000 to fill="none".
Also, is there a way to change the font family?
Change the font-family attribute.
<text class="path" xml:space="preserve" text-anchor="middle"
font-family="Arial" font-size="65" id="svg_1" y="330" x="528"
stroke-width="2" stroke="#000000" fill="none">joshua</text>