<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.a01{
width:150px;
height:450px;
fill:black;
/* animation:my 1s infinite; */
}
.c01{
fill:#F4F6F7;
stroke:black;
stroke-width:9;
font-size:90px;
stroke-dasharray:30 50;
animation:my3 5s infinite ease-in-out alternate;
}
.a02{
fill:none;
stroke:black;
stroke-width:6;
x:150;
y:150;
width:200px;
height:200px;
stroke-dasharray:0 400 200 0;
}
.a03{
fill:#F4F6F7;
stroke:black;
stroke-width:6;
font-size:90px;
stroke-dasharray:5 20 50 40;
animation:my2 5s infinite ease-in-out alternate;
}
.b01{
fill:none;
stroke:black;
stroke-width:4;
x:150;
y:150;
width:200px;
height:200px;
stroke-dasharray:0 400 200 0;
}
.b04{
fill:#F4F6F7;
stroke:black;
stroke-width:4;
font-size:90px;
stroke-dasharray:5 20 50 40;
animation:my1 5s infinite ease-in-out alternate;
}
.b02{
fill:#FFCE44;
animation:my2 1s infinite alternate;
}
.b03{
fill:#4A8AF4;
animation:my3 1s infinite alternate ease-in-out;
}
@keyframes my1{
0% 100%{stroke-dasharray:5px; stroke:black;}
35%{stroke-dasharray:200px; stroke:#FCE000;}
75%{stroke-dasharray:400px; stroke:#FCE000;}
95%{stroke-dasharray:700px; stroke:#FCE000; }
}
@keyframes my2{
0% 100%{stroke-dasharray:5px; stroke:black;}
35%{stroke-dasharray:300px; stroke:#4B8BF4;}
75%{stroke-dasharray:600px; stroke:#4B8BF4;}
95%{stroke-dasharray:700px; stroke:#4B8BF4; }
}
@keyframes my3{
0% 100%{stroke-dasharray:5px; stroke:black; }
35%{stroke-dasharray:100px; stroke:#DC4C3F;}
75%{stroke-dasharray:500px; stroke:#DC4C3F; }
95%{stroke-dasharray:700px; stroke:#DC4C3F; }
}
</style>
</head>
<body>
<svg width="500px" height="500px">
<text class="c01" x="100" y="150">
L I G H T
<!-- <set attributeName="class" to="b04" begin="mousemove"/>
<set attributeName="class" to="b01" begin="mouseout"/> -->
</text>
<text class="a03" x="100" y="150">
L I G H T
<!-- <set attributeName="class" to="a03" begin="mousemove"/>
<set attributeName="class" to="a02" begin="mouseout"/> -->
</text>
<text class="b04" x="100" y="150">
L I G H T
<!-- <set attributeName="class" to="b04" begin="mousemove"/>
<set attributeName="class" to="b01" begin="mouseout"/> -->
</text>
<!-- <circle class="b02" cx="75" cy="220" r="45"/>
<circle class="b03" cx="75" cy="340" r="45"/> -->
</svg>
<svg>
<path d="M100 100 h80 l20 -120 h80 " stroke="black" fill="none" />
</svg>
</html>