Trouble making an HTML SVG Splash screen - html

I'm trying to create an animated splash screen for my APP and I have to do it using SVG, HTML and CSS due to the architecture of the APP.
The first GIF is the designed product which I'm trying to achieve and the second GIF is what I've been able to do.
I need help trying to create that circle effect (I have tried using <circle> but I cant get it to do the effect correctly. I also need to do the zoom in/out of the text and have the background color cover the whole screen.
This is what I have:
#keyframes fill {
0% {
fill: white;
}
50% {
fill: black;
}
100% {
fill: white;
}
}
#jazztel {
fill: white;
animation-name: fill;
animation-duration: 5s;
}
#keyframes colorChange {
0% {
fill: #da1884;
}
50% {
fill: #ffffff;
}
100% {
fill: #ffcd00;
}
}
.box {
fill: #ffcd00;
width: 100%;
height: 100%;
animation: colorChange 5s;
}
#keyframes buttonTransition {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
visibility: none;
opacity: 0;
display: none;
}
100% {
transform: scale(0);
}
}
.innerCircle {
animation-duration: 3s;
animation-name: buttonTransition;
transform-origin: center center;
}
<svg width="100%" height="100%" viewBox="0 0 1131 1247" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect class="box" />
<!--<circle class="innerCircle" cx="50%" cy="50%" r="50%" fill="#FFFFFF" />-->
<path id="jazztel" d="M596.912 674.306V665.289H578.926L598.296 631.994H565.437V641.011H581.693L562.669 674.306H596.912Z" />
<path id="jazztel" d="M670.931 653.497C670.931 646.561 668.856 641.012 664.705 636.503C660.554 632.341 655.02 629.913 648.448 629.913C641.877 629.913 636.688 631.994 632.538 636.503C628.387 640.665 626.312 646.214 626.312 652.803C626.312 659.393 628.387 664.595 632.884 668.757C637.034 672.919 642.568 675 649.14 675C657.442 675 664.013 671.879 668.164 665.636L659.171 661.474C656.404 664.249 652.945 665.636 648.794 665.636C645.681 665.636 642.914 664.942 640.839 663.208C638.764 661.474 637.38 659.046 636.688 655.925H670.931V653.497ZM637.034 646.908C638.072 644.133 639.455 642.399 640.839 641.358C642.914 639.624 645.681 638.931 648.794 638.931C651.561 638.931 653.637 639.624 655.712 641.012C657.787 642.399 659.171 644.48 659.863 646.908H637.034Z" />
<path id="jazztel" d="M687.534 615H676.811V673.96H687.534V615Z" />
<path id="jazztel" d="M528.081 631.994V641.011H544.683L525.314 674.306H559.902V665.289H541.57L560.94 631.994H528.081Z" />
<path id="jazztel" d="M519.433 648.295C519.087 646.908 518.741 645.52 518.05 644.133C516.666 641.359 515.283 638.931 513.207 636.85C511.132 634.769 508.711 633.035 505.944 631.994C504.56 631.301 503.177 630.954 501.793 630.607C500.409 630.26 499.026 630.26 497.296 630.26C494.183 630.26 491.416 630.954 488.995 631.994C487.612 632.688 486.574 633.382 485.536 634.075C484.499 634.769 483.461 635.81 482.423 636.85C481.386 637.89 480.694 638.931 480.002 640.318C478.619 641.705 477.927 642.746 477.581 644.133C476.889 645.52 476.543 646.908 476.197 648.295C475.852 649.682 475.852 651.416 475.852 652.804C475.852 655.925 476.543 658.7 477.581 661.127C478.273 662.515 478.965 663.555 479.656 664.596C480.348 665.636 481.386 666.677 482.077 667.717C483.115 668.758 484.153 669.451 485.19 670.492C486.228 671.185 487.612 671.879 488.649 672.573C491.071 673.613 493.838 674.307 496.605 674.307H519.779V652.804C519.779 651.416 519.433 650.029 519.433 648.295ZM509.748 664.249H497.296C495.913 664.249 494.529 663.902 493.146 663.208C492.454 662.862 491.762 662.515 491.416 662.168C490.725 661.821 490.379 661.127 489.687 660.781C489.341 660.087 488.649 659.74 488.303 659.047C487.958 658.353 487.612 657.659 487.266 656.966C486.574 655.578 486.228 654.191 486.228 652.457C486.228 651.763 486.228 650.723 486.574 650.029C486.574 649.336 486.92 648.642 487.266 647.948C487.612 647.255 487.958 646.561 488.303 645.867C488.649 645.174 488.995 644.827 489.687 644.133C490.379 643.44 490.725 643.093 491.416 642.746C492.108 642.399 492.8 642.052 493.146 641.705C494.529 641.012 496.259 640.665 497.642 640.665C498.334 640.665 499.372 640.665 500.064 641.012C500.755 641.012 501.447 641.359 502.139 641.705C503.522 642.399 504.906 643.093 505.944 644.48C506.981 645.521 508.019 646.908 508.711 648.295C509.057 648.989 509.402 649.682 509.402 650.376C509.402 651.07 509.748 652.11 509.748 652.804V664.249Z" />
<path id="jazztel" d="M469.972 615.693H458.903V655.924C458.903 655.924 458.903 659.739 458.557 660.78C458.212 662.861 457.174 663.901 455.444 663.901C453.023 663.901 450.256 662.167 447.489 658.699L439.534 666.676C444.03 672.225 449.564 675 455.79 675C458.903 675 461.67 674.306 463.746 672.919C466.513 671.185 468.242 668.41 469.28 664.595C469.626 662.514 469.972 659.046 469.972 654.19V615.693Z" />
<path id="jazztel" d="M616.281 631.647V615.693H605.559V638.93L605.213 640.664H605.559V674.306H616.281V640.664H622.507V631.647H616.281Z" />
</svg>


Ive managed to solve all my problems, below you can find the snippet of the working version.
I removed my <rect> tag and instead created a <div> to wrap the SVG and added a background to that to solve the problem where the background was not filling up the whole screen.
To solve the zoom issue on the text what I did was implemented a transform: scale(x) to the same div mentioned above instead of the text which are several paths (if applied to the path it wouldnt do the effect correctly). So instead of zooming in and out on the text the effect is like if I had a painting in my hand and I brought it closer to your face.
And last is the <circle> effect. I removed the background color in the HTML tag and added it to the #keyframes in CSS.
#keyframes textColorChange {
0% {
fill: white;
}
50% {
fill: black;
}
100% {
fill: white;
}
}
#jazztel {
fill: white;
animation-name: textColorChange;
animation-duration: 5s;
}
#keyframes bgColorChange {
0% {
background-color: #da1884;
transform: scale(1);
}
50% {
background-color: #ffffff;
transform: scale(1.5);
}
100% {
background-color: #ffcd00;
transform: scale(1);
}
}
.splashBackground {
background-color: #ffcd00;
width: 100%;
height: 100%;
animation: bgColorChange 5s;
}
#keyframes circleTransition {
0% {
transform: scale(0);
fill: #FFFFFF;
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
.innerCircle {
animation-duration: 3s;
animation-name: circleTransition;
transform-origin: center center;
}
<div class="splashBackground">
<svg width="100%" height="100%" viewBox="0 0 1131 1247" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle class="innerCircle" cx="50%" cy="50%" r="50%" />
<path id="jazztel" d="M596.912 674.306V665.289H578.926L598.296 631.994H565.437V641.011H581.693L562.669 674.306H596.912Z" />
<path id="jazztel" d="M670.931 653.497C670.931 646.561 668.856 641.012 664.705 636.503C660.554 632.341 655.02 629.913 648.448 629.913C641.877 629.913 636.688 631.994 632.538 636.503C628.387 640.665 626.312 646.214 626.312 652.803C626.312 659.393 628.387 664.595 632.884 668.757C637.034 672.919 642.568 675 649.14 675C657.442 675 664.013 671.879 668.164 665.636L659.171 661.474C656.404 664.249 652.945 665.636 648.794 665.636C645.681 665.636 642.914 664.942 640.839 663.208C638.764 661.474 637.38 659.046 636.688 655.925H670.931V653.497ZM637.034 646.908C638.072 644.133 639.455 642.399 640.839 641.358C642.914 639.624 645.681 638.931 648.794 638.931C651.561 638.931 653.637 639.624 655.712 641.012C657.787 642.399 659.171 644.48 659.863 646.908H637.034Z" />
<path id="jazztel" d="M687.534 615H676.811V673.96H687.534V615Z" />
<path id="jazztel" d="M528.081 631.994V641.011H544.683L525.314 674.306H559.902V665.289H541.57L560.94 631.994H528.081Z" />
<path id="jazztel" d="M519.433 648.295C519.087 646.908 518.741 645.52 518.05 644.133C516.666 641.359 515.283 638.931 513.207 636.85C511.132 634.769 508.711 633.035 505.944 631.994C504.56 631.301 503.177 630.954 501.793 630.607C500.409 630.26 499.026 630.26 497.296 630.26C494.183 630.26 491.416 630.954 488.995 631.994C487.612 632.688 486.574 633.382 485.536 634.075C484.499 634.769 483.461 635.81 482.423 636.85C481.386 637.89 480.694 638.931 480.002 640.318C478.619 641.705 477.927 642.746 477.581 644.133C476.889 645.52 476.543 646.908 476.197 648.295C475.852 649.682 475.852 651.416 475.852 652.804C475.852 655.925 476.543 658.7 477.581 661.127C478.273 662.515 478.965 663.555 479.656 664.596C480.348 665.636 481.386 666.677 482.077 667.717C483.115 668.758 484.153 669.451 485.19 670.492C486.228 671.185 487.612 671.879 488.649 672.573C491.071 673.613 493.838 674.307 496.605 674.307H519.779V652.804C519.779 651.416 519.433 650.029 519.433 648.295ZM509.748 664.249H497.296C495.913 664.249 494.529 663.902 493.146 663.208C492.454 662.862 491.762 662.515 491.416 662.168C490.725 661.821 490.379 661.127 489.687 660.781C489.341 660.087 488.649 659.74 488.303 659.047C487.958 658.353 487.612 657.659 487.266 656.966C486.574 655.578 486.228 654.191 486.228 652.457C486.228 651.763 486.228 650.723 486.574 650.029C486.574 649.336 486.92 648.642 487.266 647.948C487.612 647.255 487.958 646.561 488.303 645.867C488.649 645.174 488.995 644.827 489.687 644.133C490.379 643.44 490.725 643.093 491.416 642.746C492.108 642.399 492.8 642.052 493.146 641.705C494.529 641.012 496.259 640.665 497.642 640.665C498.334 640.665 499.372 640.665 500.064 641.012C500.755 641.012 501.447 641.359 502.139 641.705C503.522 642.399 504.906 643.093 505.944 644.48C506.981 645.521 508.019 646.908 508.711 648.295C509.057 648.989 509.402 649.682 509.402 650.376C509.402 651.07 509.748 652.11 509.748 652.804V664.249Z" />
<path id="jazztel" d="M469.972 615.693H458.903V655.924C458.903 655.924 458.903 659.739 458.557 660.78C458.212 662.861 457.174 663.901 455.444 663.901C453.023 663.901 450.256 662.167 447.489 658.699L439.534 666.676C444.03 672.225 449.564 675 455.79 675C458.903 675 461.67 674.306 463.746 672.919C466.513 671.185 468.242 668.41 469.28 664.595C469.626 662.514 469.972 659.046 469.972 654.19V615.693Z" />
<path id="jazztel" d="M616.281 631.647V615.693H605.559V638.93L605.213 640.664H605.559V674.306H616.281V640.664H622.507V631.647H616.281Z" />
</svg>
</div>
https://jsfiddle.net/ty6qwcnm/

Related

How can I cut a hole in an SVG, making every <path> that goes over that hole transparent

Considering the following example:
path {
transform-origin: 50% 0%;
}
#keyframes path0 {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
#keyframes path1 {
0% {
transform: rotate(-30deg);
}
100% {
transform: rotate(30deg);
}
}
#keyframes path2 {
0% {
transform: rotate(40deg);
}
100% {
transform: rotate(-40deg);
}
}
.background--custom {
height: 100%;
width: 100%;
background-color: red;
}
<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="#D6D6D6" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path0 5s linear infinite alternate;" />
<path fill="#DEFFFF" fill-opacity="1" d="M-100 -100L200 -100L200 50L-100 50Z" style="animation: path1 5s linear infinite alternate;" />
<path fill="#DAFFF5" fill-opacity="1" d="M-100 -100L200 -100L200 20L-100 20Z" style="animation: path2 5s linear infinite alternate;" />
</svg>
This creates an animates SVG background. It looks like this:
Its simply a few lines that rotate.
The goal is to cut a rectangle hole in the whole SVG, causing a section of the SVG to be transparent. Considering the black rectangle would be the hole, it should look something like this:
Is this in any way possible? I have tried using mask elements but I dont see how I can apply those mask elements to the whole SVG and not just single path element.

