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

<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%"> <feTurbulence in="Sourcegraphic" type="fractalNoise" baseFrequency="0.25" numOctaves="1" result="texture"/> <feComposite in="SourceGraphic" in2="texture" operator="in" result="textured"/> <feOffset in="SourceGraphic" dx="0.3" dy="0.3" result="offSet" /> <feFlood in="offSet" flood-color="rgb(0,0,0)" flood-opacity="0.8" result="shaded1" /> <feComposite in="shaded1" in2="offSet" operator="in" result="dropShadow"/> <feBlend in2="textured" in="dropShadow" mode="screen" result="dropShadow1"/> <feDiffuseLighting in="dropShadow1" result="light" lighting-color="white"> <feDistantLight azimuth="200" elevation="10"/> </feDiffuseLighting> <feComposite in="dropShadow1" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit1"/> <feSpecularLighting in="dropShadow1" specularExponent="20" lighting-color="#ffffff" result="light2" > <fePointLight x="20" y="0" z="10"/> <animate attributeName="specularExponent" values="20;100;10;100;20" dur="5s" repeatCount="indefinite" /> <animate attributeName="lighting-color" values="#ffffff;#FF7C00;#FF3200;#FF7C00;#ffffff" dur="10s" repeatCount="indefinite" /> </feSpecularLighting> <feComposite in="dropShadow1" in2="light2" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit2"/> <!--<feComposite in="lit1" in2="lit2" operator="in" result="lighted"/> --> <feBlend in2="lit1" in="lit2" mode="screen" result="lighted" /> </filter> <linearGradient id="sparkgrad" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.8" /> <stop offset="20%" style="stop-color:rgb(255,255,0);stop-opacity:0.1" /> <stop offset="60%" style="stop-color:rgb(255,0,0);stop-opacity:0.02" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0" /> </linearGradient> </defs> </svg>
: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%, rgba(186, 233, 21,0) 50% ); background-size: 60vw 4000px; background-repeat: no-repeat; background-position: 0vw -50vh, 20vw -20vh, 30vw -30vh, 70vw -50vh, 50vw -10vh; background-blend-mode: exclusion; animation: flickerBg 3s linear infinite alternate; } @keyframes flickerBg { 0% { background-position: -10vw -20vh, 20vw -30vh, 10vw -30vh, 70vw -50vh, 50vw -10vh; } 50% { background-position: -5vw -70vh, 24vw -10vh, 10vw -90vh, 60vw -30vh, 50vw -60vh; } 100% { background-position: -5vw -50vh, 20vw -80vh, 15vw -90vh, 65vw -80vh, 40vw -20vh; } } svg { margin: 0; padding: 0; width: 100vw; height: 100vh; box-sizing: border-box; fill: rgba(237, 212, 165,1); stroke: #fd8768; stroke-width: 0px; stroke-linecap: butt; stroke-linejoin: miter; filter: drop-shadow(0px 0px 1px #BA2115); transform-style: preserve-3d; perspective-origin: center cetner; perspective: 300; } .word1 { display: block; font: 700 15px/15px 'Josefin Sans', sans-serif; transform: translate(20px, 50px); } .word2 { display: block; font: 700 15px/15px 'Josefin Sans', sans-serif; transform: translate(38.1px, 61px); } .word3 { display: block; font: 300 5px/5px 'Josefin Sans', sans-serif; transform: translate(44.5px, 67.15px); fill: rgba(237, 212, 165,0.7); } .word4 { display: block; font: 300 5px/5px 'Josefin Sans', sans-serif; transform: translate(20.4px, 50.2px) rotate(-90deg); fill: rgba(237, 212, 165,0.5); } .word5 { display: block; font: 100 2px/2px 'Josefin Sans', sans-serif; transform: translate(44.5px, 52.6px); } .word { filter: url(#metallic); } .spark { position: absolute; fill: url(#sparkgrad); opacity: 0; transform-origin: 50% 50%; transform: translate(0px, 0px); animation: floatUp 2400ms linear infinite forwards; } .sp1 { animation-delay: 0ms; } .sp2 { animation-delay: 410ms; } .sp3 { animation-delay: 830ms; } .sp4 { animation-delay: 1270ms; } .sp5 { animation-delay: 620ms; } .spark3 .sp1 { animation-delay: 210ms; } .spark3 .sp2 { animation-delay: 1240ms; } .spark3 .sp3 { animation-delay: 1770ms; } .spark3 .sp4 { animation-delay: 620ms; } .spark3 .sp5 { animation-delay: 1510ms; } @keyframes floatUp { 0% { transform: translate(0px, 0px) rotate3d(0,0,0,0deg); opacity: 1 } 5% { transform: translate(5px, -10px) rotate3d(2,4,1,40deg); } 6% { transform: translate(5px, -10px) rotate3d(2,4,1,30deg); opacity: 0.8; } 30% { transform: translate(0px, -50px) rotate3d(2,8,1,-20deg) scale(1.2); opacity: 0.1; } 49% { transform: translate(-10px, -60px) rotate3d(2,4,1,40deg); opacity: 0; } 50% { transform: translate(0px, -60px) rotate3d(2,4,1,-40deg); opacity: 0; } 90% { transform: translate(5px, -70px) rotate3d(2,4,0,40deg); opacity: 0 } 100% { transform: translate(5px, -70px) rotate3d(2,4,0,40deg); opacity: 0 } }

Related: See More


Questions / Comments: