Adjusting Image automatically as per screen - html
An image is not adjusting as per the screen. See image google-play-badge.\
The width & height of the image is set to be auto, then also it is not resizing automatically.
My Codes:
body {
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 4px;
color: white;
display: flex;
justify-content: center;
overflow: hidden;
}
#supports (-webkit-text-fill-color: rgba(45, 45, 45, .05)) {
p {
background: linear-gradient(90deg, #000, #000fe6, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3.75s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(45, 45, 45, .05);
}
}
#keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
svg {
display: flex;
font: 10.5em 'Montserrat';
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
#supports (stroke-dasharray: 6% 29%) {
.text-copy {
stroke-dasharray: 6% 29%;
}
}
.text-copy:nth-child(1) {
stroke: #4D163D;
animation-delay: -1;
}
.text-copy:nth-child(2) {
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3) {
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4) {
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #FDB731;
animation-delay: -5s;
}
#keyframes stroke-offset {
100% {
stroke-dashoffset: -35%;
}
}
#media screen and (max-width: 600px) {
p,
h3,
img {
font-size: 20px;
}
}
</style>
<body>
<div>
<h3>
<svg viewBox="0 0 960 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">TITLE</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
</h3>
<p>Some Text Here</p>
<div><img src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" width="auto" height="auto" /></div>
</div>
</body>
An image is not adjusting as per the screen. See image-alt google-play-badge.
The width & height of the image is set to be auto, then also it is not resizing automatically.
If you set width: 100% and max-width: 100% to your images, resizing will happen as expected.
body {
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
.fullWidthImage {
max-width: 100%;
width: 100%;
}
p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 4px;
color: white;
display: flex;
justify-content: center;
overflow: hidden;
}
#supports (-webkit-text-fill-color: rgba(45, 45, 45, .05)) {
p {
background: linear-gradient(90deg, #000, #000fe6, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3.75s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(45, 45, 45, .05);
}
}
#keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
svg {
display: flex;
font: 10.5em 'Montserrat';
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
#supports (stroke-dasharray: 6% 29%) {
.text-copy {
stroke-dasharray: 6% 29%;
}
}
.text-copy:nth-child(1) {
stroke: #4D163D;
animation-delay: -1;
}
.text-copy:nth-child(2) {
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3) {
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4) {
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5) {
stroke: #FDB731;
animation-delay: -5s;
}
#keyframes stroke-offset {
100% {
stroke-dashoffset: -35%;
}
}
#media screen and (max-width: 600px) {
p,
h3,
img {
font-size: 20px;
}
}
</style>
<body>
<div>
<h3>
<svg viewBox="0 0 960 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">TITLE</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
</h3>
<p>Some Text Here</p>
<div>
<img class="fullWidthImage" src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" width="auto" height="auto" />
</div>
</div>
</body>
<img src="https://i.imgur.com/me74Rfr.png" alt="google-play-badge" class="width100" />
In the above code class is added
add that class in style tag
.width100{
max-width:100%;
width:100%;
}
Related
Button stays on focused or active state after clicked in phone. thus creating problem with the css animation to occur
I'm trying to get animation effect on every click on button it works well on desktop but I'm getting problem to do the same on phone. I have to click on button once and then somewhere empty to lose focus state of css then click on button again to get the animation effect.
here is code snippet.
.btn_container {
color: #35f8ff;
position: relative;
display: inline-block;
text-align: center;
margin: 2.5rem auto;
}
.prog_btn {
text-transform: uppercase;
font-size: 1.3rem;
padding: 10px 25px;
z-index: 3;
background-color: transparent;
cursor: pointer;
transition: 0.2s ease-out;
position: relative;
margin: auto;
}
.btn_container .svgStroke {
position: absolute;
z-index: 1;
width: 100%;
top: -25%;
left: 0;
}
.btn_container .svgStroke path {
stroke-dasharray: 100;
stroke-dashoffset: -800;
stroke-width: 2;
transition: all 1s ease-in-out;
stroke: #35f8ff;
}
#keyframes dash {
0% {
stroke-dasharray: 100;
stroke-width: 2;
}
50% {
stroke-width: 4;
stroke: #35f8ff;
filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
}
100% {
stroke-dashoffset: 800;
stroke-width: 2;
}
}
.prog_btn:hover+.svgStroke path {
cursor: pointer;
animation: dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.prog_btn:hover {
font-size: 1.2rem;
}
.add {
display: inline-block;
margin-right: 0.75rem;
height: 1.5rem;
width: 1.5rem;
}
<div class="btn_container">
<div class="prog_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="add">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
></path>
</svg> Add 10%
</div>
<svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
stroke="white"
stroke-width="2"
></path>
</svg>
</div>
here is codepen link too.
I was hoping to be able to unset focus (ie blur) at animation end but this did not work.
Here is a slightly clumsy workaround - this snippet removes the animation when it has come to an end and sets it back when there is another touchstart. It uses style setting rather than classes.
let touchDevice = false;
const progBtn = document.querySelector('.prog_btn');
const path = document.querySelector('.prog_btn +.svgStroke path');
path.addEventListener('animationend', function() {
path.style.animation = '';
});
progBtn.addEventListener('touchstart', function() {
touchDevice = true;
path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
});
progBtn.addEventListener('mouseover', function() {
path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
});
.btn_container {
color: #35f8ff;
position: relative;
display: inline-block;
text-align: center;
margin: 2.5rem auto;
}
.prog_btn {
text-transform: uppercase;
font-size: 1.3rem;
padding: 10px 25px;
z-index: 3;
background-color: transparent;
cursor: pointer;
transition: 0.2s ease-out;
position: relative;
margin: auto;
}
.btn_container .svgStroke {
position: absolute;
z-index: 1;
width: 100%;
top: -25%;
left: 0;
}
.btn_container .svgStroke path {
stroke-dasharray: 100;
stroke-dashoffset: -800;
stroke-width: 2;
transition: all 1s ease-in-out;
stroke: #35f8ff;
}
#keyframes dash {
0% {
stroke-dasharray: 100;
stroke-width: 2;
}
50% {
stroke-width: 4;
stroke: #35f8ff;
filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff);
}
100% {
stroke-dashoffset: 800;
stroke-width: 2;
}
}
.prog_btn:hover+.svgStroke path {
cursor: pointer;
}
.prog_btn:hover {
font-size: 1.2rem;
}
.add {
display: inline-block;
margin-right: 0.75rem;
height: 1.5rem;
width: 1.5rem;
}
<div class="btn_container">
<div class="prog_btn">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="add">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
></path>
</svg> Add 10%
</div>
<svg class="svgStroke" width="222" height="65" viewBox="0 0 222 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M205 84H21L1 63.4941V18.5765L21 1H205L221 18.5765V63.4941L205 84Z"
stroke="white"
stroke-width="2"
></path>
</svg>
</div>
CSS animated SVG disappears when container gets too small
I have create a CSS animation. For the most part, it works as expected.
You can find and test it here: (The weird colors are only for testing...)
https://jsfiddle.net/ec3j8k0r/5/
.svgContainer
{
position: relative;
/*display: inline-block;*/
height: 150px;
width: 150px;
background-color: red;
color: white;
}
.svgCircleBig
{
position:absolute;
/*display: inline-block;*/
height: 100%;
width: 100%;
background-color: transparent;
}
.svgCircleMedium
{
/*display: inline-block;*/
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: forestgreen;
}
.svgCircleSmall
{
/*display: inline-block;*/
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: blue;
}
.svgColor
{
fill: white;
stroke: white;
stroke-miterlimit: 1;
}
#-webkit-keyframes rotateRightKeyFrames
{
from
{
-webkit-transform: rotate(0deg);
}
to
{
-webkit-transform: rotate(360deg);
}
}
.rotateRight
{
-webkit-animation: rotateRightKeyFrames 3s linear infinite;
}
.rotateRightFast
{
-webkit-animation: rotateRightKeyFrames 4s linear infinite;
}
#-webkit-keyframes rotateLeftKeyFrames
{
from
{
-webkit-transform: rotate(360deg);
}
to
{
-webkit-transform: rotate(0deg);
}
}
.rotateLeft
{
-webkit-animation: rotateLeftKeyFrames 2s linear infinite;
}
<div class="svgContainer">
<div class="svgCircleBig">
<svg class="rotateRight" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleMedium">
<svg class="rotateLeft" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleSmall">
<svg class="rotateRightFast" viewBox="0 0 90 90">
<use xlink:href="#gear"/>
</svg>
</div>
</div>
</div>
</div>
<div style="visibility:collapse; display:none;">
<svg viewBox="0 0 90 90">
<g id="gear"><path class="svgColor" d="M90,46.6v-4l-6.2-2.4c-.2-1.6-.5-3.2-.8-4.7l5-4.4a23.49,23.49,0,0,0-1.4-3.7l-6.7-.2a33.76,33.76,0,0,0-2.4-4.1l3.2-5.8a36.12,36.12,0,0,0-2.5-3l-6.3,2.1c-1.2-1.1-2.4-2.1-3.7-3.1l1-6.6a37.91,37.91,0,0,0-3.4-2L60.6,8.9a40.38,40.38,0,0,0-4.5-1.6L54.8.8C53.5.5,52.2.3,50.9.1L47.4,5.8A9.74,9.74,0,0,0,45,5.6a19.27,19.27,0,0,0-2.4.1L39.1,0c-1.3.2-2.6.4-3.9.7L33.9,7.2c-1.5.5-3,1-4.5,1.6L24.2,4.6a37.91,37.91,0,0,0-3.4,2l1,6.6c-1.3,1-2.5,2-3.7,3.1l-6.3-2.1c-.9,1-1.7,2-2.5,3L12.5,23a33.76,33.76,0,0,0-2.4,4.1l-6.7.2c-.5,1.2-1,2.4-1.4,3.7l5,4.4a35.45,35.45,0,0,0-.8,4.7L0,42.6v4L6.2,49c.2,1.6.5,3.2.8,4.7L2,58.1a23.49,23.49,0,0,0,1.4,3.7l6.7.2a33.76,33.76,0,0,0,2.4,4.1L9.3,71.9a36.12,36.12,0,0,0,2.5,3l6.3-2.1c1.2,1.1,2.4,2.1,3.7,3.1l-1,6.6a37.91,37.91,0,0,0,3.4,2l5.2-4.2a40.38,40.38,0,0,0,4.5,1.6l1.3,6.5c1.3.3,2.6.5,3.9.7l3.5-5.7c.8,0,1.6.1,2.4.1a19.27,19.27,0,0,0,2.4-.1l3.5,5.7c1.3-.2,2.6-.4,3.9-.7l1.3-6.5c1.5-.5,3-1,4.5-1.6l5.2,4.2a37.91,37.91,0,0,0,3.4-2l-1-6.6c1.3-1,2.5-2,3.7-3.1l6.3,2.1c.9-1,1.7-2,2.5-3l-3.2-5.8A33.76,33.76,0,0,0,79.9,62l6.7-.2c.5-1.2,1-2.4,1.4-3.7l-5-4.4a35.45,35.45,0,0,0,.8-4.7ZM45,78.7A34.1,34.1,0,1,1,79.1,44.6,34.14,34.14,0,0,1,45,78.7Z" /></g>
</svg>
</div>
My problem: If the svgContainer class gets too small, let's say only 30px, the most inner animation, with the blue background, disappears to the bottom.
.svgContainer
{
position: relative;
/*display: inline-block;*/
height: 30px;
width: 30px;
background-color: red;
color: white;
}
You can see it live, when changing the CSS code in the fiddle.
My question: Can somebody see what the problem is?
Add display:block to all your SVG elements:
svg {
display:block;
}
.svgContainer {
position: relative;
height: 30px;
width: 30px;
background-color: red;
color: white;
}
.svgCircleBig {
position: absolute;
height: 100%;
width: 100%;
background-color: transparent;
}
.svgCircleMedium {
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: forestgreen;
}
.svgCircleSmall {
position: absolute;
height: 60%;
width: 60%;
top: 20%;
left: 20%;
background-color: blue;
}
.svgColor {
fill: white;
stroke: white;
stroke-miterlimit: 1;
}
#-webkit-keyframes rotateRightKeyFrames {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.rotateRight {
-webkit-animation: rotateRightKeyFrames 3s linear infinite;
}
.rotateRightFast {
-webkit-animation: rotateRightKeyFrames 4s linear infinite;
}
#-webkit-keyframes rotateLeftKeyFrames {
from {
-webkit-transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
.rotateLeft {
-webkit-animation: rotateLeftKeyFrames 2s linear infinite;
}
<div class="svgContainer">
<div class="svgCircleBig">
<svg class="rotateRight" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleMedium">
<svg class="rotateLeft" viewBox="0 0 90 90">
<use xlink:href="#gear" />
</svg>
<div class="svgCircleSmall">
<svg class="rotateRightFast" viewBox="0 0 90 90">
<use xlink:href="#gear"/>
</svg>
</div>
</div>
</div>
</div>
<div style="visibility:collapse; display:none;">
<svg viewBox="0 0 90 90">
<g id="gear"><path class="svgColor" d="M90,46.6v-4l-6.2-2.4c-.2-1.6-.5-3.2-.8-4.7l5-4.4a23.49,23.49,0,0,0-1.4-3.7l-6.7-.2a33.76,33.76,0,0,0-2.4-4.1l3.2-5.8a36.12,36.12,0,0,0-2.5-3l-6.3,2.1c-1.2-1.1-2.4-2.1-3.7-3.1l1-6.6a37.91,37.91,0,0,0-3.4-2L60.6,8.9a40.38,40.38,0,0,0-4.5-1.6L54.8.8C53.5.5,52.2.3,50.9.1L47.4,5.8A9.74,9.74,0,0,0,45,5.6a19.27,19.27,0,0,0-2.4.1L39.1,0c-1.3.2-2.6.4-3.9.7L33.9,7.2c-1.5.5-3,1-4.5,1.6L24.2,4.6a37.91,37.91,0,0,0-3.4,2l1,6.6c-1.3,1-2.5,2-3.7,3.1l-6.3-2.1c-.9,1-1.7,2-2.5,3L12.5,23a33.76,33.76,0,0,0-2.4,4.1l-6.7.2c-.5,1.2-1,2.4-1.4,3.7l5,4.4a35.45,35.45,0,0,0-.8,4.7L0,42.6v4L6.2,49c.2,1.6.5,3.2.8,4.7L2,58.1a23.49,23.49,0,0,0,1.4,3.7l6.7.2a33.76,33.76,0,0,0,2.4,4.1L9.3,71.9a36.12,36.12,0,0,0,2.5,3l6.3-2.1c1.2,1.1,2.4,2.1,3.7,3.1l-1,6.6a37.91,37.91,0,0,0,3.4,2l5.2-4.2a40.38,40.38,0,0,0,4.5,1.6l1.3,6.5c1.3.3,2.6.5,3.9.7l3.5-5.7c.8,0,1.6.1,2.4.1a19.27,19.27,0,0,0,2.4-.1l3.5,5.7c1.3-.2,2.6-.4,3.9-.7l1.3-6.5c1.5-.5,3-1,4.5-1.6l5.2,4.2a37.91,37.91,0,0,0,3.4-2l-1-6.6c1.3-1,2.5-2,3.7-3.1l6.3,2.1c.9-1,1.7-2,2.5-3l-3.2-5.8A33.76,33.76,0,0,0,79.9,62l6.7-.2c.5-1.2,1-2.4,1.4-3.7l-5-4.4a35.45,35.45,0,0,0,.8-4.7ZM45,78.7A34.1,34.1,0,1,1,79.1,44.6,34.14,34.14,0,0,1,45,78.7Z" /></g>
</svg>
</div>
Image between SVG
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding: 0;
margin-left: -10px;
}
.background {
overflow: hidden;
}
#fg {
fill: pink;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
#keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
<div id="home" class="section" style="height:100vh;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<use xlink:href="#shape" id="bg" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
</div>
I can not seem to make the background image visible at all times while remaining the same effect, making the fill transparent gets rid of the animation, I also tried to play around with z-index on various elements but without success, how can I make it so that the background image is visible inside the white line instead of the pink svg?
I also tried applying the same image to the pink SVG as fill and it kind of works, I just can not seem to make the image appear like how it would if it was full screen, it also makes the page a bit slow:
#fg {
fill: url(#image);
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
<pattern id="image" width="1" height="1">
<image xlink:href="http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg"></image>
</pattern>
You can get rid of the pink with fill-opacity. But you would need to adjust the white "background" as it overlays the background-image.
You might need to change the shape for that.
You could also include the image as a layer in the svg.
#home {
height: 100vh;
background-image: url("http://4.bp.blogspot.com/-yB6Tc3mleuE/T4NkAKeazYI/AAAAAAAACB0/tlichKzIu3Q/s1600/Simple+unique+odd+weird+wallpapers+minimalistic+%2330+battleship+titanic.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
padding: 0;
margin-left: -10px;
}
.background {
overflow: hidden;
}
#fg {
fill: pink;
fill-opacity: 0;
stroke: #fff;
stroke-width: 10px;
stroke-dasharray: 1024px;
-webkit-animation: dash 2s;
animation: dash 2s;
}
#keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 1024px;
}
to {
stroke-dashoffset: 0px;
}
}
#bg {
fill: white;
opacity: .5;
stroke: none;
transform-origin: 1270px 550px;
-webkit-animation: bgfill 2s linear 2s forwards;
animation: bgfill 2s linear 2s forwards;
}
#keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
#-webkit-keyframes bgfill {
from {
transform: scale(1);
}
to {
transform: scale(4);
}
}
<div id="home" class="section" style="height:100vh;">
<div class="background">
<svg viewBox="0 0 1376 764">
<defs>
<path id="shape" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5 L 1376,770.5 Z" />
</defs>
<use xlink:href="#shape" id="bg" />
<use xlink:href="#shape" id="fg" />
</svg>
</div>
</div>
Trouble with svg in firefox and IE
I have svg in my web site which works fine in chrome but when I try to check it on Firefox the thing is out of frame enlarged I think. I am a designer who started coding few months back. Here is the image for chrome and Firefox.
In Chrome:
In Firefox:
Here is the code snippet i used
svg {
display: block;
font: 10.5em 'Arial';
width: 960px;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){
stroke: #4D163D;
animation-delay: -1s;
}
.text-copy:nth-child(2){
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3){
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4){
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5){
stroke: #FDB731;
animation-delay: -5s;
}
#keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}
#media (min-width:768px){
svg{
width: 750px;
height: 300px;
margin: 0 auto;
}
}
#media (max-width:767px){
svg{
font: 6.5em 'Arial';
width: 100%;
height: 300px;
margin: 0 auto;
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 3px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
}
.text-center1{
color:rgba(255,255,255,0.8);
text-align: center;
font-size: 48px ;
margin-top:40px;
}
#media (max-width:992px){
.text-centre1{
font-size:30px;
}
}
<svg>
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">Digital</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
This seems to be a bug in Firefox.
If you apply an em-based font size to the <svg> and have text inside a <symbol> then in Firefox, the <text> element thinks the font should be 10.5 times the current font size of 10.5em. In other words the font size is multiplying and ends up as 110.25em.
The simple solution is to move the font rule to the <text> ekement.
text {
font: 10.5em 'Arial';
}
svg {
display: block;
width: 960px;
height: 300px;
margin: 0 auto;
}
text {
font: 10.5em 'Arial';
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 5px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
.text-copy:nth-child(1){
stroke: #4D163D;
animation-delay: -1s;
}
.text-copy:nth-child(2){
stroke: #840037;
animation-delay: -2s;
}
.text-copy:nth-child(3){
stroke: #BD0034;
animation-delay: -3s;
}
.text-copy:nth-child(4){
stroke: #BD0034;
animation-delay: -4s;
}
.text-copy:nth-child(5){
stroke: #FDB731;
animation-delay: -5s;
}
#keyframes stroke-offset{
100% {stroke-dashoffset: -35%;}
}
#media (min-width:768px){
svg{
width: 750px;
height: 300px;
margin: 0 auto;
}
}
#media (max-width:767px){
svg{
width: 100%;
height: 300px;
margin: 0 auto;
}
text {
font: 6.5em 'Arial';
}
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: 6% 29%;
stroke-width: 3px;
stroke-dashoffset: 0%;
animation: stroke-offset 5.5s infinite linear;
}
}
.text-center1{
color:rgba(255,255,255,0.8);
text-align: center;
font-size: 48px ;
margin-top:40px;
}
#media (max-width:992px){
.text-centre1{
font-size:30px;
}
}
<svg>
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="80%">Digital</text>
</symbol>
<g class = "g-ants">
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
<use xlink:href="#s-text" class="text-copy"></use>
</g>
</svg>
As a rule of thumb, always include height,width and viewBox for svg images as attributes as opposed to CSS style. Different browsers render SVG differently if these attributes are not present.
CSS Progress circle, change percentage
I have found the following code, Link, it works perfectly but the problem is that I can only make the percentage 25, 50 or 75. If I want to make it 85% the circle fills up fully. Anyone any idea what I have to do? Maybe some JavaScript or JQuery that I have to add? Thanks!
Here is the HTML:
/* Import the Google Font 'Lato' */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Container styles */
body {
background-color: #fff;
color: #333;
font-family: 'Lato';
}
.container {
padding: 50px 0;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart img {
position: absolute;
max-width: 100px;
max-height: 100px;
background: white;
}
/* END Container styles */
/* Colors for the circles and positions for the graphics */
.html {
top: 50px;
left: 45px;
}
.html + svg .outer {
stroke: #e34f26;
}
.css {
top: 55px;
left: 48px;
}
.css + svg .outer {
stroke: #0d84ce;
}
.javascript {
max-width: 90px;
max-height: 90px;
top: 45px;
left: 45px;
}
.javascript + svg .outer {
stroke: #f0e040;
}
.node {
width: 200px;
height: 200px;
top: 45px;
left: 45px;
}
.node + svg .outer {
stroke: #83cd29;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart:hover .outer {
stroke-dashoffset: 534 !important;
-webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
/* END set initial animation values */
/* Keyframes for the initial animation */
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 134;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#-webkit-keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
/* END Keyframes for the initial animation */
<section class="container">
<h3>I'm a web developer and here's what I can do</h3>
<!-- HTML Chart -->
<div class="chart" data-percent="85">
<figcaption>HTML</figcaption>
<img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</div>
<!-- CSS Chart -->
<figure class="chart" data-percent="75">
<figcaption>CSS</figcaption>
<img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Javascript Chart -->
<figure class="chart" data-percent="50">
<figcaption>Javascript</figcaption>
<img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Node.js Chart -->
<figure class="chart" data-percent="25">
<figcaption>Node</figcaption>
<img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p>Pure CSS and SVG animation</p>
</section>
Iy's not a script so it's not automatically fit to any percentage. In that pen, the author defined only those 4 percentage. Here I added 85% too. But if you want to do this dynamically, you need to use a script.
Take a look:
/* Import the Google Font 'Lato' */
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* Container styles */
body {
background-color: #fff;
color: #333;
font-family: 'Lato';
}
.container {
padding: 50px 0;
text-align: center;
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart img {
position: absolute;
max-width: 100px;
max-height: 100px;
background: white;
}
/* END Container styles */
/* Colors for the circles and positions for the graphics */
.html {
top: 50px;
left: 45px;
}
.html + svg .outer {
stroke: #e34f26;
}
.css {
top: 55px;
left: 48px;
}
.css + svg .outer {
stroke: #0d84ce;
}
.javascript {
max-width: 90px;
max-height: 90px;
top: 45px;
left: 45px;
}
.javascript + svg .outer {
stroke: #f0e040;
}
.node {
width: 200px;
height: 200px;
top: 45px;
left: 45px;
}
.node + svg .outer {
stroke: #83cd29;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 20;
stroke-dasharray: 534;
transition: stroke-dashoffset 1s;
-webkit-animation-play-state: running;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart:hover .outer {
stroke-dashoffset: 534 !important;
-webkit-animation-play-state: paused;
}
/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='85'] .outer {
stroke-dashoffset: 83;
-webkit-animation: show85 2s;
animation: show85 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
/* END set initial animation values */
/* Keyframes for the initial animation */
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show85 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 83;
}
}
#keyframes show85 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 83;
}
}
#-webkit-keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 134;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#-webkit-keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
/* END Keyframes for the initial animation */
<section class="container">
<h3>I'm a web developer and here's what I can do</h3>
<!-- HTML Chart -->
<div class="chart" data-percent="85">
<figcaption>HTML</figcaption>
<img class="html" src="https://dl.dropboxusercontent.com/s/68gv23q4y5qyq52/html5.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</div>
<!-- CSS Chart -->
<figure class="chart" data-percent="75">
<figcaption>CSS</figcaption>
<img class="css" src="https://dl.dropboxusercontent.com/s/gftbpqje9h2jvlv/css3.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Javascript Chart -->
<figure class="chart" data-percent="50">
<figcaption>Javascript</figcaption>
<img class="javascript" src="https://dl.dropboxusercontent.com/s/jsp3rsberc4q650/javascript.svg">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<!-- Node.js Chart -->
<figure class="chart" data-percent="25">
<figcaption>Node</figcaption>
<img class="node" src="https://dl.dropboxusercontent.com/s/v28zws1p38tjph2/node.png">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p>Pure CSS and SVG animation</p>
</section>