Menu
I'm not sure what I'm doing wrong but I can't get this animation to center on the center of the SVG.
https://codepen.io/Alecurtu/pen/jOVobxK
.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}
svg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 50%;
margin: auto;
transform-origin: 50% 50%;
}
svg {
animation: 5s Text infinite;
transform-origin: 50% 50%;
}
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
#Text {
animation: spin 4s infinite linear;
}
637
Answer as a bonus
Consider placing the halves of the text symmetrically in relation to the image
Explanations on how to achieve this:
To obtain this effect, the text is divided into two parts, and each half of the text is placed on a separate arc in the textPath command
The beginning of the text and the beginning of the arc must start from the same place.
Therefore, we will take this condition into account when creating arcs. For clarity, attach the end-marker to the end of the arc.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<defs>
<marker id="end" refX="10" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" />
</marker>
</defs>
<path marker-end="url(#end)" id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="blue" stroke-width="2" />
</svg>Let's create the second arc. The formulas of both arcs differ in only one parameter - the value of sweep-flag
sweep-flag ="1", the arc is drawn clockwisesweep-flag ="0" `the arc is drawn counterclockwise<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<defs>
<marker id="end" refX="18" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" />
</marker>
</defs>
<path id="top" marker-end="url(#end)" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="blue" stroke-width="3" />
<path id="bottom" marker-end="url(#end)" d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="crimson" stroke-width="3" />
</svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<path id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" />
<path id="bottom" d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />
<text dy="-12px" dx="0" font-size="24px" font-family="Verdana" font-weight="bold" fill="black" letter-spacing="2" >
<textPath xlink:href="#top" startOffset="5%"> datVault.hyz...coming Soon
</textPath>
</text>
<text <text dy="26px" dx="0" font-size="24px" font-family="Verdana" font-weight="bold" fill="black" letter-spacing="6" >
<textPath xlink:href="#bottom" startOffset="12%"> join waiting list!!
</textPath>
</text>
</svg>.container {
width:30vw;
height:auto;
}
.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}
#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" >
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
V138z"/>
<g id="Face">
<g>
<rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
<rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
</g>
<g>
<rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
<rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
<rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
<rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
<rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
<rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
<rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
<rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
</g>
<g>
<rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
<rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
<rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
</g>
</g>
<path id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" />
<path id="bottom" d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />
<text id="txtTop" dy="-12px" dx="0" letter-spacing="2" >
<textPath xlink:href="#top" startOffset="5%"> datVault.hyz...coming Soon</textPath>
</text>
<text id="txtBottom" dy="26px" dx="0" letter-spacing="7" >
<textPath xlink:href="#bottom" startOffset="12%"> join waiting list!!</textPath>
</text>
</svg>
</div>Text animation is implemented by changing the startOffset attribute
Animation starts after click
startOffset = "100%", the text is completely hiddenstartOffset = "0%", the text is fully visible.container {
width:30vw;
height:auto;
}
.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}
#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
}<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" >
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
V138z"/>
<g id="Face">
<g>
<rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
<rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
</g>
<g>
<rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
<rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
<rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
<rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
<rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
<rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
<rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
<rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
</g>
<g>
<rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
<rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
<rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
</g>
</g>
<path id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" />
<path id="bottom" d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />
<text id="txtTop" dy="-12px" dx="0" letter-spacing="2" >
<textPath xlink:href="#top" startOffset="100%"> datVault.hyz...coming Soon
<animate id="an"
attributeName="startOffset"
begin="svg1.click"
dur="4s"
values="100%;5%;5%"
repeatCount="3"
restart="whenNotActive"
fill="freeze" />
</textPath>
</text>
<text id="txtBottom" dy="26px" dx="0" letter-spacing="7" >
<textPath xlink:href="#bottom" startOffset="100%"> join waiting list!!
<animate id="an2"
attributeName="startOffset"
begin="svg1.click"
dur="4s"
values="100%;12%;12%"
repeatCount="3"
restart="whenNotActive"
fill="freeze" />
</textPath>
</text>
</svg>
</div>Animating text looping and collapsing text
.container {
width:35vw;
height:auto;
}
.st0{fill:#FFFF00;}
.st1{fill:#EB008B;}
#txtTop,#txtBottom {
font-size:24px;
font-family:Verdana;
font-weight:bold;
fill:black;
} <div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" >
<rect id="Yellow" x="149.2" y="110.6" class="st0" width="113.2" height="171.6"/>
<path id="Doc" d="M262.4,273.9V138.5h27.1V301H126V83h109v27.1h-81.9v163.5L262.4,273.9L262.4,273.9z M262.4,138h-27.1v-27.1h27.1
V138z"/>
<g id="Face">
<g>
<rect x="191.6" y="191" class="st1" width="9.4" height="9.4"/>
<rect x="214.6" y="191" class="st1" width="9.4" height="9.4"/>
</g>
<g>
<rect x="180" y="176.9" class="st1" width="9.4" height="9.4"/>
<rect x="180" y="223.6" class="st1" width="9.4" height="9.4"/>
<rect x="170.4" y="186.6" class="st1" width="9.4" height="37"/>
<rect x="189.4" y="167.6" class="st1" width="37" height="9.4"/>
<rect x="226.2" y="176.9" class="st1" width="9.4" height="9.4"/>
<rect x="226.2" y="223.6" class="st1" width="9.4" height="9.4"/>
<rect x="235.8" y="186.6" class="st1" width="9.4" height="37"/>
<rect x="189.4" y="232.9" class="st1" width="37" height="9.4"/>
</g>
<g>
<rect x="187.7" y="212.5" class="st1" width="6.7" height="6.7"/>
<rect x="194.1" y="219.1" class="st1" width="27.1" height="6.7"/>
<rect x="221.5" y="212.5" class="st1" width="6.7" height="6.7"/>
</g>
</g>
<path id="top" d="M50 200 A150 150 0 0 1 350 200" fill="none" stroke="black" stroke-width="3" />
<path id="bottom" d="M50 200 A150 150 0 0 0 350 200" fill="none" stroke="black" stroke-width="3" />
<text id="txtTop" dy="-12px" dx="0" letter-spacing="2" >
<textPath xlink:href="#top" startOffset="100%"> datVault.hyz...coming Soon
<animate id="an" attributeName="startOffset" begin="svg1.click;an.end+1s" dur="8s" values="100%;5%;5%;100%" fill="freeze" />
</textPath>
</text>
<text id="txtBottom" dy="27px" dx="0" letter-spacing="7" >
<textPath xlink:href="#bottom" startOffset="100%"> join waiting list!!
<animate id="an2" attributeName="startOffset" begin="svg1.click;an2.end+1s" dur="8s" values="100%;12%;12%;100%" fill="freeze" />
</textPath>
</text>
</svg>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