Here I made a <mask> on a <g> element that has a white <rect> in the background and a black <rect> in the foreground. The black square makes the group transparent. The result is that you can see the red color in the background -- I don't know if that was the point?
path {
transform-origin: 50% 0%;
}
#keyframes path0 {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
#keyframes path1 {
0% {
transform: rotate(-30deg);
}
100% {
transform: rotate(30deg);
}
}
#keyframes path2 {
0% {
transform: rotate(40deg);
}
100% {
transform: rotate(-40deg);
}
}
.background--custom {
height: 100%;
width: 100%;
background-color: red;
}
<svg class="background--custom" id="demo" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<mask id="mask01">
<rect width="100" height="100" fill="white"/>
<rect width="60" height="60" x="20" y="40" fill="black"/>
</mask>
</defs>
<g mask="url(#mask01)">
<path fill="#D6D6D6" fill-opacity="1"
d="M-100 -100L200 -100L200 50L-100 50Z"
style="animation: path0 5s linear infinite alternate;" />
<path fill="#DEFFFF" fill-opacity="1"
d="M-100 -100L200 -100L200 50L-100 50Z"
style="animation: path1 5s linear infinite alternate;" />
<path fill="#DAFFF5" fill-opacity="1"
d="M-100 -100L200 -100L200 20L-100 20Z"
style="animation: path2 5s linear infinite alternate;" />
</g>
</svg>

