Link to home
Start Free TrialLog in
Avatar of Imran Hamzah
Imran Hamzah

asked on

Shining splash screen using SVG and CSS3/SCSS animation.

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:

User generated image
My expected splash screen:

User generated image
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

ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This question has not had any additional comments, and will be closed with answer being only proposed working solution