<body>
<main>
<div id="imagemark--joomla">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 400" xml:space="preserve">
<circle class="circle circle--yellow" cx="290.1" cy="109.8" r="32.8"/>
<circle class="circle circle--red" cx="289" cy="283" r="32.8"/>
<circle class="circle circle--blue" cx="116.8" cy="283" r="32.8"/>
<circle class="circle circle--green" cx="116.9" cy="109.8" r="32.8"/>
<path class="arc arc--yellow" d="M269.1,182.5c38-38-13.8-89.8-51.8-51.9c0,0-51,51-51,51"/>
<path class="arc arc--red" d="M216.3,262.1c38,38,89.8-13.8,51.9-51.8c0,0-51-51-51-51"/>
<path class="arc arc--blue" d="M137.7,210.4c-38,38,13.8,89.8,51.8,51.9c0,0,51-51,51-51"/>
<path class="arc arc--green" d="M189.6,130.7c-38-38-89.8,13.8-51.9,51.8c0,0,51,51,51,51"/>
</svg>
</div>
</main>
body {
background: #ee0979;
background: linear-gradient(to right, #ff6a00, #ee0979);
background: linear-gradient(to right, #ff6a00, #ee0979);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#imagemark--joomla {
width: 160px;
height: 160px;
animation-name: joomlamark;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.arc {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: arc;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
fill:none;
stroke-width:33.3473;
stroke-miterlimit:10;
&.arc--yellow{
stroke: #fff;
}
&.arc--red{
stroke: #fff;
}
&.arc--blue{
stroke: #fff;
}
&.arc--green{
stroke: #fff;
}
}
circle {
&.circle--yellow{
fill: #fff;
}
&.circle--red{
fill: #fff;
}
&.circle--blue{
fill: #fff;
}
&.circle--green{
fill: #fff;
}
}
/* Animation code */
@keyframes arc {
0% {stroke-dashoffset: 1000;}
40% {stroke-dashoffset: 1000;}
100% {stroke-dashoffset: 0;}
}
@keyframes joomlamark {
0% {transform: rotate(-90deg) scale(0);}
40% {transform: rotate(360deg) scale(1);}
100% {transform: rotate(360deg) scale(1);}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.