How to prevent an outline on SVG path when animating clip path?

I'm trying to get this animation to work in my website. For some reason the layered paths show through so a thin white outline for the path (that's animated in) is visible ruining the animation, despite the fact the paths are identical in size. I wondered if anyone has any suggestions on how to prevent this?
I've made a jsFiddle and added the code below. If you change the background for the body to black it's even clearer.
Any help would be appreciate.
body {
background: #333;
padding: 2em;
}
svg {
display: block;
left: 50%;
max-width: 8em;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
}
#rect {
animation: slideOver 5s linear infinite;
}
#keyframes slideOver {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}v
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 346">
<defs>
<clipPath id="clip-path">
<rect id="rect" x="0" y="0" height="346" width="250"/>
</clipPath>
</defs>
<path fill="#fff" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
<path clip-path="url(#clip-path)" fill="#000" d="M1.9 0h245.9v58H1.9zM250.1 139.9l-43.8-43.8-81.2 81.2-81.3-81.2L0 139.9l81.2 81.2L0 302.3l43.8 43.9 81.3-81.2 81.2 81.2 43.8-43.9-81.2-81.2"/>
</svg>

SVG arrow wrong sync animation

why doesn't the arrow start along with the line?
Is it not synchronized?
I would like the arrow to leave together with the line.
.box{
width:100%;
padding:0px;
background-color: black;
}
.squiggle {
stroke-dasharray: 498.181;
stroke-dashoffset: 498.181;
animation: draw 10s linear infinite;
}
#keyframes draw {
from {
stroke-dashoffset: 498.181;
}
to {
stroke-dashoffset: 0;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<body>
<div class="box">
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" viewBox="0 0 215 66" preserveAspectRatio="xMidYMid meet">
<g id="layer1" transform="translate(-68.19229,10.180375)">
<g id="g38" transform="matrix(0.26458333,0,0,0.26458333,54.727655,-107.07271)">
<g>
<path id="path22" class="squiggle"
style="fill:none;
stroke:orange;
stroke-width:3px;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-opacity:1"
d="M 653.40952,459.58095 C 539.70759,242.15840999999995 379.43686,703.6978899999999 252.34286,526.62857"/>
<use href="#path22"/>
<path fill="red" d="M -9.5357143,-9.9107143 10,0 -10,10 -3.3928571,-0.17857143 Z">
<animateMotion dur="10s" repeatCount="indefinite" rotate="auto">
<mpath href="#path22"/>
</animateMotion>
</path>
</g>
</g>
</g>
</svg>
</div>
</body>
</html>

look at this, This may be helpful:
#desc {
max-width: 700px;
margin-top: 100px;
color: #b3b3b3;
font-size: 11px;
font-family: sans-serif;
}
#desc li {
margin-bottom: 1em;
}
#desc p {
padding: 20px 0 0 40px;
}
#doubled-separate {
width: 110px;
}
#doubled-separate #over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 10s reveal linear infinite forwards;
}
#keyframes reveal {
50%, 100% {
stroke-dashoffset: 150;
}
}
#separate-marker {
width: 88px;
position: relative;
top:-4px;
}
#separate-marker .just-line {
fill: none;
stroke-dashoffset: 0;
animation: 10s reveal2 linear infinite forwards;
}
#keyframes reveal2 {
100% {
stroke-dashoffset: 150;
}
}
#doubled-separate-marker {
width: 110px;
}
#doubled-separate-marker .over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 3s reveal3 linear infinite forwards;
}
#keyframes reveal3 {
50%, 100% {
stroke-dashoffset: 150;
}
}
#doubled-separate-marker-2 {
width: 110px;
}
#doubled-separate-marker-2 #arrow3 path {
opacity: 0;
animation: 10s revealarrow linear infinite forwards;
}
#keyframes revealarrow {
0%, 50% {
opacity: 0;
}
60%, 100% {
opacity: 1;
}
}
#doubled-separate-marker-2 .over-path {
fill: none;
stroke-dasharray: 150;
stroke-dashoffset: 0;
animation: 10s reveal4 linear infinite forwards;
}
#keyframes reveal4 {
50%, 100% {
stroke-dashoffset: 150;
}
}
#separate-marker-2 {
width: 88px;
position: relative;
top:-4px;
}
<svg viewBox="0 0 44 97" preserveAspectRatio="xMinYMin meet" id="separate-marker-2">
<defs>
<marker id="arrow4" viewBox="0 0 13 13" refX="11" refY="8" markerWidth="13" markerHeight="13" markerUnits="userSpaceOnUse" orient="auto-start-reverse" preserveAspectRatio="xMinYMin meet">
<path d="M3.66332316,0.125850427 L3.75090984,0.194245468 L12.2529105,7.89856961 C12.6592041,8.26674392 12.5414228,8.91869993 12.063138,9.1358919 L11.9627228,9.17332054 L0.963626457,12.4383634 C0.566538833,12.5562375 0.149079906,12.3298902 0.0312058479,11.9328025 C-0.0768453724,11.5688056 0.10434498,11.187691 0.441152309,11.0359066 L0.536766731,11.0003819 L10.2568836,8.11360225 L2.74367477,1.30576583 C2.46464034,1.05291103 2.41998014,0.63794112 2.62313708,0.333974789 L2.69153212,0.246388115 C2.94438692,-0.0326463148 3.35935683,-0.0773065179 3.66332316,0.125850427 L3.66332316,0.125850427 Z" fill="#B3B3B3" fill-rule="nonzero"></path>
</marker>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 1.000000)">
<path d="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" class="just-line" stroke="#B3B3B3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4" marker-end="url(#arrow4)">
<animate attributeName="d" from="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C9.41568622,72.6740094 10.2491558,73.7809605 11.1348599,74.8513572" to="M31.6194299,0 C-0.925516514,8.99255645 -7.90071768,47.4229255 8.63466801,71.535115 C15.4626235,81.4917594 26.2993953,89.006995 41,91" dur="1.5s" repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
<div id="desc">
<ol>
<li>Line and arrowhead are two paths grouped together, with an identical (but wide and white) line path on top that animates to reveal.</li>
<li>Line path with arrowhead path attached as a marker. dash-offset animates on line path to add movement.</li>
<li>Fusion of 1 and 2. Line path with arrowhead as marker, white line path animating on top. Shows that path+marker connection is much smoother than path+path, and that butt linecaps create a smoother animation finish than square or round (although it required moving the white path start-point a step or two to cover the marker).</li>
<!-- figuring out CSS animation on an SVG marker was a JOURNEY -->
<li>Adaptation of 3. The arrowhead SVG marker has CSS animation applied. Since it doesn't appear until after the line path is fully visible, the white line path on top has a narrower stroke since it doesn't need to cover the marker. The animation timings are synced up via keyframe percentages.</li>
<li>native SVG animate!</li>
</ol>
<p>DISCLAIMER: honestly no idea about browser support for any of this</p>
</div>

