Solved

Shining splash screen using SVG and CSS3/SCSS animation.

Posted on 2016-09-08
2
19 Views
Last Modified: 2016-09-29
Hi, I have this SVG file and need some help for splash screen animation. You can see the red circle the shining need to be move from left to right (to character `n`). How I can do that? Thanks for any help.
My current file:

Input file
My expected splash screen:

Expected splash screen
SVG file:
<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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="Layer_1"
   x="0px"
   y="0px"
   viewBox="0 0 1551 513.9"
   style="enable-background:new 0 0 1551 513.9;"
   xml:space="preserve"
   inkscape:version="0.91 r13725"
   sodipodi:docname="PenSvg.svg"><metadata
     id="metadata75"><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></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs73" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     id="namedview71"
     showgrid="false"
     inkscape:zoom="0.52520117"
     inkscape:cx="726.25969"
     inkscape:cy="320.00999"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="Layer_1" /><style
     type="text/css"
     id="style3">
	.st0{fill:#8F278C;}
	.st1{fill:#2394C5;}
	.st2{fill:#90278E;}
	.st3{fill:none;stroke:#8F278C;stroke-width:9;stroke-miterlimit:10;}
	.st4{fill:#FFFFFF;}
</style><g
     id="g5"
     transform="matrix(1.7112971,0,0,1.7382464,-293.18431,-105.08143)"><path
       class="st0"
       d="m 556.73226,258.4 0,-108.32339 54.25851,0 c 27.31443,0 40.92536,9.6704 40.92536,29.01118 0,21.06496 -18.70345,33.88386 -56.01775,38.53164 l -3.51847,-11.84436 c 27.40704,-3.29842 41.11055,-11.99428 41.11055,-26.08756 0,-11.99429 -8.05544,-17.99143 -24.16634,-17.99143 l -35.36987,0 0,96.70392 -17.22199,0 z"
       id="path7"
       inkscape:connector-curvature="0"
       style="fill:#8f278c" /><path
       class="st0"
       d="m 710.8,152.3 c 30.2,0 45.3,14.9 45.3,44.7 0,4.2 -0.3,8.8 -0.9,13.6 l -74.4,0 c 0,21.7 12.7,32.5 38,32.5 12.1,0 22.8,-1.3 32.1,-4 l 0,15.2 c -9.4,2.7 -20.7,4 -34.1,4 -36.4,0 -54.6,-18.1 -54.6,-54.2 -0.2,-34.5 16.1,-51.8 48.6,-51.8 z m -30.1,42.8 57.4,0 c -0.4,-18.6 -9.5,-27.9 -27.3,-27.9 -18.9,0 -28.9,9.3 -30.1,27.9 z"
       id="path9"
       inkscape:connector-curvature="0"
       style="fill:#48278f;fill-opacity:1" /><path
       class="st0"
       d="m 781.2,258.4 0,-106.1 12.6,0 3.3,13.5 c 10.8,-9 22.8,-13.5 35.8,-13.5 26.5,0 39.7,13.2 39.7,39.5 l 0,66.6 -18.7,0 0,-66.9 c 0,-15.8 -7.8,-23.6 -23.5,-23.6 -10.7,0 -20.9,4.5 -30.5,13.4 l 0,77.1 -18.7,0 z"
       id="path11"
       inkscape:connector-curvature="0"
       style="fill:#962994;fill-opacity:1" /></g><polygon
     class="st1"
     points="115.5,298.7 314.2,234.7 282.5,147.8 37.4,83.8 "
     id="polygon25"
     style="fill:#010806;fill-opacity:1"
     transform="translate(188.4992,59.025002)" /><polygon
     class="st2"
     points="328.4,229.7 448.3,191.3 300.6,152.5 "
     id="polygon27"
     transform="translate(188.4992,59.025002)"
     style="fill:#90278e" /></svg>

Open in new window

0
Comment
Question by:Imran Hamzah
  • 2
2 Comments
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points (awarded by participants)
Comment Utility
greetings     Imran Hamzah, , ,  Not at all sure what your  "splash screen"  may incorporate for it's HTML page properties? ? ?

Here is some code for a page, that I guess may be a splash screen sort of thing? Anyway I use the CSS transition to animate the Moving of the red ellipse SVG to be over the "n" in your SVG image
<!doctype html>
<html lang="en"><head><title>SVG using CSS Translate</title>
<style>
body{background: url(peninput.svg);
background-size: cover; /*120%;*/
background-position: center top; 
background-repeat: no-repeat;}

</style>
</head>
<body>
<svg id="svgM" width="16%" viewBox="0 0 470 790" version="1.1"
  style="position: absolute; top: 0px; left: 18%; overflow: hidden;
  -webkit-transition: left 1.8s; transition: left 1.8s;">
<g id="b1">
<ellipse cx="242" cy="485" rx="217" ry="266"  fill="transparent" stroke="#ee0000" stroke-width="6" />
</g>
</svg>
<h4 style="text-align: center;">Splash Screen</h4>

<script>/* <![CDATA[ */
function moveS() {
document.getElementById('svgM').style.left ="64%";
}
setTimeout(moveS, 2000);
/* ]]> */</script>
</body>
</html>

Open in new window


I used the exact SVG code that you showed as the page background peninput.svg image. this works for me in firefox, I hope it has something in it to help your splash page
1
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
This question has not had any additional comments, and will be closed with answer being only proposed working solution
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now