"Metal and Fire SVG FX"
Bootstrap 4.1.1 Snippet by koshikojha

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="words">
<text x="0" y="0" class="word word1">Lorem</text>
<text x="0" y="0" class="word word2">ipsum </text>
<text x="0" y="0" class="word word3">dolor sit amet</text>
<text x="0" y="0" class="word word4">consectetur</text>
<text x="0" y="0" class="word word5">adipiscing elit</text>
</g>
<g class="sparks">
<ellipse class="spark sp1" cx="45" cy="58" rx="0.15" ry="4" />
<ellipse class="spark sp2" cx="49" cy="40" rx="0.15" ry="4" />
<ellipse class="spark sp3" cx="59" cy="52" rx="0.15" ry="4" />
<ellipse class="spark sp4" cx="51" cy="45" rx="0.15" ry="4" />
<ellipse class="spark sp5" cx="52" cy="36" rx="0.15" ry="4" />
</g>
<g class="sparks sparks2">
<ellipse class="spark sp1" cx="35" cy="51" rx="0.15" ry="4" />
<ellipse class="spark sp2" cx="39" cy="60" rx="0.15" ry="4" />
<ellipse class="spark sp3" cx="59" cy="57" rx="0.15" ry="4" />
<ellipse class="spark sp4" cx="70" cy="60" rx="0.15" ry="4" />
<ellipse class="spark sp5" cx="65" cy="56" rx="0.15" ry="4" />
</g>
<g class="sparks sparks3">
<ellipse class="spark sp1" cx="69" cy="63" rx="0.15" ry="4" />
<ellipse class="spark sp2" cx="62" cy="51" rx="0.15" ry="4" />
<ellipse class="spark sp3" cx="58" cy="62" rx="0.15" ry="4" />
<ellipse class="spark sp4" cx="45" cy="49" rx="0.15" ry="4" />
<ellipse class="spark sp5" cx="67" cy="60" rx="0.15" ry="4" />
</g>
<defs>
<filter id="metallic" x="0" y="0" width="100%" height="100%">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
:root {
background-image:
radial-gradient(rgba(236, 41, 26,0.26) 0%,rgba(186, 33, 21,0) 50% ),
linear-gradient(#000000 40%, #6C2924, #FF7700 148%);
background-size: 750px 400vh, 100% 100%;
background-repeat: no-repeat, repeat;
background-position: 50% -130vh, 0% 0%;
width: 100vw;
height: 100vh;
font: 500 20px/20px 'Josefin Sans', sans-serif;
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background:
radial-gradient(
rgba(236, 41, 26,0.2) 0%,
rgba(186, 33, 21,0) 50% ),
radial-gradient(
rgba(236, 81, 66,0.2) 0%,
rgba(186, 33, 21,0) 50% ),
radial-gradient(
rgba(236, 141, 26,0.2) 0%,
rgba(186, 133, 21,0) 50% ),
radial-gradient(
rgba(236, 241, 26,0.2) 0%,
rgba(186, 33, 11,0) 50% ),
radial-gradient(
rgba(236, 171, 06,0.2) 0%,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit Pro

Questions / Comments: