Thanks Vinay but my question is different, i already applied that star rating in my form. i have 2 vf page, one with star rating and button and one controller.
 when i click on button then i want to save the same page with all functionalities and styling as PDF also i need to calculate overall rating. right now i am doing page reference with another VF page but not getting the poutput as expected. what i need is whatever is in my first vf page that should be save as PDF.Please give any suggestions on that. 

here is my code:
Controller:

public class SelfAssessmentController {
    
    //public integer rowNum{get;set;}
    public integer rating{get;set;}
     public string selfrole{get;set;}
    public string usernm{get;set;}
     public Map<String,List<Responsibility__c>> resTypeList1{get;set;}
    
    public SelfAssessmentController(ApexPages.StandardController stdController){
    }
      public PageReference selfAssessment() 
    {
      PageReference p = new PageReference('/apex/<SelfAssessmentPage>?role_1='+selfrole);
      p.setRedirect(true);
      return p;    
    }
    public SelfAssessmentController()
    {
       // role1='Associate Software Engineer II';
       // usernm='Shilpa Goyal';
       
       system.debug('username is'+usernm);
        selfrole=ApexPages.currentPage().getParameters().get('role_1');
        getResRole1();        
       
    }
    public PageReference generatePDF()
    {
        PageReference pg=page.VFPSelfAssessmentPDF;
        return pg;
    }
    
  
    
    public List<Responsibility__c> getResRole1()
    {
        resTypeList1 = new Map<String,List<Responsibility__c>>();
        List<Responsibility__c> rList=[select Name,Type__c,Description__c,(SELECT Description__c FROM Responsibility_Details__r) from Responsibility__c 
                                       where Skill_Matrix__r.Name=:selfrole and Type__c!=null order by Type__c,Name];
        
        
        for(Responsibility__c resp:rList)
        {
            if(resp.Type__c!='' && resp.Type__c!=null)
            {
                if((!resTypeList1.containsKey(resp.Type__c)))
                {
                    List<Responsibility__c> tmpResp = new List<Responsibility__c>();
                    tmpResp.add(resp);
                    resTypeList1.put(resp.Type__c,tmpResp);
                }
                else{
                    resTypeList1.get(resp.Type__c).add(resp);
                }         
            }
        }
        return rList;
    }
    
    public List<String> KeySet {
        get {
            return new List<String>(resTypeList1.keySet()); 
        }
    }
}


VF page 1:

