I'm attempting to have animated text moving on a circular path around an image. I have the circular text, but I can't get the image on the inside.
Here is the code I'm using:
<div id="container">
<div id="circle">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="200px"
height="200px"
viewBox="0 0 400 400"
enable-background="new 0 0 100 100"
xml:space="preserve"
>
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g>
<use xlink:href="#circlePath" fill="none"/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>
Here is the full code on JSFiddle I created.
The svg I'm trying to place in the middle is this: https://svgshare.com/i/Z4d.svg
Any help would be appreciated.
You could achieve this with the image tag:
<image
x="165"
y="150"
width="88"
height="100"
xlink:href="PATH_TO_YOUR_IMAGE.EXTENSION"
/>
or (like in your linked svg)
<image
...
xlink:href="data:img/png;base64,YOUR_LOOOOONG_IMAGE_DATA"
/>
To move only the text and not the whole image (inkl. the inner bird image) you should define the rotation only for the text:
#circle svg text {
transform-origin: 50% 50%;
animation-name: rotate;
...
}
Working example: (i removed the circle because it wasn't used)
Unfortunately your linked svg doesn't work here because it's on another domain (but worked locally in my test file). And the inline image data from that svg doesn't fit in the stack snippet (also worked locally in my test file). Therefor i used a simple rect for demonstration.
#container {
margin: 0%;
margin-top: 0px;
margin-bottom: 0px;
}
#circle {
position: relative;
width: 500px;
padding-bottom: 0%;
overflow: visible;
z-index: 2;
}
#circle text {
margin: 0 calc(.14em * -1) 0 0;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
font-size: .83em;
font-style: normal;
font-weight: 400;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
color: black;
background: linear-gradient(-67deg, #000000 0%, #988d87 28%, #797371 52%, #5e5855 82%, #000000 100%);
background-size: 100% auto;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
letter-spacing: .32em;
}
#circle svg {
position: absolute;
left: 140px;
top: -110px;
width: 100%;
height: 430px;
}
#circle svg text {
transform-origin: 50% 50%;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-ms-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes rotate {
from {
-moz-transform: rotate(0);
}
to {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes rotate {
from {
-ms-transform: rotate(0);
}
to {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#media screen and ( max-width: 979px) {
#circle svg {
left: 0px !important;
top: -70px !important;
height: 360px;
}
}
#media screen and ( max-width: 480px) {
#circle svg {
left: -140px !important;
top: 140px !important;
}
}
<div id="container">
<div id="circle">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
<path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<g>
<use xlink:href="#circlePath" fill="none"/>
<rect
x="160"
y="160"
width="80"
height="80"
fill="#FCDB8D"
/>
<text fill="#ffb605">
<textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
</text>
</g>
</svg>
</div>
</div>
the required loader is to be of the following gif given above but needs to be implemented in a svg.
the code given below is the svg I have implemented so far but I am not able to get the required animation as that of a gif. Can somebody point out where I am going wrong or help me with how to get the animations right. Thanks in advance
svg{
width: 250px;
height: 250px;
position: relative;
}
/* .circles{
transform: rotate(-90deg);
} */
#inner{
stroke-dasharray: 314 314;
stroke-dashoffset: 314;
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* animation: rotate 2s linear infinite; */
animation: animate 2s ease-in-out infinite;
}
#keyframes animate{
0%,100%{
stroke-dashoffset: 314;
}
50%{
stroke-dashoffset: 0;
}
50.1%{
stroke-dashoffset: 628 ;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="svg.css">
<title>Document</title>
</head>
<body>
<svg>
<g class="circles">
<circle cx="125" cy="125" r="50" fill="none" stroke-width="15px" stroke="#E0E3E9">
</circle>
<circle id="inner" cx="125" cy="125" r="50" fill="none" stroke-width="12px" stroke="#6B04A8">
</circle>
</g>
</svg>
</body>
</html>
I hope this is what you need: instead of animating the stroke-dashoffset I'm animating the stroke-dasharray
svg {
width: 250px;
height: 250px;
position: relative;
}
/* .circles{
transform: rotate(-90deg);
} */
#inner {
stroke-dasharray: 1 314;
stroke-dashoffset: 314;
transform: rotate(-90deg);
transform-origin: 50% 50%;
/* animation: rotate 2s linear infinite; */
animation: animate 2s ease-in-out infinite;
}
#keyframes animate {
100% {
stroke-dasharray: 314;
}
}
svg {
border: 1px solid;
}
<svg>
<g class="circles">
<circle cx="125" cy="125" r="50" fill="none" stroke-width="15px" stroke="#E0E3E9">
</circle>
<circle id="inner" cx="125" cy="125" r="50" fill="none" stroke-width="12px" stroke="#6B04A8">
</circle>
</g>
</svg>
Second attempt:
The OP is commenting
for the first 50% of the circle it has to grow and after crossing the 50% only it should shrink
svg {
width: 250px;
height: 250px;
position: relative;
}
/* .circles{
transform: rotate(-90deg);
} */
#inner {
transform: rotate(-90deg);
transform-origin: 50% 50%;
animation: animate 5s ease-in-out infinite;
}
#keyframes animate{
0%{
stroke-dasharray: 0 314;
stroke-dashoffset: 314;
}
50%{
stroke-dasharray: 157 157;
stroke-dashoffset: 314;
}
75%{
stroke-dasharray: 157 157;
stroke-dashoffset: 157;
}
100%{
stroke-dasharray: 0 314;
stroke-dashoffset: 0;
}
}
svg {
border: 1px solid;
}
<svg>
<g class="circles">
<circle cx="125" cy="125" r="50" fill="none" stroke-width="15px" stroke="#E0E3E9">
</circle>
<circle id="inner" cx="125" cy="125" r="50" fill="none" stroke-width="12px" stroke="#6B04A8" stroke-dasharray="0 314" stroke-dashoffset = "157">
</circle>
</g>
</svg>
I have a header on the left side and want to add a button inline with the header on the right side.
When I add "position:relative: and top:400px, it moves the button perfectly. When i add "left:200px" it moves the button perfectly again, but when i hover it moves the button back to center of page.
How do i stop it from doing this?
i've created IMG images to show specifically how it moves:
https://imgur.com/a/SMLCbmN
**note when left:200px; is not added, the button doesn't move to center of page. i've tried removing the "text-algin: center;" along with a lot of other ideas..but am stuck.
Here is the code: https://codepen.io/TheGreatEscape/pen/ebYgGO
.container {
width: 100%;
text-align: center;
margin-top: 0vh;
}
.circle {
stroke: #f70f4d;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
position: relative;
top: 400px;
left: 200px;
border: none;
-webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #000;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #f70f4d;
animation: nudge 0.7s ease-in-out;
}
#keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
<div class='container'>
<a href='#' class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 "/>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/>
</svg>
</a>
</div>
see this demo if it helps
/*===== PLAY BUTTON ===*/
.container {
width: 100%;
text-align: center;
margin-top: 0vh;
}
.circle {
stroke: #f70f4d;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
/*position: relative;
top:400px;
left:200px;*/
border: none;
-webkit-transition: all 0.5s ease;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #000;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #f70f4d;
animation: nudge 0.7s ease-in-out;
}
#keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
h2.title {
font-size: 40px;
margin: 60px 0 0;
display: inline-block;
float: left;
}
<div class='container'>
<h2 class="title">some text</h2>
<a href='#'class='playBut'>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="213.7px" height="213.7px" viewBox="0 0 213.7 213.7" enable-background="new 0 0 213.7 213.7"
xml:space="preserve">
<polygon class='triangle' id="XMLID_18_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
73.5,62.5 148.5,105.8 73.5,149.1 "/>
<circle class='circle' id="XMLID_17_" fill="none" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3"/>
</svg>
</a>
</div>
Update
you need
a.playBut, a.playBut:hover, a.playBut:active, a.playBut:focus {
left: 800px;
right: auto;
}
see demo
normal
on hover
Add position: absolute to your .playBut. top and left works only on absolute position.
See example here
I am trying to add the CSS code inside the HTML but I am having trouble getting the SVG animation to work. What am I doing wrong here? My guest is that I am referencing <style> wrongly but after a couple of tries I can't make it work.
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<svg class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
</svg>
</svg>
CodePen
Thank you in advance.
Your animation works. You messed up stroke color definition. hsl(210, 70%, 75%);
and circle elements opening tag is missing closing bracket >
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" > </circle>
html, body {
height: 100%;
background-color: #000000;
}
<svg>
<style type="text/css">
.spinner {
animation: rotate 2s linear infinite;
transform-origin:center center;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
}
.path {
stroke: hsl(210, 70%, 75%);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
</style>
<g class="spinner">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</g>
</svg>
you need to close the html tag for circle
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"</circle>
should be
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
So I made a bunch of edits to an SVG file and now I can't open in in AI and it will not display on web. I'm guessing it is due to the fact that I have HTML elements inside it like the tags but I am not sure how to get around that without breaking the rest of the code.
<div>
<div id="banner">
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
<path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</g>
<defs>
<style type="text/css">
.st0 {
fill: none;
stroke: #000;
stroke-width: 4;
stroke-miterlimit: 5;
}
.st1 {
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-miterlimit: 5;
}
#banner {
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
</style>
</defs>
</svg>
</div>
</div>
</div>