Adding images in circle charts

I've made circle charts for my skills, but I want to add images inside the charts.
But without using any Javascript code.
I got it from here :https://codepen.io/maoberlehner/pen/jwVWQz?editors=1100
.circle-chart__circle {
animation: circle-chart-fill 3s reverse; /* 1 */
transform: rotate(-90deg); /* 2, 3 */
transform-origin: center; /* 4 */
background: red;
}
.circle-chart__info {
animation: circle-chart-appear 2s forwards;
opacity: 0;
transform: translateY(0.3em);
}
#keyframes circle-chart-fill {
to { stroke-dasharray: 0 100; }
}
#keyframes circle-chart-appear {
to {
opacity: 1;
transform: translateY(0);
}
}
#media (min-width: 31em) {
.grid {
grid-template-columns: repeat(1, 1fr);
}
}
<div class="col-sm-6">
<h2>Python 3</h2>
<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200">
<circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
<circle class="circle-chart__circle" stroke="#1990bf" stroke-width="2" stroke-dasharray="85,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
</svg>
</div>

To display a picture in svg, use tag <image> in conjunction with the tag <pattern>, which defines as id.
Next, install rule fill="url(#img)" with the id, inside which there is a tag with an image.
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" height="100%" width="100%" xlink:href="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"></image>
</pattern>
</defs>
Also remove fill="none" from the first <circle> shadow. This will prevent the image from being displayed.
.circle-chart__circle {
animation: circle-chart-fill 3s reverse; /* 1 */
transform: rotate(-90deg); /* 2, 3 */
transform-origin: center; /* 4 */
background: red;
}
.circle-chart__info {
animation: circle-chart-appear 2s forwards;
opacity: 0;
transform: translateY(0.3em);
}
#keyframes circle-chart-fill {
to { stroke-dasharray: 0 100; }
}
#keyframes circle-chart-appear {
to {
opacity: 1;
transform: translateY(0);
}
}
#media (min-width: 31em) {
.grid {
grid-template-columns: repeat(1, 1fr);
}
}
<div class="col-sm-6">
<h2>Python 3</h2>
<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" height="100%" width="100%" xlink:href="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"></image>
</pattern>
</defs>
<circle class="circle-chart__background" stroke="#efefef" stroke-width="2" cx="16.91549431" cy="16.91549431" r="15.91549431" fill="url(#img)"/>
<circle class="circle-chart__circle" stroke="#1990bf" stroke-width="2" stroke-dasharray="85,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
</svg>
</div>

Getting SVG elements to animate when hovering over a different element using keyframes

I'm having trouble animating elements of the SVG using keyframes. I want to animate sections of the SVG at different rates when hovering over a separate link.
If I remove the #enter:hover it animates the kernels correctly continuously, I just want it to animate when I hover over the enter link.
Can someone please guide me in the right direction?
It's a pretty long SVG file so I didn't include portions of it (the portions I am not animating).
CSS
svg{
width:30%;
height:auto;
margin-left:auto;
margin-right:auto;
display:block;
margin-top:none;
padding-top: none;
float:right;
}
#enter{
color: #fff;
text-decoration: none;
font-size:300px;
text-align: center;
font-family: "monthoers", "Helvetica-nue", Verdana, serif;
font-weight:110;
margin-bottom: none;
display:block;
float:left;
margin-top: 300px;
}
.splash{
text-align:center;
margin-top: 100px;
margin-bottom: none;
}
#keyframes pop1{
0% {transform: translateY(0px);}
10% {transform: translateY(-100px);
}
20% {transform: translateY(-200px);
}
30% {transform: translateY(-300px);
}
40% {transform: translateY(-400px);
}
50% {transform: translateY(-500px);
opacity:0.75;}
70%{ transform: translateY(-300); }
100% {opacity: 0.5;
transform: translateY(100px);}
}
#keyframes pop2 {
0% {transform: translateY(0px);}
10% {transform: translateY(-50px);
}
20% {transform: translateY(-100px);
}
30% {transform: translateY(-125px);
}
40% {transform: translateY(-150px);
}
50% {transform: translateY(-200px);
opacity:0.75;}
70%{ transform: translateY(-100); }
100% {opacity: 0.5;
transform: translateY(100px);}
}
#keyframes pop3 {
0% {transform: translateY(0px);}
10% {transform: translateY(-75px);
}
20% {transform: translateY(-150px);
}
30% {transform: translateY(-225x);
}
40% {transform: translateY(-300px);
}
50% {transform: translateY(-200px);
opacity:0.75;}
70%{ transform: translateY(-100); }
100% {opacity: 0.5;
transform: translateY(100px);}
}
#enter:hover .kernel5 {
transition:transform 4s ;
transform-origin: center center;
animation: pop1 1s infinite ease;
}
#enter:hover .kernel3 {
transition:transform 4s ;
transform-origin: center center;
animation: pop2 1s infinite ease;
}
#enter:hover .kernel4 {
transition:transform 4s ;
transform-origin: center center;
animation: pop3 1s infinite ease;
}
#enter:hover .kernel2 {
transition:transform 4s ;
transform-origin: center center;
animation: pop2 1s 1s infinite ease;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='normalize.css'/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<h1 class="splash">
<a id="enter" href="home.html"> Kernel </a>
</h1>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div class="svg">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="kernels.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.4384062"
inkscape:cx="13.604325"
inkscape:cy="505.21112"
inkscape:document-units="px"
inkscape:current-layer="layer9"
showgrid="false"
inkscape:window-width="1276"
inkscape:window-height="756"
inkscape:window-x="7"
inkscape:window-y="0"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer8"
inkscape:label="base 1"
style="display:inline">
<g class="kernel5"
inkscape:groupmode="layer"
id="layer9"
inkscape:label="kernel5"
style="display:inline;opacity:1">
<path id="kernel5"
..../>
<path id="kernel5"
..../>
<path id="kernel5"
..../>
</g>
<g class="kernel3"
inkscape:groupmode="layer"
id="layer6"
inkscape:label="kernel3"
style="display:inline">
<path id="kernel3"
..../>
<path id="kernel3"
..../>
<path id="kernel3"
..../>
</g>
<g class="kernel4"
inkscape:groupmode="layer"
id="layer7"
inkscape:label="kernel4"
style="display:inline">
<path id="kernel4"
..../>
<path id="kernel4"
..../>
<path id="kernel4"
..../>
<g class="kernel2"
inkscape:groupmode="layer"
id="layer5"
inkscape:label="kernel2"
style="display:inline">
<path id="kernel2"
...../>
<path id="kernel2"
...../>
<path id="kernel2"
...../>
</g>
</g>
</g>
</svg>
</div>
</body>
</html>

Reason
The problem is with the markup structure (HTML) and the selector that is used to apply animations to the elements. The selector that you are using (for example, #enter:hover .kernel2) instructs the UA to do the following:
When an element with id='enter' is hovered, select the element(s) which are its descendants and have class='kernel2. Descendants are nothing but children and grand-children elements.
Your HTML: (reduced to only the relevant parts)
<h1 class="splash">
<a id="enter" href="home.html"> Kernel </a>
</h1>
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<div class="svg">
<svg viewBox='0 0 100 100'>
<g class="kernel2"> <!-- this is not a descendant of the <a id="enter" -->
<path id="kernel2" d='M0,0 50,100 100,0' />
</g>
</svg>
</div>
But as per the markup, the element with class='kernel2' (which is within the svg) is not a child or a grand-child of the element with id='enter' and hence the UA does nothing.
Solution
For the animations to get applied while hovering on the element with id='enter', you should change your markup like given below.
Here, the svg is added within the <a> and </a> tags and this makes it a descendant of the element with id='enter' and thus your animations would get applied.
<h1 class="splash">
<a id="enter" href="home.html"> Kernel
<svg viewBox='0 0 100 100'>
<g class="kernel2">
<path id="kernel2" d='M0,0 50,100 100,0' />
</g>
</svg>
</a>
</h1>
Below is a demo with a sample SVG and the animation for your reference.
svg {
width: 30px;
float: right;
}
#enter {
display: block;
float: left;
}
#keyframes pop2 {
0% {
transform: translateY(0px);
}
10% {
transform: translateY(-50px);
}
20% {
transform: translateY(-100px);
}
30% {
transform: translateY(-125px);
}
40% {
transform: translateY(-150px);
}
50% {
transform: translateY(-200px);
opacity: 0.75;
}
70% {
transform: translateY(-100);
}
100% {
opacity: 0.5;
transform: translateY(100px);
}
}
#enter:hover .kernel2 {
transition: transform 4s;
transform-origin: center center;
animation: pop2 1s 1s infinite ease;
}
<h1 class="splash">
<a id="enter" href="home.html"> Kernel
<svg viewBox='0 0 100 100'>
<g class="kernel2">
<path id="kernel2" d='M0,0 50,100 100,0' />
</g>
</svg>
</a>
</h1>