<apex:page controller="SelfAssessmentController" showHeader="false"  sidebar="false" cache="false"  docType="html-5.0" > 
   <apex:form id="form" >
       <apex:pageBlock >  
            <style>
            body .bPageBlock .pbBody .darkblue .pbSubheader{
                background-color:#00008B;
            }
              .outclass
            {
                font-family: Arial Unicode MS; 
                font-size: 15px;
                background-color:#808080;
                font-weight:bold;
                color:white
            } 
                
             .headerClass
            {
                background-color:#00008b;
                font-size: 20px;
                font-weight:bold;
                font-family: Arial Unicode MS; 
            }
            .outputClass
            {    
                color:white;
                text-align:center;
            }
                
            .buttonstyle
            {
                background:#4169e1 !important;
                color:white !important;
                width:150px !important;
            }
             .star-rating fieldset{
                     font-size:0;
                    white-space:nowrap;
                    display:inline-block;
                    width:150px;
                    height:30px;
                    overflow:hidden;
                    position:relative;
                    background:url('{!$Resource.EmptyStar}');
                    background-size:contain;
             }
             .star-rating input{
                    -moz-appearance:none;
                    -webkit-appearance:none;
                    opacity:0;
                    display:inline-block;
                    width:100%;
                    height:100%;
                    margin-left:50;
                    padding:0;
                    z-index:2;
                    position:relative;
             }
             .star-rating input:hover+label,
             .star-rating input:checked+label{
                    opacity:1;
             }
             .star-rating label{
                    opacity:0;
                    position:absolute;
                    left:0;
                    top:0;
                    height:100%;
                    width:20%;
                    z-index:4;
                    background:url('{!$Resource.FillStar}');
                    background-size:contain;
             }   
             .star-rating td ~ td label{
                    width:40%;
                    z-index:3;
             }
             .star-rating td ~ td ~ td label{
                    width:60%;
                    z-index:2;
             }
             .star-rating td ~ td ~ td ~ td label{
                    width:80%;
                    z-index:1;
             }
             .star-rating td ~ td ~ td ~ td ~ td label{
                    width:100%;
                    z-index:0;
             }
                
            </style>
           
         <table> 
         <tr>
          <div class="slds-grid slds-gutters">
                <div class="slds-col">
                <span>
                <div class="slds-form slds-form_stacked">
                    <!-- insert your field attributes here inside div class="slds-form-element" for those many fields you want to show in one column --> 
                    <div class="slds-form-element">
                        <!--<label class="slds-form-element__label" for="form-element-01">Form Label</label>-->
                        <div class="slds-form-element__control">
                           <td>
                                
                           
                               <apex:outputPanel styleClass="star-rating" layout="block"  style="border:solid 1px black;  width:60%;line-height:17px" >
                                 <apex:pageBlockSection columns="1" >
                    
                                    <apex:outputText style="margin-left:200px;color:white;background-color:#00008b;font-size: 24px;font-weight:bold;font-family: Arial Unicode MS;" value="Brand Values Rating Calculator"></apex:outputText>  
                            
                                    <apex:pageBlockSectionItem dataStyleClass="headerClass">
                                        <apex:outputText style="margin-left:200px" styleClass="outputClass" value="{!usernm} - {!selfrole}"></apex:outputText>
                                    </apex:pageBlockSectionItem>
                                         
                                    <apex:repeat value="{!KeySet}" var="Key">
               
                                       <apex:outputText value="{!Key} - Overall Rating" style="background-color:gold;font-weight:bold;font-size:18px;font-family:Arial Unicode MS;width:100%;"/>
                
                                    <apex:selectRadio id="overall" value="{!rating}" layout="lineDirection">
                                        <apex:actionSupport event="onclick" reRender="form"/>
                                        <apex:selectOption itemValue="1"></apex:selectOption>
                                        <apex:selectOption itemValue="2"></apex:selectOption>
                                        <apex:selectOption itemValue="3"></apex:selectOption>
                                        <apex:selectOption itemValue="4"></apex:selectOption>
                                        <apex:selectOption itemValue="5"></apex:selectOption>
        
                                   </apex:selectRadio>
                                   <apex:variable value="{!0}" var="rowNum"/>   
                                   <apex:repeat value="{!resTypeList1[Key]}" var="listOfDetails" id="theTable" >
                                    
                                   <apex:outputText value="{!listOfDetails.Name}:{!listOfDetails.Description__c }" label="" styleClass="outclass" />
                    
                                   <apex:selectRadio id="rate1" value="{!rating}" layout="lineDirection" onchange="calculateRating()">
                                        <apex:actionSupport event="onclick" reRender="form"/>
                                        <apex:selectOption itemValue="1"></apex:selectOption>
                                        <apex:selectOption itemValue="2"></apex:selectOption>
                                        <apex:selectOption itemValue="3"></apex:selectOption>
                                        <apex:selectOption itemValue="4"></apex:selectOption>
                                        <apex:selectOption itemValue="5"></apex:selectOption>
                                    </apex:selectRadio>
                    
                                       <apex:repeat value="{!listOfDetails.Responsibility_Details__r}"  var="c" >
                                       <apex:outputText value="{!c.Description__c }" label=""/>
                                     </apex:repeat>
                                      <apex:variable var="rowNum" value="{!rowNum + 1}"/>
                                    </apex:repeat>
                                     </apex:repeat>
                                     </apex:pageBlockSection>
                              </apex:outputPanel>
                            </td>   
                        </div>
                            
                    </div>
                        
                </div>
                   </span>
             </div>
            
            <div class="slds-col">
             <span>
                <div class="slds-form slds-form_stacked">
                    <!-- insert your field attributes here inside div class="slds-form-element" for those many fields you want to show in one column --> 
                    <div class="slds-form-element">
                        <td>
                        <tr>
                        <!--<label class="slds-form-element__label" for="form-element-01" style="margin-left:920px;font-size:16px;">Performance Standards</label>&nbsp;-->
                            <apex:commandButton value="Download as PDF" styleClass="buttonstyle" style="margin-left:920px;font-size:14px" action="{!generatePDF}" />
                            <!--<dx-button class="header_bail-link">
                                <a class="button variant_tertiary size small style icon font-display icon-right"
                                   href="https://resources.docs.salesforce.com/238/latest/en-us/sfdc/pdf/salesforce_apex_reference_guide.pdf"
                                   target="_blank" aria-label="PDF" part="container">Generate PDF</a>
                                "Generate PDF"
                            </dx-button>-->
                      
                        </tr>
                         </td>
                    </div>
                  </div>
               </span>
              </div>
           </div>
          </tr>
          </table>
       </apex:pageBlock>
    </apex:form>
    
    <script>
    var overallArray=new array();
    var overallRating=0;
    function calculateRating()
    {
        //var list=document.getElementById('rate1').value;
        //overallArray.add(list);
        //document.getElementById('overall').value=list;
        
        var radios = document.getElementById("rate1");

        for (var i = 0, length = radios.length; i < length; i++) {
          if (radios[i].checked) {
            // do whatever you want with the checked radio
           
              overallArray.add(radios[i].value);
            
            // only one radio can be logically checked, don't check the rest
              //break;
          }
        }
        for(var i=0,length=overallArray.length;i<length;i++)
           {
                   overallRating=overallRating+overallArray[i];
           }
        document.getElementById('overall').option.value=(overallRating/overallArray.length);
    }
    
    </script>
</apex:page>